Cara Membuat Spoiler di Blog

Cara Membuat Spoiler di Blog | Untuk mengawali postingan perdana saya di Selembar Ilmu, saya akan coba membagikan cara membuat spoiler di blog. Apakah anda pernah melihat spoiler? Mungkin bagi para kaskusers ataupun pengunjung yang senang bermain di Forum tidak asing lagi dengan yang namanya Spoiler.

Spoiler adalah sebuah alat yang biasa digunakan untuk menyembunyikan kata jika pembaca mengklik tombol pembuka / penutup sebuah spoiler tersebut. Jika masih bingung silahkan anda lanjutkan saja membaca artikel ini secara menyeluruh.

Keuntungan menggunakan Spoiler yaitu akan sangat membantu para pemilik blog untuk meringankan blognya jika menggunakan script yang terlalu banyak karena spoiler menggunakan elemen tunggal yang dapat meringankan artikel di blog kita. Silahkan ikuti beberapa langkah singkat berikut ini jika ingin memasang spoiler pada blog anda:

Langkah Membuat

1. Buka Dashboard blog anda > Template > Edit HTML, lalu masukkan jQuery ini diatas kode </head>

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

Catatan : Jika anda sudah memasang jQuery seperti diatas, tolong jangan memasukan kembali jQuerynya karena bisa menyebabkan error pada template anda. 

2.  Langkah kedua yang harus sahabat Selembar Ilmu lakukan adalah dengan menyalin kode lalu meletakkannya diatas kode </head>

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

3. Langkah ketiga, salin kode CSS dibawah ini lalu letakkan tepat diatas kode  ]]></b:skin>

/*
 Spoiler sederhana dengan JQuery http://blogrinata.blogspot.com
*/
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}

Jika sudah, silahkan klik "simpan template".

Sekarang langkah terakhir adalah mempraktekannya. Silahkan anda buat sebuah artikel baru dan anda cukup menambahkan kode di kalimat yang akan anda berikan spoiler.

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

Nah, mudah bukan cara memasang spoiler di blog anda. Jadi tidak perlu artikel panjang-panjang untuk memuat semua artikel anda, karena sekarang anda sudah bisa Membuat Spoiler Di Blog anda sendiri. Silahkan jika berkenan berikan komentar anda di kolom komentar yang sudah disediakan. Terima Kasih. Salam dari admin penulis baru, Rinata.