Mecha versi 2.6.4 sudah dirilis!

Membuat Spoiler Sederhana dengan jQuery

Tabel Konten
  1. Sudah Kenal dengan Fungsi-Fungsi Ini? 
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:

Lihat Demo

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.

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

Ohim

trims pisannn!!!
kalo mau ganti background konten gimana ya boss...
mohon pencerahannya

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 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>

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

.before('<img class="sp-trigger" src="URL-Gambar.jpg"/>');

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

Komentar telah ditutup.