Cara Memasang Spoiler Keren pada Postingan Blog
Apa sih fungsinya dari spoiler ini? spoiler ini tombol yang digunakan untuk memunculkan misalkan daftar isi dan isi text yang biasanya menurut si penulis itu penting atau bisa yang lainnya seperti gambar maupun video.
Cara Memasang Spoiler Keren pada Postingan Blog
Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy kode CSS dibawah ini dan patekan tepat diatas kode ]]><b:skin> atau </style>
.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}
Kemudian memasang kode JQuery copy kode dibawah ini dan pastekan tepat diatas kode </body> atau </body>
<script>
$(function(){
$(".flippy").on("click", function(){
$(this).parent().children(".flippanel").slideToggle("normal");
});
});
</script>
Simpan tema sobat kemudian memasang pada postingan sobat., copy kode dibawah ini dan pastekan didalam postingan artikel sobat.
<div class="centerflip"><button class="flippy">SPOILER</button>
<div class="flippanel">
---ISI DARI SPOILER DISINI---
</div>
</div>
Jika sudah klik pulikasikan coba lihat hasilnya sobat.