Cara Membuat Spoiler Valid AMP HTML Blogger

Abdi Jan 31, 2019 Jan 31, 2019 3 min read

Cara Membuat Tombol Spoiler Valid AMP HTML Blogger – Widget atau tombol Spoiler adalah sebuah metode untuk menyembunyikan dan memunculkan gambar maupun kode didalam sebuah artikel blog. Tombol spoiler ini biasanya dipakai oleh beberapa blogger yang suka menulis dengan artikel panjang atau artikel mendetail. Jadi widget ini berfungsi agar halaman tidak terlihat penuh dan akan mudah dipahami oleh pembaca. Oleh karena itu template atau website yang berbasiskan AMP pun memiliki cara tersendiri dalam membuat spoiler.

Hal ini tidak sama seperti halnya Metode pembuatan spoiler di blog biasa dengan membuat munculan berupa style. Cara tersebut tentu tidak valid AMP. Maka agar spoiler valid AMP, anda harus mengetahui caranya dengan baik dan benar. Nah, maka dari itu pada kesempatan kali ini saya akan membagikan ulasan bagaimana membuat spoiler buka tutup untuk blog amp blogger. Untuk demo nya bisa anda lihat dibawah ini.

Jika anda ingin membuat nya, langsung saja simak cara Cara Membuat Spoiler Valid AMP HTML Blogger Dibawah ini

Baca Juga : Cara Membuat TOC Table Of Content Di Blog AMP

Cara Pasang Spoiler Di Blog Valid AMP HTML

Langkah Pertama, silahkan tambahkan kode script amp-accordion di bawah ini pada template blog di atas code </head>.


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

Kemudian selanjutnya tambahkan kode CSS dibawah ini tepat di bawah code <style amp-custom> tampilan postingan Mobile dan PC.


.spoiler-amp{margin:10px 0} 
.spoiler-amp h4.spoiler-button{color:#444;font-size:14px;font-weight:bold;outline:none;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:"002B";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:"2013"} 
.spoiler-amp amp-accordion div.isi{height:auto;margin:20px 10px;padding:0 0 0 20px;border-left:3px dotted #f0f0f0}

Kemudian klik simpan Template.

Dan untuk menerapkannya di dalam postingan artikel, masuk pada mode HTML (bukan Compose) dan tempelkan kode berikut dibawah ini antara 3 style yaitu kode, gambar, dan video bisa anda sesuaikan sendiri.

Spoiler Kode


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

Spoiler Text / Video


<div class="spoiler-amp"> 
<amp-accordion animate> 
<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>

Spoiler Image


<div class="spoiler-amp">
<amp-accordion animate> <section> <h4 class='spoiler-button'>
Img</h4>
/* Spoiler Image Amp */ <div class="isi">
<amp-img alt="membuat spoiler valid amp" height="610" layout="responsive" src="https://4.bp.blogspot.com/-8NzrifTgwW0/XFpxg1s4BMI/AAAAAAAAPhk/HWQ7xc1E1so3P_VfbM3S4bKqXqr9C9YEgCLcBGAs/s1600/spoiler_amp.png" width="1080"></amp-img></div>
</section> </amp-accordion> </div>

Mungkin hanya itu saja untuk artikel kali ini tentang Cara Membuat Spoiler Valid AMP HTML Blogger. Semoga bermanfaat.