Cara Menciptakan Spoiler Keren Di Blog Valid Amp

Spoiler untuk blog AMP memang di perlukan kalau pembahasan di dalam artikel cukup panjang, alasannya ialah fungsi dari spoiler ini ialah menyembunyikan dan menampilkan konten.

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

Membuat Spoiler di Blog AMP berbeda dengan cara yang di gunakan pada Blog Non AMP, alasannya ialah Blog AMP tidak mendukung Javascript yang sama menyerupai yang dipakai pada blog non AMP.

Blog AMP memakai script tersendiri untuk menjalankan fungsi dari Spoiler, script yang akan aku gunakan di sini ialah script amp-accordion yang tentunya mempunyai fungsi yang sama dengan script di blog non-amp.

Untuk menciptakan 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 arahan CSS berikut sempurna 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;margin:0;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"} 
 amp-accordion section{margin:10px 0} 
 .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 arahan HTML berikut di daerah mana saja kalian inginkan untuk di tampilkan.

  <div class="spoiler-amp">
   <amp-accordion animate expand-single-section>
     <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>  

Perhatikan pada code <amp-accordion>.

• animate berfungsi untuk memperhalus ketika membuka spoiler.
• expand-single-section ingat!, hanya gunakan code ini kalau memakai 2 atau lebih spoiler. Intinya, kalau tombol spoiler pertama di buka, akan menutup spoiler ke 2. Begitupun sebaliknya.

Dan kalau 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>  

Selanjutnya, kalau kalian akan memakai lebih dari 1 tombol spoiler, ikuti menyerupai berikut ini.

  <div class="spoiler-amp"> 
   <amp-accordion animate expand-single-section>
     <section>
       <h4 class='spoiler-button'>Contoh Spoiler Teks</h4>
       <div class="isi">
       Masukkan teks kalian di sini....
       </div>
     </section>
 
     <section>
       <h4 class='spoiler-button'>Contoh Spoiler Teks</h4>
       <div class="isi">
       Masukkan teks kalian di sini....
       </div>
     </section>
 
     <section>
       <h4 class='spoiler-button'>Contoh Spoiler Teks</h4>
       <div class="isi">
       Masukkan teks kalian di sini....
       </div>
     </section>
   </amp-accordion>
 </div>  

Untuk lebih jelasnya sanggup 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.
Sumber https://www.idnxmus.com/

Bagikan Artikel ini