Cara Menciptakan Kotak Spoiler Keren Terbaru

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

Kotak Spoiler diposting ini mempunyai fungsi biar artikel sahabat tidak terlihat panjang, simple dan rapi. Dengan menciptakan 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> , kemudian Anda copy aba-aba 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 aba-aba </body>, kemudian Anda copy aba-aba 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, kemudian ke mode HTML dan copy aba-aba 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 dapat melihat hasilnya.

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

Demikian saya sampaikan tutorial menciptakan kotak spoiler, terima kasih atas waktunya dan semoga bermanfaat.
Sumber http://www.websiteedukasi.com/