Membuat tombol spoiler di blogger

Home jQuery Membuat tombol spoiler di blogger

Membuat tombol spoiler di blogger

Diposting oleh: Dafin defandaky pada: 20 Juli 2013

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

Tidak ada komentar :

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag ...KODE ANDA DI SINI...
Untuk menyisipkan script, gunakan ...KODE SCRIPT ANDA...
Untuk menyisipkan gambar, gunakan tag ...URL GAMBAR ANDA ...
Untuk menyisipkan judul, gunakan tag ...JUDUL ANDA...
Untuk menyisipkan catatan, gunakan tag ...CATATAN ANDA...
Untuk menciptakan efek tebal gunakan tag ...TEKS ANDA...
Untuk menciptakan efek huruf miring gunakan tag ...TEKS ANDA...

Konversi KodeOOT

Membuat tombol spoiler di blogger

Artikel Terkait

Tidak ada komentar :