Buku Tamu, ala Panel Slide Vertikal dengan jQuery

Sebenarnya ilmu ini saya dapat dari blogger tune-up yg membahas tentang Info Panel Slide Vertikal dengan jQuery (hasilnya seperti panel ABOUT di dinding kiri blog saya), namun setelah saya utak-atik sedikit, munculah ide membuat ShoutMix Panel Slide Vertikal dengan jQuery ini.

Buku Tamu, ala Panel Slide Vertikal dengan jQuery

Langsung az..
begini caranya :



Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode di bawah ini :

]]></skin>

Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4 :

.parno{position:fixed;top:40px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.parno p{color:#ccc;margin:0 0 15px;padding:0}
.parno a,.parno a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.parno a:hover,.parno a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.triger{position:fixed;text-decoration:none;top:110px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh32Dx9bIwEDnnf3qD5v7Lz3uIhXVQCOQGZQzBTH4sQ79AfVlmnevmKTHgtiuW2xulcnayH_mThCq5r5sy-HDHKMuXve1iEbkBP0ecGhzKqwjaDiIcruv5TxX2ydiwVzDu8a0KYY9CH_CY/) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.triger:hover{position:fixed;text-decoration:none;top:110px;left:50px;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgovsI9SUNa5i1VlDgZYYssPv9_J9JvD2P7B4ifzPTvHY2TSadBODAkQtC-IxXiwSb6Zb6wv-hwpurRZ9fzOsKpl3_nRKcogo0KWq38irPgsuJSp2rzV2P2yKAxUwUVrOVtibncdXzojRU/) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.triger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.parno img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.parno h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

Yg dicetak merah silahkan dirubah sesuka anda dg url koleksi gambar anda, cuman diharuskan max 32x32.


Langkah 6
Cari kode dibawah ini :

</head>

Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6 :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.triger&quot;).click(function(){
 $(&quot;.parno&quot;).toggle(&quot;fast&quot;);
 $(this).toggleClass(&quot;active&quot;);
 return false;
});
});
</script> 

Langkah 8
Cari kode dibawah ini :

</body>

Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8 :

<div class='parno'>
<h3>Buku Tamu</h3>

====== Kode Widget ShoutMix Anda =======

</div>
<a class='triger' href='#'>Guest</a>

Yg dicetak merah silahkan dirubah sesuka anda,
dan yg dicetak biru isikan dg kode widget shoutmix anda.

Langkah 10
Simpan Template dan Lihatlah hasilnya..
Insya Allah akan seperti panel GUEST di dinding kiri blog saya.
Semoga bermanpaat.