Memasang Spoiler di Postingan pada Blogger

Halo gaes pada kesempatan kali ini saya akan share pada kamu semua Memasang Spoiler di Postingan Blog, bagaimana caranya simak langsung aja berikut ini. 

Berikut cara penerapannya :

Pertama, buka blogger > Template > Edit HTML > Terapkan kode CSS di bawah ini sebelum </style> atau ]]></b:skin> dan untuk kode jQuery terapkan sebelum </body>

.centerflip{text-align:center}
.flippy{text-align:center}
button.flippy{background:#aa65c7;color:#fff;text-align:center;margin:0 auto;border:none;border-radius:3px;padding:8px 16px;margin:10px auto;font-size:14px;font-weight:bold;box-shadow:0 3px 0 0 #883da7;vertical-align:middle;cursor:pointer;text-shadow:0 1px rgba(0,0,0,0.3);transition:background 0.1s ease-in-out}
.flippy button:hover,.flippy button:focus{background:#9e4fbf;outline:none}
.flippanel{padding:1px;text-align:left;background:#f5f5f5;border:0}
.flippanel{padding:24px;display:none}

<script>
//<![CDATA[
$(function(){$(".flippy").on("click",function(){$(this).parent().children(".flippanel").slideToggle("normal")})});
//]]>
</script>

Kemudian terapkan kode di bawah ini di postingan tab HTML

<div class="centerflip"><button class="flippy">Cekidot</button>
<div class="flippanel">
---ISI KONTEN ANDA TERAPKAN DISINI---
</div>
</div>

Contoh penerapan bisa dilihat disini:

• Result

Demikian untuk tips kali ini, semoga bermanfaat dan wassalam.

Share :