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.

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

    blockquote.spoiler {
    border:2px dashed #cec2c2;
    background-color:#eee2e2;
    }
  • 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.