script yang pada intinya saja yang akan saya share di sini, setelah itu bisa sobat bisa kreasikan sendiri ..Demo Spoiler
Untuk Demo-nya silahkan sobat lihat & praktekan langsung di : JSFiddle.netPemasangan
Untuk pemasangan pastikan sobat sebelumnya sudah menyimpan 1 jQuery Library, jika belum silahkan simpan kode jQuery libray di bawah ini sebelum kode</head> : <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>Pemasangan jQuery pada template cukup 1 saja. Apabila ada beberapa versi jQuery library, maka efek-efek tidak akan berjalan.
Lanjut ke Langkah Pertama : Simpan kode CSS di bawah ini sebelum kode
</head> <style type='text/css'>
/* ----------------
CSS SPOILER BASIC
------------------ */
.buka-tutup {
text-align:center;
cursor:pointer;
}
#tkp {
margin-top:15px;
padding:5px;
}
</style>Langkah Kedua : Simpan kode JavaScript dibawah ini sebelum tag
</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>
Perhatikan Angka 800 dan 100 pada kode di atas, itu adalah value/nilai untuk menentukan kecepatan saat box terbuka dan tertutup.
Penulisan Pada HTML
Terakhir : Pemasangan kode HTML pada area posting / widget sesuai dengan 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>
Semoga postingan Cara Membuat Spoiler di Blog ini bermanfaat untuk sobat yang membutuhkan.
Komentar Terbaru