Cara Membuat Vertical Sliding Info Panel With jQuery

Apa itu Vertical Sliding Info Panel With jQuery? Ini kayak yang ada di kiri atas blog gue. Yang ijo" terus ada kata Imran itu, lho.

Mau tau caranya?

Oke langsung saja berikut ini :
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:]]></b:skin>
Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:

.panel{position:fixed;top:20px;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}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 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.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 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.trigger{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}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel 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}

  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(){
$(".trigger").click(function(){
 $(".panel").toggle("fast");
 $(this).toggleClass("active");
 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='panel'>
<h3>Welcome to IMRAN BLOG</h3>

<p style='text-align:justify'>Selamat datang di blog gue ya. Makasih udah berkunjung ya. Makasih uda mau capek&quot; ya. Makasih udah ngeluangi waktu ya. Makasih udah mo baca ya. Kalo berkenan komen dan follow ya. (Oke. emang dari tadi kebanyakan kata &#39;makasih&#39; sama &#39;ya&#39; aja ya)...
</p>
<h3>About Muhammad Ali Imran</h3>
<img height='73px' src='http://img543.imageshack.us/img543/7050/imran.jpg' width='73px'/>
<p>Nama gue Muhammad Ali Imran. Tinggal di kota Tembung, kota yang sangat terkenal di kalangan tukang becak. Sekarang gue sekolah di SMA Negeri 1 Medan.</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='http://ma-imran.blogspot.com/' title='home'>Home</a></li>

</ul>
</div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://twitter.com/imran427' title='twitter'>Twitter</a></li>
<li><a href='http://facebook.com/m.alisynystergates' title='facebook'>Facebook</a></li>


<li><a href='http://ziraband.blogspot.com/' title='plurk'>ZIRA BAND</a></li>
<li><a href='http://kreatifsmansa.blogspot.com/' title='myspace'>BLog Kelas</a></li>
<li><a href='http://chordgitar-liriklagu.blogspot.com/' title='chordgitar'>Chord Gitar</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Imran</a>

Di langkah 9, kamu boleh ganti kata"nya sesuka hatimu. 

sumber: www.oktri.co.cc