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/AVvXsEj2gqyPTO1sr5bF9gT17MZhxU2Kkd9tYx5CwqwB7Qx4LGoK9Er30BPMqp9cB0hHx6YUBLyOi3tF7-wwP3Cq3YpNPVgFhcnqchbiSY_TrDj0DBAyyawOPElhh6SAlkk4skiaPRGHkXTYyEc/s1600/btn-slide.gif) no-repeat center top;}
.btn-slide {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhglA469KzdpQV7yL8nD2xi0Oj31htrT2aDgshUBvWdfsxRBeLhdazcg68isyuHEy5iPGkrPqGcl4PZ-p3gfWTbdaJYHLkm8zBApbUKVo_PlnzoHhnq1LPvmYCrVy1N9lG-JIDzJWeqnqM/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.
No comments:
Post a Comment