Membuat Spoiler valid AMP (Accelerated Mobile Pages)

Agar tidak bertanya-tanya bagaimana penampakan

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>

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.