Membuat Spoiler dengan jQuery

TIPS untuk Blogger: sebelumnya sudah pernah memberikan tips yang sama dengan ini.Yaitu Cara Membuat Tombol Spoiler pada Blog. Tips ini bertujuan untuk menyembunyikan teks yang terlalu panjang, atau menyembunyikan gambar, widget, dll. Beda tips ini dengan yang pertama adalah pada tips ini ada sedikit editan dengan penambahan kode jQuery. Mungkin sobat blogger penasaran dengan bentuk spoiler ini. Silahkan lihat demonya.

DEMO

Nah sekarang blogger sudah tau seperti apa tampilan dari spoiler yang satu ini. Jika sobat blogger tertarik ingin menampilkannya pada blog sobat silahkan cek di TKP.

1. Login ke blogger dan pastikan anda berada pada dasbor blog.

2. Pada dasbor blog, pilih Template kemudian pilih Edit HTML.

4. Cari kode </head> dan letakkan kode berikut diatasnya.

<script type='text/javascript'>
//<![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>

5. Kemudian cari kode ]]></b:skin> atau </style> dan letakkan kode CSS berikut diatasnya.

/*
 Spoiler sederhana dengan JQuery
 (http://hompimpaalaihumgambreng.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;}

6. Silahkan Simpan Template anda.

Sekarang anda beralih pada Entri Baru (New Post). Pada ruang postingan anda silahkan pastekan kode berikut (Harus dalam mode Edit HTML)

<blockquote class="spoiler">
    Konten yang akan disembunyikan di sini...
</blockquote>

Setelah sudah selesai, silahkan Publish postingan anda dan lihat perubahan yang terjadi. Semoga bermanfaat, dan mohon maaf jika ada kesalahan. (Jkt/2012)