Membuat Spoiler Sederhana dengan jQuery
Spoiler ini memiliki satu kelebihan penting, yaitu hanya menggunakan satu elemen tunggal. Itu artinya bahwa proses instalasi menjadi jauh lebih mudah. Elemen tombol pembuka/penutup spoiler tidak perlu kita sertakan di sini karena jQuery akan menyisipkan tombol tersebut secara otomatis pada masing-masing elemen target:
Pertama-tama pastikan dulu bahwa tema Anda sudah dilengkapi dengan jQuery » baca di siniSetelah itu salin kode ini, kemudian letakkan tepat di atas kode </head>:
<script>
//<![CDATA[
$(function() {
$('blockquote.spoiler').hide(1000).before('<button class="sp-trigger">Lihat Konten</button>');
$('button.sp-trigger').toggle(function() {
$(this).addClass('sp-active').text('Tutup').next().slideDown(1000);
}, function() {
$(this).removeClass('sp-active').text('Lihat Konten').next().slideUp(1000);
});
});
//]]>
</script>Salin kode CSS ini dan letakkan di atas kode ]]></b:skin> atau </style>:
/*
Spoiler sederhana dengan jQuery
*/
blockquote.spoiler {
font:normal normal 11px/16px Verdana,Arial,Sans-Serif;
color:#666;
border:2px dashed #cec2c2;
background-color:#eee2e2;
padding:18px 20px;
-webkit-box-shadow:inset 0px 0px 7px #222;
-moz-box-shadow:inset 0px 0px 7px #222;
box-shadow:inset 0px 0px 7px #222;
margin:0px 30px 15px;
/*
overflow:auto;
height:250px;
(opsional) */
}
button.sp-trigger {
display:block;
outline:none;
cursor:pointer;
margin:20px 0px 10px 30px;
border:none;
background-color:green;
font:bold 11px Verdana,Arial,Sans-Serif;
color:white;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
padding:5px 10px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
}
button.sp-trigger.sp-active {background-color:#981515}Klik Simpan Tema. Sekarang masuklah ke editor posting.
Untuk membuat spoiler, Anda cukup menambahkan elemen <blockquote> dengan atribut berupa class="spoiler":
<blockquote class="spoiler">
Konten di sini...
</blockquote>Sudah Kenal dengan Fungsi-Fungsi Ini?
Cobalah untuk memodifikasi spoiler ini dengan cara memahami beberapa fungsi di bawah :)
24 Comments:
ma'f mas
punya saya tombolnya kok gak ada, spoilernya langsung terbuka sendiri
mohon penjelasanya
@Kholiz Apra: JQuery-nya sudah dipasang belum? ⇒ Pertama-tama pastikan dulu bahwa template Anda sudah dilengkapi dengan JQuery
@Kholiz Apra: Blognya yang http://kholiz-apra.blogspot.com kan? Di situ sudah ada s3slider (Slideshow di sebelah atas posting), itu tandanya JQuery sudah terpasang sejak pertama kali masnya mengupload template itu. Seharusnya sih spoilerny sudah jadi tanpa harus menambahkan JQuery.
trus gimana ya cara mengatasinya
@Kholiz Apra: Kalau sudah mengikuti caranya dengan benar harusnya jadi. Kalau Saya gagal, biasanya Saya akan coba melepas semua editan lalu mengulang dari awal lagi. Oya, kalau spoilernya tetep kebuka karena halamannya belum selesai termuat semuanya, coba tunggu sampai termuat semua.
makasih mas,
spoilernya sudah berfungsi.
dan klw boleh link blog mas mau saya taruh di blog saya.
ok, mkasih...
Ajeb, Gan.. udah ay pasang di [pramuxlair.blogspot.com] :-bd
Mas, dneng une Q ra dadi ya,
Coba lihat postingan aku yang Modern Combat 2
Perasaan aku dah kasih jQuery,
Kalau belum, jQuerynya harusnya taruh di mana mas, ?
Di bawah kode
head
@trii waluyo Di atas kode </head> atau di bawah kode <head> (di antara wilayah kekuasaan HEAD).
trims pisannn!!!
kalo mau ganti background konten gimana ya boss...
mohon pencerahannya
@Ohim Tumaritiz Atur tampilannya pada bagian ini:
blockquote.spoiler {
border:2px dashed #cec2c2;
background-color:#eee2e2;
}
@Taufik Nurrohman Okeh... \o/ trima kasih Suhu.izin singgah lagi nih,kalo mau pasang lebih dari satu pada Posting bisa di gonta ganti judul tombolnya ga?kalo bisa Kasih tau Caranya yah Suhu?thanks pisan...
@Ohim Tumaritiz Ide bagus. Saya mencoba memodifikasi widget ini di sini » klik!
Setiap label tombol pembuka disimpan di dalam atribut data-open dan tombol penutup disimpan di dalam atribut data-close:
<blockquote class="spoiler" data-open="Buka Spoiler!" data-close="Tutup Spoiler!">
Konten di sini...
</blockquote>
Perbaharui juga kode JQuery di atas menjadi seperti ini:
<script type="text/javascript">
//<![CDATA[
$(function() {
$('blockquote.spoiler').each(function() {
$(this).hide(1000).before('<button class="sp-trigger">' + $(this).data('open') + '</button>');
$('button.sp-trigger').toggle(function() {
$(this).addClass('sp-active').text($(this).next().data('close')).next().slideDown(1000);
}, function() {
$(this).removeClass('sp-active').text($(this).next().data('open')).next().slideUp(1000);
});
});
});
//]]>
</script>
@Taufik Nurrohman
X@ wahh...jadi malu nih..makasih Suhu tapi kenapa ga jalan malah Underfined apa gara2 adajquery 1.3 bawaan Fancy box yah?
:'( terus gimana ngatasinya biar kedua2nya bisa ane pasang suhu?
mantabs.. akhirnya saya berhasil menyelesaikan elemen spoiler yang hendak saya terapkan pada blog saya. Sebelumnya saya berterima kasih kepada Bung Taufik, karena banyak sekali tutorial di blog ini yang membantu saya dalam penyusunan template-template yang ingin saya buat..
Terus berkarya dan berbgai ya.. \o/
Kak gmn caranya kalau tombol spoilernya diganti pake gambar sendiri yang kita suka terima kasih
Trus gimana caranya kalau ingin menaruh spoilernya lebih dari dua?
.before('<img class="sp-trigger" src="URL-Gambar.jpg"/>');
mas, untuk mengatur ukuran hurufnya gmn ya?
makasih
Saia udah berapa tahun pake spoiler dari blog ini dengan modifikasi sendiri, meski berhasil tapi masih belum juga paham tentang Jquery..,, hehe..,
Sebelumnya, saia mo ngucapin makasih dulu, semoga bisa menjalin pertemanan..,, :D
Salam kenal..,, :-bd
Salam kenal pak.
mas, boleh di repost ngga...,,
saia pengen simpen postingan ini biar ngga mbulet nyari di bookmark chrome pasti lupa nyimpen dimana...,, T_T
Boleh…
Post a Comment
<< Home