Layaknya Simple Accordions, menu slide panel ini menyembunyikan content yang ada didalamnya kemudian akan ditampilkan setelah diklik.
cara membuat Slide Panel DI Blog adalah sebagai berikut :
- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Gunakan JQuery versi 1.2.3 berikut pada template anda. copy paste JQuery berikut dibawah :
<head>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/>
- Copy paste script berikut dan letakkan dibawah JQuery 1.2.3 tadi :
<script type='text/javascript'>
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
});
});
</script>
- Masukan code CSS berikut dan letakkan diatas ]]></b:skin> :
#panel {background: #fff;border:2px solid #f0f0f0;border-bottom:none;text-align:left;padding:10px;width:280px;height:200px;display: none;}
.slide {margin: 0;padding: 0;width:304px;border-top: solid 4px #422410;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho3UJfnWo2SmIpOUKPe5Ci4Hacx68baBJ7ODlEf37evA3YctIoOmRvtKTQCJMwk5xkUBjGTaxRtcFQGfA4mj2bC9lrsOB4c-OKbLrKKiUDbN14CqEHFAjHFX_WVV7V7FnSRFEp2dQLPNI/s1600/btn-slide.gif) no-repeat center top;}
.btn-slide {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10wPlpYiBwfuYOmsGpfrWEurOWCHogF0GJ-aTVhzK1BlMoyc_Zhyphenhyphen46rDB-CR7e-r6VdrEgi2KSpXX_2X8AHWwFyiRuZddxs4f9T72sX0GSyNk5GxhghinBjfBrSAOVQDfvBesn7OUbe0/s1600/white-arrow.gif) no-repeat right -50px;text-align:center;width: 144px;height: 31px;padding: 10px 10px 0 0;margin: 0 auto;display: block;font: bold 120%/100% Arial, Helvetica, sans-serif;color: #fff;text-decoration: none;}
.active {background-position: right 12px;}
- Simpan template.
Untuk langkah berikutnya adalah sebagai berikut :
- Copy paste code berikut dan letakkan ditempat yang anda inginkan (postingan atau sidebar) :
<div id="panel" style="font-weight:bold;">
LETAKKAN CONTENT ANDA DISINI
</div><div class="slide"><a class="btn-slide" href="#">Slide Panel</a></div>
- Simpan.
0 comments:
Post a Comment
Berikan Komentar Anda Dibawah Sini Jika Belum Punya Akun Google/Blogger Anda Bisa Pilih Anonymous