Cara Membuat Spoiler Valid AMP HTML Blogger
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
<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>
.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}
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.