Beranda » Javascript » jQuery » Membuat tombol spoiler di blogger

Membuat tombol spoiler di blogger

Spoiler memiliki banyak kegunaan, selain untuk mengemas posting/konten yang terbilang panjang spoiler juga dapat di gunakan untuk meletakkan note/cuplikan khusus. Dengan Spoiler ini memiliki satu kelebihan penting, yaitu hanya menggunakan satu elemen tunggal. Elemen tombol pembuka/penutup spoiler tidak perlu kita sertakan di sini karena JQuery akan menyisipkan tombol tersebut secara otomatis pada masing-masing elemen target:

Sebelumnya anda harus meletakkan jQuery berikut ini di atas tag </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://reader-download.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'></script>

jika sudah ada, lewati langkah di atas. langkah selanjutnya kita tempatkan pemanggil jQuery ini di atas kode tag </head>

<script type='text/javascript'>
//<![CDATA[
    $(function() {
        $('blockquote.d-spoiler').hide(1000).before('<tombol class="sp-bidang">Buka untuk Melihat</tombol>');
        $('tombol.sp-bidang').toggle(function() {
            $(this).addClass('sp-active').text('Tutup').next().slideDown(1000);
        }, function() {
            $(this).removeClass('sp-buka').text('Buka untuk Melihat').next().slideUp(1000);
        });
    });
//]]>
</script>

Salin kode CSS ini dan letakkan di atas kode ]]></b:skin> atau </style>:

/* tombol spoiler dengan jQuery by Defri */
blockquote.d-spoiler {
  font:normal normal 11px/16px Verdana,Arial,Sans-Serif;
  color:#666;
  border:2px dashed #cec2c2;
  background-color:#2f4f45;
  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) */
}

tombol.sp-bidang {
  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);
}
tombol.sp-bidang.sp-buka {background-color:#008080}

Klik Simpan Template. Sekarang masuk ke editor posting lalu letakkan kode di bawah ini untuk membuat tombol spoiler.


<blockquote class="d-spoiler">
    Tulis apa saja di sini...
</blockquote>

Sedikit trik perubahan: lihat yang saya beri warna biru, silah ganti sesuka sobat. jika sobat ingin mengganti/memodifikasi silah untuk lebih berkreasi.

Semoga berguna...

Membuat tombol spoiler di blogger

Belum ada tanggapan untuk "Membuat tombol spoiler di blogger"

Post a Comment