Modifikasi Amp-Accordion Menjadi Spoiler Blog Amp Html
Sebenarnya kemarin kita sudah menciptakan spoiler css-only with label and input yang sanggup dipakai di HTML5 dan AMP HTML, namun sayang untuk AMP HTML masih mempunyai 1 kekurangan adalah amp-img tidak tampil di spoiler kecuali spoilernya terbuka terlebih dahulu. Artinya amp-img tidak sanggup disimpan di dalam div yang mempunyai style display: none; kecuali dengan memakai amp-accordion.Untuk itu, kali ini kita akan memodifikasi amp-accordion menjadi spoiler untuk blog AMP HTML sehingga lebih kondusif dipakai (dapat menampilkan gambar di dalam spoiler).
Untuk live demonya silahkan coba spoiler di bawah ini.
Spoiler:
Hint
<div class="spoiler-amp">
<span class="spoiler_title">Spoiler: </span>
<amp-accordion>
<section>
<h4>Hint</h4>
<div><p>
Simpan konten atau gambar (amp-img) di sini ....
</p></div>
</section>
</amp-accordion>
</div>
Spoiler:
Hint
KOMPOR AJAIB - 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!
KOMPOR AJAIB -
KOMPOR AJAIB -
Spoiler:
Hint
KOMPOR AJAIB - 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 jikalau ingin mencoba spoiler ini di blog AMP HTML Anda, silahkan simpan CSS di bawah ini di CSS custom-style blog Anda.
.spoiler-amp amp-accordion h4{width: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:before{height:0;width:0;border-style:solid;position:absolute;left:8px;content:""}
.spoiler-amp .spoiler_title{display:inline;float:left;margin:0 10px 0 0;padding:4px 0;font-size:16px;line-height:1}
.spoiler-amp section:not([expanded]) h4:before{border-width:4px 4px 4px 7px;border-color:transparent transparent transparent #fff;top:7px}
.spoiler-amp section[expanded] h4:before{border-width:7px 4px 4px;border-color:#fff transparent transparent;top:8px}
.spoiler-amp amp-accordion div{width: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 pre{margin:0;padding:0;-webkit-animation:slide-down .3s ease-out;-moz-animation:slide-down .3s ease-out}
.spoiler-amp amp-accordion div pre{background: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 code{color:#111}
.spoiler-amp amp-accordion div p amp-img{margin:4px 0}
.spoiler-amp amp-accordion section:not([expanded]):after{content:"";display:block;background:#efefef;padding:6px;border:1px solid #ddd;margin:8px 0 0}
@-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 (dalam mode HTML), silahkan gunakan arahan HTML di bawah ini.
<div class="spoiler-amp">
<span class="spoiler_title">Spoiler: </span>
<amp-accordion>
<section>
<h4>Hint</h4>
<div><p>
Simpan konten atau gambar (amp-img) di sini ....
</p></div>
</section>
</amp-accordion>
</div>
Jika ingin menyimpan arahan di dalam spoiler. silahkan gunakan arahan HTML di bawah ini.
<div class="spoiler-amp">
<span class="spoiler_title">Spoiler: </span>
<amp-accordion>
<section>
<h4>Hint</h4>
<div><pre><code>
Simpan arahan yang sudah di-parse di sini.....
</code></pre></div>
</section>
</amp-accordion>
</div>
Dan pastikan Anda sudah memasang js amp-accordion untuk halaman postingan blog Anda.
Sumber https://www.kompiajaib.com/
0 Response to "Modifikasi Amp-Accordion Menjadi Spoiler Blog Amp Html"
Posting Komentar