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.
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>
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}
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>
//<![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.
Post a Comment