Cara Membuat Spoiler Di Blog AMP HTML

Cara Membuat Spoiler Di Blog AMP HTML Sebagaimana diketahui bahwa spoiler adalah sebuah metode menyembunyikan dan memunculkan gambar atau kode dalam sebuah blog. Atau lebih jelasnya berfungsi untuk meringkas atau memperpendek sebuah konten, sehingga mempercepat loading blog maupun membuat postingan blog lebih rapi.

Oleh karenanya template blog atau website yang berbasiskan AMP pun memiliki teknik tersendiri dalam membuat spoiler. Namun untuk AMP HTML masih memiliki satu kekurangan yaitu amp-img tidak tampil di spoiler kecuali spoilernya terbuka terlebih dahulu. Artinya amp-img tidak bisa disimpan di dalam div yang memiliki style display: none; kecuali dengan menggunakan amp-accordion.

Untuk itu memodifikasi amp-accordion menjadi spoiler untuk blog AMP HTML sehingga lebih aman digunakan dapat menampilkan gambar di dalam spoiler.

Supaya sobattidak penasaran bagaimana penampakan dan bentuk Spoiler valid AMP, sobat bisa melihat demonya di bawah ini:

Coba Klik

spoiler adalah sebuah metode menyembunyikan dan memunculkan gambar atau kode dalam sebuah blog. Oleh karenanya template atau website yang berbasiskan AMP pun memiliki teknik tersendiri dalam membuat spoiler.

Klik lagi

One of the tips to remind the likes copay (copy and paste) the article is to install the source link otmatis wherein when the repairman Copas mengcopas article or the context of some or all of our blog articles then automatically copy of its results that there is a link source.

Sekali lagi

<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> 

jika sobat ingin mencoba spoiler ini di blog AMP HTML, silahkan sobat cari kode di bawah ini di tamplate sobat

<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'> <style amp-custom='amp-custom'> 
/*<![CDATA[*/

Dan

<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'> <style amp-custom='amp-custom'> 
/*<![CDATA[*/

Kemudian pada masing-masing kode diatas silahkan sobat tambahkan CSS dibawah ini:

.spoiler-post h4{color:#333;background: none;border: none;margin: 0 auto;text-align: center;border-bottom: 2px solid#f87980;} .spoiler-post h4 span{border-radius:32% 32% 0 0;text-transform:uppercase;padding:5px;margin:0;background:#f0f0f0;} .spoiler-box{background:#f1f1f1;font-weight:400;font-size:15px;margin:0 auto;padding:10px;text-align:left;color:#333;border:none;box-shadow:0 1px 3px #999,0 1px 2px #999;clear:both;}

Sekarang sobat tinggal memasang spoiler pada postingan. Untuk memasanngya, sobat bisa memerhatikan kode berikut ini. Tapi INGAT, kode ini ditulis di html, bukan Compose

<div class='spoiler-post'><amp-accordion><section> <h4><span class='spoiler-show spoiler-hide'>Judul Spoiler</span></h4> <span class='spoiler-box'> Isi konten atau gambar disini... </span> </section></amp-accordion></div>

Jika ingin menyimpan kode di dalam spoiler. silahkan gunakan kode HTML di bawah ini

<div class='spoiler-post'><amp-accordion><section> <h4><span class='spoiler-show spoiler-hide'>Judul Spoiler</span></h4> <span class='spoiler-box'> Isi Kode yang sudah di parse disini... </span> </section></amp-accordion></div>

Sekarang spoiler di blog sobat telah jadi dan Selamat mencoba Semoga sukses selalu.