Membuat Spoiler valid AMP (Accelerated Mobile Pages)

Sebagaimana diketahui bahwa spoiler adalah sebuah metode menyembunyikan dan memunculkan gambar atau kode dalam sebuah blog. Oleh karenanya template atau website yang berbasiskan AMP pun memiliki teknik tersendiri dalam membuat spoiler. Hal ini tidak Metode pembuatan spoiler pun tidak seperti biasanya dengan membuat munculan berupa style [silahkan baca: Membuat Spoiler di Postingan]. Tutorial tersebut tentu tidak valid AMP. Maka agar spoiler valid AMP, sahabat harus mengetahui caranya dengan baik dan benar.

Agar tidak penasaran bagaimana penampakan dan bentuk Spoiler valid AMP, sahabat bisa melihat demonya di bawah ini:

Silahkan Diklik

Ini lho namanya spoiler... Bisa dibuka dan ditutup...

Diklik Lagi

Cara Membuat Spoiler valid AMP

Setidaknya ada tiga langkah yang sahabat perlu ketahui untuk membuat spoiler valid AMP (Accelerated Mobile Pages), yaitu memasang kode amp-accordian, membuat CSS, dan cara memposting. Tutorial ini adalah milik mas Ervan, pemilik tipscodeshare.blogspot.com.

#1 Memasang Kode amp-accordian

Untuk membuat spoiler, sahabat harus memasang kode amp-accordian pada template sahabat. Silahkan sahabat menuju dashboard blog. Pilih Template > edit HTML. Masukkan kode berikut ini bersama kode amp lainnya.

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

#2 Membuat CSS

Setelah langkah pertama telah dilakukan, sekarang tinggal membuat CSS untuk spoiler tersebut. Kode CSS ini hanya contoh. Sahabat bisa memodifikasi sendiri, baik bentuk ataupun warnanya.

.spoiler-post h4{color:#333;background: none;border: none;margin: 0 auto;text-align: center;border-bottom: 2px solid#f87980;}

.spoiler-post h4 span{border-radius:32% 32% 0 0;text-transform:uppercase;padding:5px;margin:0;background:#f0f0f0;}

.spoiler-box{background:#f1f1f1;font-weight:400;font-size:15px;margin:0 auto;padding:10px;text-align:left;color:#333;border:none;box-shadow:0 1px 3px #999,0 1px 2px #999;clear:both;}

#3 Cara Memposting Spoiler valid AMP

Jika dua langkah di atas telah dilakukan dengan baik, maka sekarang sahabat tinggal memasang spoiler pada postingan. Untuk memasanngya, sahabat bisa memerhatikan kode berikut ini. [INGAT, kode ini ditulis di html, bukan compose]

 <div class='spoiler-post'><amp-accordion><section>

<h4><span class='spoiler-show spoiler-hide'>Judul Spoiler</span></h4>

<span class='spoiler-box'>

Isi SPOILER disini...

</span>

</section></amp-accordion></div>

Tralala, sekarang spoiler di blog sahabat telah jadi dan kerennya lagi valid AMP. Selamat mencoba ya. Semoga sukses selalu. Jika ada kesulitan, silahkan dicoret-coret saja kotak komentar di bawah ini.