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> :
<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>
$(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/AVvXsEiw9867AFZu-e7eAUKVrGIp60ojr0xAIy4bES7Xb6AdoiMTPQGLE1SlcybNptuSUb9lbKmVXTS7taG1nhcc0PR1k8hJx3XA8VInbcxriHP4rbHeFxhXyqU0DnCqNa2sFDsoAQrdA96i49g/s1600/btn-slide.gif) no-repeat center top;}
.btn-slide {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBCEJJKMgZSCbBZNxKseF7nNJ4SOlF0S6I5A0R8GQvzkTMIvLWn1rohW-aAnESl1eYwa0MSdvsgUd4-Rv8ccPdVh2jn78ZKqRs5kV_ZBX6qZFetXq-PMI6wYokRELW4NBiLKE_pyIAxjA/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;}
.slide {margin: 0;padding: 0;width:304px;border-top: solid 4px #422410;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw9867AFZu-e7eAUKVrGIp60ojr0xAIy4bES7Xb6AdoiMTPQGLE1SlcybNptuSUb9lbKmVXTS7taG1nhcc0PR1k8hJx3XA8VInbcxriHP4rbHeFxhXyqU0DnCqNa2sFDsoAQrdA96i49g/s1600/btn-slide.gif) no-repeat center top;}
.btn-slide {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBCEJJKMgZSCbBZNxKseF7nNJ4SOlF0S6I5A0R8GQvzkTMIvLWn1rohW-aAnESl1eYwa0MSdvsgUd4-Rv8ccPdVh2jn78ZKqRs5kV_ZBX6qZFetXq-PMI6wYokRELW4NBiLKE_pyIAxjA/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;}
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;">
</div><div class="slide"><a class="btn-slide" href="#">Slide Panel</a></div>
</div><div class="slide"><a class="btn-slide" href="#">Slide Panel</a></div>
# width:280px;height:200px; adalah lebar dan tinggi area content.
# width:304px; adalah lebar border pada code class slide.
# Slide Panel adalah tulisan pada tombol slide panel.
Untuk tutorial originalnya silahkan kunjungi postingan berjudul jQuery Tutorials for Designers.
Selamat mencoba dan happy blogging."
Written by risky
We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.
0 komentar:
Posting Komentar