Memasang Spoiler di Postingan Blogger

Spoiler di dalam postingan berfungsi kurang lebih untuk menghemat space di dalam artikel, dan yang lebih penting adalah Blog akan ter-loading lebih cepat, karena beberapa item yang berat seperti Gambar tidak akan muncul secara langsung di halaman Artikel sebelum Tombol Spoiler diklik oleh pengunjung.

Contoh Penerapan Spoiler di Postingan Blogger seperti di bawah ini

Judul Spoiler:

Memasang Spoiler di Postingan Blogger
Memasang Spoiler di Postingan Blogger
Memasang Spoiler di Postingan Blogger

Ini caranya Memasang Spoiler di Postingan Blogger :

1) Masuk ke Dasboar >> Template >> Edit HTML
2) Copy dan tempelkan Kode jQuery di bawah ini sebelum Kode </body>

<script>
$(document).ready(function() {
$("#flippy").click(function() {
$("#flippanel").slideToggle("normal");
});
});
</script>

3) Copy dan tempelkan Kode CSS di bawah ini tepat di atas Kode ]]></b:skin>

#flippy {
text-align: center;
}

#flippy button {
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: 0px 3px 0px 0px #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: 0px;
}

#flippanel {
padding: 24px;
display: none;
}

4) Untuk penerapan di Postingan Blog, Gunakan Mode HTML, lalu terapkan Kode seperti di bawah ini :

<div id="flippy"><button>Spoiler</button></div>
<div id="flippanel">
---ISI KONTEN ANDA DISINI---
</div>

Sekian info Tutorial Memasang Spoiler di Postingan Blogger, terima kasih.

Search Post

Label :