Cara Membuat Spoiler Keren Di Blog Valid AMP

Spoiler untuk blog AMP memang di perlukan jika pembahasan di dalam artikel cukup panjang, karena fungsi dari spoiler ini adalah menyembunyikan dan menampilkan konten.

Konten yang saya maksud itu berupa Tulisan, Kode, Gambar, ataupun Video. Jika kalian merasa tampilan artikel kalian terlalu panjang untuk di muat di dalam satu halaman, kalian bisa menggunakan cara ini.

Membuat Spoiler di Blog AMP berbeda dengan cara yang di gunakan pada Blog Non AMP, karena Blog AMP tidak mendukung Javascript yang sama seperti yang digunakan pada blog non AMP.

Blog AMP menggunakan script tersendiri untuk menjalankan fungsi dari Spoiler, script yang akan saya gunakan di sini adalah script amp-accordion yang tentunya memiliki fungsi yang sama dengan script di blog non-amp.

Untuk membuat membuat Spoiler di Blog AMP ikuti langkah berikut ini :

Cara Membuat Spoiler Untuk Blog AMP HTML

Pertama, tambahkan dulu script amp-accordion di bawah ini pada template blog kalian, tepatnya di atas code </head>. <script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/> Selanjutnya tambahkan kode CSS berikut tepat di bawah code <style amp-custom>


.spoiler-amp{margin:10px 0}

.spoiler-amp h4.spoiler-button{color:#444;font-size:14px;font-weight:bold;outline:none;line-height:1.5em;border-radius:50px;padding:8px 30px;-moz-border-radius:50px}
.spoiler-amp h4.spoiler-button:before{content:"";position:absolute;left:15px;top:50%;margin-top:-7px;border:7px solid;border-color:transparent transparent transparent #444}
.spoiler-amp h4.spoiler-button:after{content:"\0002B";position:absolute;font-size:20px;line-height:20px;top:50%;margin-top:-10px;text-align:right;right:15px}
.spoiler-amp section[expanded] h4.spoiler-button:after{content:"\02013"}
.spoiler-amp amp-accordion div.isi{height:auto;margin:20px 10px;padding:0 0 0 20px;border-left:3px dotted #f0f0f0}
Kemudian untuk menerapkannya di dalam postingan artikel, masukkan kode HTML berikut di tempat mana saja kalian inginkan untuk di tampilkan.


<div class="spoiler-amp">

<amp-accordion animate>
<section>
<h4 class='spoiler-button'>Contoh Spoiler Teks</h4> /* Judul Spoiler */
<div class="isi">
Masukkan teks kalian di sini.... /* Masukkan teks, gambar, atau video */
</div>
</section>
</amp-accordion>
</div>
Namun jika kalian ingin menampilkan kode HTML di dalam Spolier, gunakan HTML di bawah ini


<div class="spoiler-amp">

<amp-accordion animate>
<section>
<h4 class='spoiler-button'>Contoh Spoiler Teks</h4> /* Judul Spoiler */
<div class="isi">
<pre><code>
Code kalian di sini..... /* Parse Code terlebih dahulu */
</code></pre>
</div>
</section>
</amp-accordion>
</div>
Untuk lebih jelasnya dapat kalian lihat melalui JSFiddle di bawah ini.

Akhir Kata

Spoiler berfungsi menyembunyikan dan menampilkan kontent berupa teks, gambar, dan video. ini bertujuan untuk memperkecil ruang yang di gunakan dalam penulisan artikel yang panjang.

Jika kalian mempunyai pertanyaan seputar Spoiler di Blog AMP ini, silahkan tinggalkan komentar kalian pada kolom komentar di bawah.

2 Komentar

Aturan Komentar :
Centang "Beritahu Saya" atau "Notify Me" untuk mendapatkan notifikasi balasan komentar via Email.
Gunakan tag HTML < em > untuk menuliskan potongan code atau URL. Contoh : < em >isi pesan< /em >
BUKA KOMENTAR