Membuat Spoiler Keren Didalam Posting Admin : Unknown

Cara membuat / Memasang Spoiler didalam posting maupun pada widget blog.

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:

Kali ini catatansaif bakal bahas cara membuat spoiler didalam posting. Ada banyak sekali fariasi dan tampilan yang bisa kita pakai,diantaranya akan kita kupas dan praktekkan disini, berikut dari beberapa spoiler tersebut yang bisa kita terapkan di blog kita.

1. Spoiler tampilan biasa

Cara Membuat Spoiler ini :
1. Login ke Blogger
2. Pilih New Post atau Entri Baru seperti membuat postingan biasa
3. Pilihlah pada mode Edit HTML saat membuat postingan
4. Gunakan kode script berikut ini untuk membuat spoiler:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan teks atau kode script (gambar atau video juga bisa) di sini
 <br>
</div>
</div>
</div>

Hanya itu,mudahkan..
Sebagai contoh :

Judul Spoiler Coba2 :

Spoiler ini akan bekerja saat sudah di publikasikan.

2. Spoiler Modifikasi

Hampir sama namun yang ini sedikit lebih menarik.
Cara pemasangannya :
1. Buka Dashboard > Template > Edit HTML
2. Cari kode </head> Gunakan CTRL+F [ untuk permudah pencarian]
3. 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. 
4. Letakkan kode berikut tepat diatas kode </head> tadi.

<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. Cari lagi kode ]]></b:skin> dan letakkan kode Css berikut diatasnya :

Buka Kode :

/* 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}

Untuk pemasangannya sama halnya seperti yang diatas [ spoiler biasa ] yaitu dipasang pada mode Html.
Silahkan Copy kode pemanggilnya berikut ini :

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

Semuanya mudah bukan, silahkan dipraktikkan, semoga bermanfaat..