Membuat Spoiler di Blogger Valid AMP

Unknown, 12 November 2016

TIPS CODE SHARE - Spoiler di blogger berfungsi untuk meringkas atau memperpendek sebuah konten. Sehingga dapat mempercepat loading blogger maupun menjadikan tampilan yang rapi.

Lalu bagaimana Spoiler dipasang untuk pengguna AMP pada blogspot ? bisa kok... Sobat dapat menggunakan fungsi amp-accordion sob !

Tidak percaya ? mari kita gunakan tools cek valid amp untuk mengecek ke-valid an amp sebuah spoiler berikut ini.

Judul Spoiler

Kontennya disini....

Berikut ini cara pemasangan Spoiler di Blogger Valid AMP

Silahkan sobat pergi ke Edit Html template blog. Setelah itu masukan kode bawah ini letakan tepat diatas </head>.
<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>

Sekarang masukan kode CSS bawah ini letakan tepat diatas </style>.

.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;}

Jika semua sudah dimasukan pada Edit HTML, silahkan kalian pilih Simpan.

Cara Penggunaan :

Untuk penggunaan dipasang saat membuat post dalam mode HTMLbukan ~~COMPOSE~~. Berikut ini kodenya, silahkan ganti judul spoiler dan kontennya.

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

Demikian lah postingan kali ini sobat, jika sobat masih bingung silahkan bertanya dikomentar sob.