Cara Membuat Spoiler valid AMP

Penggunaan spoiler sangat penting untuk blog, khususnya untuk menjaga penampilan dan loading blog. Maka sudah sepantasnya, jika sahabat memasang dan melengkapi blog sahabat dengan spoiler, terlebih untuk menyembunyikan gambar atau kode tertentu tanpa menambah beban loading dan tampilan yang tetap menawan.

Sebagaimana diketahui bahwa spoiler adalah sebuah metode menyembunyikan dan memunculkan gambar atau kode dalam sebuah blog. Demikian juga, akhir-akhir ini blog yang berbasis AMP (Accelerated Mobile Pages) kian hari kian marak. Maka sudah sepantasnya, website pun harus mengikuti perkembangannya agar tidak tergerus derasnya peningkatan kwalitas. Mengingat #Google sendiri telah memberikan ultimatum agar beralih ke AMP supaya mendapatkan loading yang super fast.

Jika Ngonline06 sebelumnya telah membagi tentang cara membuat spoiler yang baik pada postingan [Lihat: Cara Membuat Spoiler (Buka/Tutup) pada Postingan], maka kali ini Ngonline06 akan berbagi cara membuat spoiler valid AMP agar supaya sahabat bisa mengikutinya dengan baik dan benar.

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

DEMO

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 tipscodeshare.blogspot.com.

#1 Memasang Kode amp-accordian

Untuk membuat spoiler, sahabat Ngonline06 harus memasang kode amp-accordian pada template sahabat. Silahkan sahabat menuju dashboard blog. Pilih Template > edit HTML. Masukkan kode berikut ini bersama kode-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.

Tutorial ini milik tipscodeshare.blogspot.com. Namun jika sahabat Ngonline06 ingin mempelajari lebih jauh terkhusus penggunaan amp-accordian, silahkan lihat https://www.ampproject.org/docs/reference/components/amp-accordion