Cara Membuat Tombol Spoiler Dengan jQuery di Blog

Tombol Spoiler Dengan jQuery

DEMO

Dengan melihat demo diatas teman-teman pasti tau kan maksudnya.

Okeh kita lanjut ke tutorial.

1. Login Blogger

2. Ke menu Template lalu pilih edit html.
3. seperti biasa expand widget bagian atas.
4. lalu cari kode </head> dan letakkan kode berikut tepat 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. Selanjutnya cari kode ]]></b:skin> dan letakkan kode ini 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. Save template anda.

7. Selanjutnya silahkan anda menuju postingan <new entri> pastekan kode dibawah ini dalam mode html jangan Compose (tidak akan jadi).

<blockquote class="spoiler"> Masukkan artikel anda di sini... </blockquote>

Silahkan di Publish or pratinjau. dan Selamat Mencoba.