Cara Membuat Spoiler Valid AMP HTML Blogger

Hal ini tidak sama misalnya halnya Metode pembuatan spoiler di blog biasa dengan membentuk munculan berupa style. Cara tadi tentu nir valid AMP. Maka supaya spoiler valid AMP, anda wajib mengetahui caranya dengan baik dan benar. Nah, maka menurut itu dalam kesempatan kali ini saya akan menaruh ulasan bagaimana menciptakan spoiler buka tutup buat blog amp blogger. Untuk demo nya bisa anda lihat dibawah ini.

Jika anda ingin membangun nya, pribadi 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:"\0002B";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:"\02013"} .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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpyVgf93MSPRDNbIHTJR03ExIBz8gjRyQ6oUcL_bgw8jUittHCWO4QazMYMM0btCV2ZcO9sJCTfZbgZXAuP187lNJhDyUEtDUL9WnglPHVO29u2T7nEWaD7oqp7S7BZ-S0NJMieVgFTxya/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.