Membuat Spoiler Sederhana dengan jQuery
Tabel Konten
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 Komentar
Kholiz Apra
ma'f mas
punya saya tombolnya kok gak ada, spoilernya langsung terbuka sendiri
mohon penjelasanya
Taufik Nurrohman
@Kholiz Apra: JQuery-nya sudah dipasang belum? ⇒ Pertama-tama pastikan dulu bahwa template Anda sudah dilengkapi dengan JQuery
Taufik Nurrohman
@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.
Kholiz Apra
trus gimana ya cara mengatasinya
Taufik Nurrohman
@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.
Kholiz Apra
makasih mas,
spoilernya sudah berfungsi.
dan klw boleh link blog mas mau saya taruh di blog saya.
Kholiz Apra
ok, mkasih...
MUX SPARROW
Ajeb, Gan.. udah ay pasang di [pramuxlair.blogspot.com] :-bd
Unknown
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
Taufik Nurrohman
@trii waluyo Di atas kode
</head>
atau di bawah kode<head>
(di antara wilayah kekuasaan HEAD).Ohim
trims pisannn!!!
kalo mau ganti background konten gimana ya boss...
mohon pencerahannya
Taufik Nurrohman
@Ohim Tumaritiz Atur tampilannya pada bagian ini:
Ohim
@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...
Taufik Nurrohman
@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 atributdata-close
:Perbaharui juga kode JQuery di atas menjadi seperti ini:
Ohim
@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?
Anonim
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/
santri sholeh
Kak gmn caranya kalau tombol spoilernya diganti pake gambar sendiri yang kita suka terima kasih
santri sholeh
Trus gimana caranya kalau ingin menaruh spoilernya lebih dari dua?
Taufik Nurrohman
Unknown
mas, untuk mengatur ukuran hurufnya gmn ya?
makasih
Rosid Ridho
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
Taufik Nurrohman
Salam kenal pak.
Rosid Ridho
mas, boleh di repost ngga...,,
saia pengen simpen postingan ini biar ngga mbulet nyari di bookmark chrome pasti lupa nyimpen dimana...,, T_T
Taufik Nurrohman
Boleh…