Cara Membuat Spoiler Keren pada Postingan Blog

Prodeku - Apa sih spoiler itu? Spoiler adalah cara untuk menyembunyikan text, script, gambar, ataupun video yang berfungsi untum menghemat ruang pada artikel blog. Tidak hanya itu, spoiler juga berfungsi untuk mempercepat loading blog anda.

Dalam pertemuan kita kali ini, saya akan memberikan tutorial tentang cara membuat spoiler sekaligus memperindah tampilan spoiler agar terlihat lebih menarik. Penasaran bukan? Yuk, ikuti tutorialnya dibawah ini.

Baca Juga

Tutorial Membuat Spoiler Keren

Buka akun blogger
Pilih menu Template > Edit HTML

Cari kode ]]></b:skin>. Kemudian letakkan kode ini tepat diatas kode ]]></b:skin>

#spoiler {
 text-align:center;
}
#spoiler button {
 margin:10px auto;
 cursor:pointer;
 font-family:'Open Sans',sans-serif;
 background-color:#009688;
 color:#fff;
 padding:10px 15px!important;
 text-transform:uppercase;
 border:none;
 border-radius:3px;
 opacity:0.9;
 transition:all 0.3s ease-out;
}
#spoiler button:hover, #spoiler button:focus {
 outline:none;
 opacity:1;
 color:#fff;
}
#spanel {
 padding:1px;
 text-align:left;
 background:#fafafa;
 border:1px solid #e3e3e3;
}
#spanel {
 padding:24px;
 display:none;
}
#spanel img {
 background:#f5f5f5;
 margin:10px auto;
}

Cari kode </body>. Lalu letakkan kode ini tepat diatas kode </body>

<script>
$(document).ready(function() {
    $(&quot;#spoiler&quot;).click(function() {
        $(&quot;#spanel&quot;).slideToggle(&quot;normal&quot;);
    });
});
</script>

Simpan Template.

Penerapan Spoiler pada Postingan

Untuk penerapan pada postingan blog, anda dapat menerapkannya sebagai berikut ini.

<div id="spoiler"><button>Spoiler</button></div>
<div id="spanel">
--- TAMBAHKAN KONTEN DISINI ---
</div>

Untuk demo nya seperti ini.

--- TAMBAHKAN KONTEN DISINI ---

Gimana, mudah kan? Demikian Tutorial tentang Cara Membuat Spoiler Keren pada Postingan yang dapat terapkan di blog milik anda. Terus ikuti tutorial lainnya hanya di Prodeku. Selamat mencoba...