Cara Mudah Membuat Spoiler Keren Di Blog Valid AMP

Jika sobat ingin membungkus bagian tertentu di dalam sebuah artikel baik berupa teks, gambar, video atau apa saja yang ingin sobat sembunyikan dengan fungsi tombol untuk menampilkannya, maka salah satu cara yang memang sangat efektif untuk digunakan adalah memasang Spoiler di blog sobat.

Tekhnik penggunaan spoiler sangat berguna apabila sobat menulis sebuah artikel yang panjang dengan di sisipi beberapa penjelasan penting, gambar maupun video. Karena postingan blog yang panjang dengan beberapa gambar maupun video akan menambah beban loading saat laman artikel di buka.

Keberadaan spoiler di sebuah artikel atau laman blog juga akan memberikan artikel kita lebih rapi dan memudahkan pengunjung blog untuk menyorot bagian-bagian penting yang sudah kita bungkus dan tandai dengan tombol spoiler.

Untuk memasang spoiler di blog Non Amp kita bisa mengkombinasikan css dan jquery untuk membuat tampilan spoiler keren dan pastinya sudah banyak kita temukan tutorial yang membahas tentang spoiler di blog Non Amp.

Jika sebelumnya sobat menggunakan template non amp pastinya pemasangan spoiler ini sangat mudah bukan? Beda halnya jika kita menggunakan template Amp. Karena jika kita menggunakan spoiler dengan mengkombinasikan css skaligus javascript, maka pastinya akan membuat laman blog kita tidak lagi valid amp.

Jika sobat ingin membuat dan memasang spoiler di blog amp dan valid amp, maka cara ampuh yang dapat sobat gunakan adalah dengan memanfaatkan js amp-accordion yang memang sudah disediakan untuk laman amp.

Cara Membuat Spoiler Di Blog Valid AMP

Langkah awal yang harus dilakukan adalah simpan js amp-accordion berikut setelah kode </head>

<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>

Selanjutnya silahkan simpan kode CSS Spoiler berikut di dalam tag <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}

Jika warna spoiler kurang sesuai dengan selera, sobat bisa mengaturnya pada bagian css diatas

Kemudian jika js amp-accordion dan CSS Spoiler sudah terpasang. Maka selanjutnya tinggal cara bagaimana menerapkannya saat kita menulis artikel baik di halaman postingan maupun halaman statis.

Untuk menggunakan spoiler di postingan silahkan gunakan kode berikut pada tab HTML:

<div class="spoiler-amp">
  <amp-accordion animate>
    <section>
      <h4 class='spoiler-button'>Contoh Spoiler Teks</h4> /* Judul Spoiler */
        <div class="isi">
        Masukkan teks di sini.... /* Masukkan teks, gambar, atau video */
        </div>
    </section>
  </amp-accordion>
</div>

HTML atau code diatas digunakan apabila sobat memasang satu spoiler saja.

Dan apabila sobat ingin menggunakan lebih dari satu spoiler bersusun, silahkan tambahkan expand-single-section pada bagian <amp-accordion animate>

Berikut contoh penerapannya

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

    <section>
      <h4 class='spoiler-button'>Contoh Spoiler Teks</h4>
      <div class="isi">
      Masukkan teks di sini....
      </div>
    </section>

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

Note Kode animate pada <amp-accordion> berfungsi untuk memperhalus transisi saat spoiler dibuka. Kode expand-single-section berfungsi untuk menutup spoiler yang sedang terbuka saat membuka spoiler lainnya. Silahkan Parse terlebih dahulu jika sobat ingin menyisipkan kode html dan lainnya di dalam spoiler.

Dan itulah tutorial singkat tentang bagaimana cara membuat dan memasang spoiler di blog valid amp menggunakan amp-accordion yang dapat saya bagikan kali ini.

Jika ada pertanyaan tentang spoiler di blog valid Amp ini, sobat bisa meninggalkan komentar di dibawah ini. Selamat Mencoba dan Semoga bermanfaat.