Membuat Spoiler Untuk Blog AMP HTML Dengan AMP-Accordion

Sebelumnnya saya sudah posting tentang cara Mengatur Gambar Postingan Blog AMP HTML Agar Lebih Rapih. Dan pada kesempatan kali ini saya masih membahas seputar AMP HTML, yaitu Cara Membuat Spoiler Untuk Blog AMP HTML Dengan AMP-Accordion.

Tombol spoiler atau sering di sebut tombol buka tutup ini mempunyai banyak fungsi, yaitu kita bisa menyimpan gambar atau kode di dalam tombol spoiler tersebut. Spoiler biasanya banyak di gunakan pada blog yang membahas tentang tutorial atau artikel yang mempunyai banyak gambar, sehingga spoiler ini bisa menghemat ruangan posting. Dan yang paling banyak di sukai karena bisa membuat loading blog menjadi lebih ringan, karena gambar tidak langsung di tampilkan sebelum spoiler tersebut di klik atau di buka.

Jika anda penasaran dengan 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

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 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 kode 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 kode di dalam spoiler. silahkan gunakan kode HTML di bawah ini.


<div class="spoiler-amp">
<span class="spoiler_title">Spoiler: </span>
<amp-accordion>
<section>
    <h4>Hint</h4>
<div><pre><code>
Simpan kode 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.

Nah, mungkin cuma itu saja yang bisa saya bagikan tentang Membuat Spoiler Untuk Blog AMP HTML Dengan AMP-Accordion semoga bermanfaat.
Source: http://www.kompiajaib.com/2017/01/modifikasi-amp-accordion-menjadi.html

Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser