Shoutmix Sliding Panel dengan jQuery

Yup yang pasti udah tau gimana tampilan sliding panel ini. Menarik dan keren.. Udah lama saya pake dan sekarang saya tertarik untuk share gimana cara buatnya .

Trik "Sliding Panel" ini saya dapat dari spreystudios, yang sebenarnya fungsinya bukan hanya untuk menampilkan shoutmix saja . Tapi saya pakai buat menampilkan shoutmix, karena shoutmix yang dulu udah berbau "jadul" alias udah biasa banyak yang pakai . Yah begitulah jQuery, mantaf..

langsung aja cara buat nya ya cuy ? biar ga terlalu lama baca-baca yang ga penting ini, hahahah ..

1. jelas, Masukan script jQuery ini di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'>


2. ini javascriptnya, masukan di bawah script di atas .

<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
3.ini css nya..



.panel {
position: absolute;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}
.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}
.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}
.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}
a.trigger{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(URL GAMBAR +) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}
a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(URL GAMBAR +) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}
a.active.trigger {
background:#222222 url(URL GAMBAR X) 85% 55% no-repeat;
}


Nb:

>>Ini untuk gambar +


>>ini untuk gambar X


>>kalo ingin buat di sebelah kiri ganti css a.trigger dan panel dengan ini


a.trigger{
position: absolute;
top: 80px; left: 0;
}

.panel {
position: absolute;
top: 50px; left: 0;
}

dan juga ganti css rounded corner ini


border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;

dengan ini


border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;

>>kalo ingin buat posisi fixed ganti dengan css posisitionya dengan fixed .

4. Untuk tag htmlnya, taruh di widget atau di bagian body .


<div class='widget-content'>
<div class="panel">

Taruh Script shoutmix nya disini atau content lainya

</div>
<a class="trigger" href="#">Shoutmix</a>
</div>


Nah... jadi deh.. xixixixi gampang kan ? usefull lagi, bagus juga .