Cara Membuat Spoiler Pada Blog ~ Kang Vanno

Spoiler | Kali ini saya akan membagikan cara membuat spoiler yang bertujuan untuk menyembunyikan konten / gambar. Sebenarnya banyak sekali tutorial mengenai cara pembuatan spoiler ini tetapi setelah saya modifikasi ternyata cukup mudah, saya hanya menambahkan efek naik keatas ( slide up ) sama turun kebawah ( slide down ).

Proses pemasangan ini cukup mudah dan mudah sekali di modifikasi.

Berikut Tutorialnya

Langkah 1 : Simpan kode di bawah ini tepat di atas kode </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Lewati langkah ini jika blog sobat sudah terdapat jquery seperti diatas.

Langkah 2 : Tambahkan CSS diatas ]]></b:skin> / </style>

.buka-tutup {
text-align:center;
cursor:pointer;
}

#tkp {
margin-top:15px;
padding:5px;
}

Langkah 3 : Simpan code JavaScript dibawah ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$('.buka-tutup').toggle(function() {
    $(this).text('Tutup Box Spoiler!');
    $('#tkp').slideDown(800);
}, function() {
    $(this).text('Buka Lagi Box Spoier-nya!');
    $('#tkp').slideUp(100);
});
//]]>  
</script>

Penulisan Pada HTML

Pemasangan kode HTML pada area posting / area blog sesiuai yang di inginkan!

<button class="buka-tutup">Buka Box Spoiler!</button>
<div id="tkp" style="display:none;">Ini adalah Content yang di hasilkan dari tombol yang sudah sobat klik! :)</div>

Demo:

source : Kang Rian