Posted by : Ryo Apri 1 Jul 2012

Pasti banyak para blogger ingin widget nya tidak melebihi batas pada sidebar ....dan juga jika banyak yang ngin menggunakan banyak widget bisa pakai cara ini untuk menghemat tempat ...

mau tau demonya ?? disini

gmana lumayan bukan nih kode Css, jQuery, dan HTML nya

CSS
<style type="text/css">
#accordion {
width:90%;
margin:10px auto;
border:2px solid white;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}
#accordion h2 {
cursor:pointer;
margin:0px 0px;
padding:7px 15px;
background-color:black;
font:bold 11px Verdana,Arial,Sans-Serif;
color:#e6e6e6;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
#accordion .content {
background-color:#ddd;
padding:10px 15px;
color:black;
height:120px;   
}
#accordion h2.active {
background-color:#4BB347;  
}
</style>
jQuery
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
HTML
<div id="accordion">
<h2>Panel 1</h2>
<div class="content">
....
</div>
<h2>Panel 2</h2>
<div class="content">
....
</div>
<h2>Panel 3</h2>
<div class="content">
....
</div>
<h2>Panel 4</h2>
<div class="content">
....
</div>
</div>

jika kalian ingin tampilan nya lebih bagus bisa kalian modifikasi sendiri
Semoga Trik Blogger kali ini bermanfaat ^^

sumber

{ 2 Discussion... read them below or Comment }

  1. Wah,, keren gan :) eh ya, gmana caranya buat blog sperti punya agan? bagus bgt templatenya:)

    BalasHapus
  2. @Arya Dharma kalo download templatenya saya di Bit-XP ...

    BalasHapus

Welcome to My Blog

Banner

banner banner banner banner

Follow

Blog, Blogger, Tips, Tricks, Music, Ryo, Apri, R-Ryuzaki™, Ryo Apri, Science, software, template, colour code, social, Game, l-nino Blog, Blogger, Tips, Tricks, Music, Ryo, Apri, R-Ryuzaki™, Ryo Apri, Science, software, template, colour code, social, Game, l-nino

- Copyright © 2013 RLanzer -Robotic Notes- Powered by Blogger - Designed by Johanes Djogan -