Cara Membuat Spoiler Keren Di Blog Valid AMP

Fungsi Spoiler pada blog AMP itu penting. Artikel yang panjang adalah alasan yang tepat untuk menerapkan ini. Artikel yang terlalu panjang akan membuat loading blog semakin lambat. Spoiler berfungsi menyembunyikan bagian artikel tertentu sesuai keinginan penulis, dan akan muncul dengan menekan tombol spoiler.

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;
   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 kode HTML berikut di tempat 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 saat membuka spoiler.
• expand-single-section ingat!, hanya gunakan code ini jika menggunakan 2 atau lebih spoiler. Intinya, jika tombol spoiler pertama di buka, akan menutup spoiler ke 2. Begitupun sebaliknya.

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

Selanjutnya, jika kalian akan menggunakan lebih dari 1 tombol spoiler, ikuti seperti 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 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.

Sumber : https://www.idnxmus.com/2018/10/spoiler-di-blog-amp.html