Cara Membuat Kotak Spoiler Keren Terbaru

Kotak Spoiler Keren dengan sistem buka tutup ini akan terlihat lebih keren loh sobat,karena menggunakan fungsi slideToggle. Selain itu juga pada tombol buka tutup spoiler dilengkapi dengan background yang bisa Anda edit pada CSS sesuai dengan keinginan.

Kotak Spoiler diposting ini memiliki fungsi agar artikel sobat tidak terlihat panjang, simple dan rapi. Dengan membuat tampilan konten Anda terlihat rapih, maka pengunjung akan semakin betah dan nyaman membaca postingan-postingan menarik milik Anda. Ada tiga langkah yang perlu dilakukan untuk memasang spoiler di Blog sobat, berikut panduannya ...

Langkah Memasang Kotak Spoiler

1. Login keakun Blogger
2. Selanjutnya pilih Template >> klik edit HTML
3. Langkah selanjutnya, Anda cari kode ]]></b:skin> , lalu Anda copy kode di bawah ini dan pastekan di atasnya.

/*---spoiler---*/
#flippy {
    text-align: center;
}
#flippy button {
    background: #27ae60;
    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 #27ae60;
    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: #2BD673;
    outline: none;
}
#flippanel {
    padding: 1px;
    text-align: left;
    background: #f5f5f5;
    border: 0px;
}
#flippanel {
    padding: 24px;
    display: none;
}

4. Langkah selanjutnya, Anda cari kode </body>, kemudian Anda copy kode di bawah ini dan pastekan di atasnya.

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

5.  Setelah selesai! Anda simpan template.

6. Langkah berikutnya, Anda ke entri baru, lalu ke mode HTML dan copy kode di bawah ini :

<div id="flippy">
<button>Fitur :</button></div>
<div id="flippanel">

//Isikan konten Anda disini

</div>

Note : Tulisan yang saya beri warna merah isikan dengan teks Anda.

7. Lalu Anda Publikasikan postingan untuk bisa melihat hasilnya.

Terkait : Cara Membuat Kotak Spoiler Buka Tutup diPostingan V.2

Demikian saya sampaikan tutorial membuat kotak spoiler, terima kasih atas waktunya dan semoga bermanfaat.

Share this post