Cara Membuat Spoiler Keren di Blog Valid AMP Ringan

Cara Membuat Spoiler Keren di Blog Valid AMP Ringan - Spoiler sekarang menjadi komponen shortcode yang wajib ada pada template blogger, komponen ini sangat berguna bila pemilik blog ingin menyimpan kalimat yang dapat di show dan di hide. Kaskus merupakan salah satu contoh website sosial media yang menyediakan fitur spoiler dalam pembuatan thread.

Kali ini saya akan membuat spoiler yang keren dan valid amp maupun non amp serta tidak akan memberatkan blog, kenapa saya katakan tidak memberatkan blog ? karena spoiler yang akan kita buat ini tidak akan menggunakan script amp-accordion sebagai show hide seperti pada kebanyakan spoiler yang valid amp, kita hanya memanfaatkan fitur sedarhana yang sudah ada pada html, yaitu fitur [checked]. Spoiler seperti ini sudah saya terapkan di template terbaru saya, yaitu Alpha AMP Template. Berikut contoh spoiler yang saya maksud.

Cara Membuat Spoiler Valid AMP Dengan Label + Input Tanpa Js amp-accordion

Simpan CSS dibawah ini pada custom-style blog anda.

.spoiler input[type=checkbox]:checked~label:before,.spoiler input[type=checkbox]~label:before{content:"";height:0;width:0;border-style:solid;left:8px;position:absolute}
.spoiler .spoiler_title{display:inline;float:left;margin:3px 10px 0 0;padding:4px 0;font-size:16px;line-height:1}
.spoiler label{cursor:pointer;background:#84cfb6;margin:0;padding:4px 18px 4px 22px;outline:0;border-radius:3px;color:#fff;transition:all .3s ease-in-out;display:inline;font-size:12px;font-family:arial,san-serif;line-height:1;position:relative}
.spoiler input[type=checkbox]~label:before{border-width:4px 4px 4px 7px;border-color:transparent transparent transparent #fff;top:7px}
.spoiler input[type=checkbox]:checked~label:before{border-width:7px 4px 4px;border-color:#fff transparent transparent;top:8px}
.spoiler input{position:absolute;left:-999em;opacity:0}
.spoiler .content_box{width:100%;border:1px solid #ddd;background:#edf8f4;height:auto;padding:6px 10px;margin:8px 0 0;overflow:hidden;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.spoiler .content_box .content{display:none}
.spoiler .content p{padding:0;margin:0}
.spoiler .content p img{margin:4px 0 0;max-width:100%;height:auto}
.spoiler input[type=checkbox]:checked~.content_box .content{display:block;-webkit-animation:slide-down .3s ease-out;-moz-animation:slide-down .3s ease-out}
@-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-100%)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes slide-down{0%{opacity:0;-moz-transform:translateY(-100%)}
100%{opacity:1;-moz-transform:translateY(0)}
}

Kemudian untuk menampilkan spoiler di postingan (HTML Mode), silahkan gunakan kode HTML dibawah ini.

<div class="spoiler">
<span class="spoiler_title">Spoiler: </span>
  <input id="item-1" type="checkbox" />
    <label for="item-1">Hint</label>
    <br />
<div class="content_box">
<div class="content">
Simpan teks disini... 
</div>
</div>
</div>

Spoiler seperti ini sangat efisien untuk digunakan, karena spoiler jenis ini tidak akan memberatkan blog. Sekian pembahasan saya mengenai Cara Membuat Spoiler di Blog Valid AMP Ringan, tunggu tutorial bermanfaat seputar blogger lainya, selamat mencoba ^_^.