Salam......
selamat berjumpalagih sobat
Dyno, pada kesempatan ini saya akan membahas tentang
Cara Membuat Spoiler Show/ Hide untuk Widge Dengan Jquery, mungkin para sahabat sudah Tahu dan bisa untuk membuat nya , apalagi para Master blogger yang sudah paham betul, namun saya cuma ikut serta dalam berbagi ilmu untuk para newbi yang lagi butuh dengan artikel ini, untuk mempersingkat waktu kita langsung saja ke poko pembahasan.
Lihat DEMO
Langkah-langkah untuk membuat spoiler show/hide untuk di gunakan di widget adalah dengan menginstal atau menyimpan script jquery di edit html bloganda, lebih jelasnya yaitu
pastekan salah satu script jquery di bawah ini tepat dibawah <head> atau di atas </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>
Catatan : pilih salah satu jquery di atas, tetapi jika di template sobat sudah terdapat salah satu script diatas maka langkah ini tidak usah di gunakan , maka lanjut ketahap berikutnya.
1. Login Account Blog anda.
2. buka Template.
3. Edit HTML.
4. Selanjutnya copy/paste code CSS di bawah ini tepat di atas code ]]></b:skin> :
/*
Spoiler showhide JQuery
*/
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:steelblue;
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}
5. Setelah selesai sobat Save Template.
6. Selanjutnya buka Tata letak / layout sobat.
7. Click
Add a Gadget kemudian masukan code script di bawah , dan lihat sample gambarnya seperti dibawah ini :
<script type='text/javascript'>
//<![CDATA[
$(function() {
$('blockquote.spoiler').hide(1000).before('<button class="sp-trigger">
Show</button>');
$('button.sp-trigger').toggle(function() {
$(this).addClass('sp-active').text('
Close').next().slideDown(1000);
}, function() {
$(this).removeClass('sp-active').text('
Show').next().slideUp(1000);
});
});
//]]>
</script>
<blockquote class="spoiler">
Konten di sini...
</blockquote>
8. Setelah di simpan kemudian langkah terakhir click Save, dan kemudian Preview.
9. Code yang berwarna
Biru Bisa soba ganti sesuka kalian, itu adalah Title Button dan Warna
Merah isi dengan
konten sobat, Semoga berhasil.
10. Terima Kasih Sudah berkunjung ke
Dyno Geek dan
semoga bermanfaat.
