Cara mudah membuat widget spolier dengan jQuery

   Spolier kali ini memiliki suatu kelebihan penting. Yaitu, hanya menggunakan satu elemen tunggal.  Itu artinya, bahwa proses intalasi menjadi jauh lebih mudah. Elemen tombol pembuka atau penutup spoiler tidak perlu kita sertakan disini, karena jQuery akan menyisipkan tombol tersebut secara otomatis pada masing - masing elemen target. Ok, seperti apa spolier yang akan saya bahas? Lihat pada kolom Site Info pada blog ini. Itu adalah demonya. Mulai...

1. Login blog.
2. Template.
3. Edit HTML -> Lenjutkan -> Centang expand template widget.
4. Cari kode </head>
5. Letakkan kode dibawah ini, tepat di atas tag </head>

<script type='text/javascript'>
//<![CDATA[
    $(function() {
        $('blockquote.spoiler').hide(1000).before('<button class="sp-trigger">Judul spoiler</button>');
        $('button.sp-trigger').toggle(function() {
            $(this).addClass('sp-active').text('Tutup').next().slideDown(1000);
        }, function() {
            $(this).removeClass('sp-active').text('Judul Spolier').next().slideUp(1000);
        });
    });
//]]>
</script>

Note : Ganti Judul Spolier dengan teks lain.
6. Kemudian cari kode ]]></b:skin> atau </style>
7. Letakkan kode dibawah ini, diatas kode no.6

/*
 Spoiler sederhana dengan JQuery
 (http://infoiki.blogspot.com)
*/
blockquote.spoiler {
  font: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;}

8. Save template.

  Spoiler ini bisa digunakan. Tetapi, tinggal menambahkan kode dibawah ini :

<blockquote class="spoiler">
   KONTEN DISINI
</blockquote>

Note : Untuk diletakkan di postingan, jangan lupa ubah mode compose menjadi mode HTML. Untuk meletakkan konten, letakkan konten di mode Compose.

  Selesai. Semoga berhasil. ;)