Membuat Shoutmix dengan Sliding Panel

Tips ini dapat memprcantik blog anda, khususnya pada bagian shoutmix seperti yang terlihat pada sisi kiri atas blog saya ini. Trik ini saya dapat dari teman blogger saya (GiBlog) dan saya repost lagi pada blog saya karena ada teman-teman blogger yang memintanya dan kebetulan juga saya telah di beri izin untuk mereposting artikel ini pada blog saya. Kalau begitu langsung saya jelaskan saja.

Pertama-tama kopi kode jQuery di bawah ini dan pastekan kodenya di template blog anda pada bagian javascriptnya di atas kode </head> ....
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'>
Kemudian ini javascriptnya tempatkan di bawah script di atas....
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
Ini script CSS nya masukin di atas kode ]]></b:skin>....
.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;
}

Catatan :
1. URL Gambar +

2. URL Gambar x


Dan yang terakhir tambah gadget html/javascript, masukin script shoutmixnya....
<div class='widget-content'>
<div class="panel">

paste script shoutmix anda disini....

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

Mudah saja kan?? Dengan ini shoutmix kita terlihat lebih keren....

Ref : http://granoblog.blogspot.com/2009/11/shoutmix-sliding-panel-dengan-jquery.html