Membuat Tombol Spoiler Untuk Blog Valid Amp Html

Pada waktu yang kemudian saya telah pernah membuat artikel serupa, ialah Cara Membuat Spoiler Dalam Postingan Blog. Dan pada kesempatan kali ini saya akan membuat postingan Cara Membuat Tombol Spoiler Untuk Blog Valid AMP HTML.

Tombol spoiler atau sering di sebut tombol buka tutup ini memiliki banyak fungsi, utamanya mampu menyembunyikan file, gambar dan mampu juga dengan script. Dan yang penting lagi bisa memperhemat ruangan posting, alasannya adalah di simpan dalam spoiler.

Tombol Spoiler Untuk AMP HTML ini ialah penyesuaian dari AMP-Accordion. Jika Anda penasaran dengan demonya, silahakan lihat demonya dibawah ini.

Spoiler:

Hint

 

Spoiler:


   

Hint



Simpan konten atau gambar (amp-img) di sini ....



 


Spoiler:

Hint

Contoh gambar di dalam spoiler.

Spoiler:

Hint

Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known, muse about!

Nah, jika Anda ingin mencoba spoiler ini pada blog AMP HTML Anda, silahkan simpan CSS di bawah ini di CSS custom-style blog Anda.

 .spoiler-amp amp-accordion h4width:62px;background:#26272a;padding:5px 0 5px 22px;outline:0;border-radius:3px;color:#efefef;font-size:12px;font-family:arial,san-serif;line-height:1;font-weight:400;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box
.spoiler-amp section:not([expanded]) h4:before,.spoiler-amp section[expanded] h4:beforeheight:0;width:0;border-style:solid;position:absolute;left:8px;content:""
.spoiler-amp .spoiler_titledisplay:inline;float:left;margin:0 10px 0 0;padding:4px 0;font-size:16px;line-height:1
.spoiler-amp section:not([expanded]) h4:beforeborder-width:4px 4px 4px 7px;border-color:transparent transparent transparent #fff;top:7px
.spoiler-amp section[expanded] h4:beforeborder-width:7px 4px 4px;border-color:#fff transparent transparent;top:8px
.spoiler-amp amp-accordion divwidth:100%;border:1px solid #ddd;background:#efefef;height:auto;padding:6px 10px;margin:8px 0 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden
.spoiler-amp amp-accordion div p,.spoiler-amp amp-accordion div premargin:0;padding:0;-webkit-animation:slide-down .3s ease-out;-moz-animation:slide-down .3s ease-out
.spoiler-amp amp-accordion div prebackground:none;color:#111;padding:4px 0;overflow:auto;max-width:100%;text-align:left;margin:0 auto;border-left:0
.spoiler-amp amp-accordion div pre codecolor:#111
.spoiler-amp amp-accordion div p amp-imgmargin:4px 0
.spoiler-amp amp-accordion section:not([expanded]):aftercontent:"";display:block;background:#efefef;padding:6px;border:1px solid #ddd;margin:8px 0 0
@-webkit-keyframes slide-down0%opacity:0;-webkit-transform:translateY(-100%)
100%opacity:1;-webkit-transform:translateY(0)

@-moz-keyframes slide-down0%opacity:0;-moz-transform:translateY(-100%)
100%opacity:1;-moz-transform:translateY(0)

Kemudian untuk menampilkan spoiler di postingan (dalam mode HTML), silahkan gunakan aba-aba HTML di bawah ini.

 

Spoiler:


   

Hint



Simpan konten atau gambar (amp-img) di sini ....



 


Jika ingin menyimpan arahan di dalam spoiler. Silahkan gunakan arahan HTML dibawah ini.

 

Spoiler:


   

Hint



Simpan kode yang sudah di-parse di sini.....

 


Dan pastikan Anda sudah memasang js amp-accordion untuk halaman postingan blog Anda.
Baca juga: Merapihkan Gambar Postingan Pada Blog AMP HTML.

Tinggalkan komentar