Info Panel Slide Vertikal Dengan jQuery

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin> dan letakkan CSS berikut diatasnya :

.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}

7. Selanjutnya </head> cari kode dan kopikan kode berikut diatasnya :

<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;

8. Selanjutnya cari kode </body> lalu kopi kan kode berikut diatasnya :

<div class='panel'>
<h3>Selamat Datang kawan-kawan</h3>
<p style='text-align:justify'>Selamat datang di situs blog saya, maaf atas kekurangannya atau saya dianggap so tau dsb, sebenarnya saya membuat blog ini sebagai tempat belajar saya, sebagai tempat memuaskan rasa penasaran tentang semua yang ingin saya ketahui <a href='http://dadhang.blogspot.com/' title='Ciamis Blogger'>Selengkapnya tentang kami</a></p>

<h3>Sedikit Profil tentang saya</h3>
<img src='http://lh3.ggpht.com/_xTRukLv_HsA/TNjaYa1tSjI/AAAAAAAAABc/jZL2B4_PLHM/s140/screenshaver2.gif' width='73px' height='73px'/>
<p>Nama Saya dadang herdiana, saya seorang keluaran SMk jurusan Otomotif, nama sekolah saya SMkn 1 Kawali, alamat Ciamis</p>

<div style='clear:both;'/>

<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
   <li><a href='#' title='home'>Home</a></li>
   <li><a href='#' title='about'>About</a></li>
   <li><a href='#' title='portfolio'>Portfolio</a></li>
   <li><a href='#' title='contact'>Contact</a></li>
   <li><a href='#' title='blog'>Blog</a></li>
</ul>
</div>

<div class='colright'>
<h3>Social Stuff</h3>
<ul>
   <li><a href='#' title='Twitter'>Twitter</a></li>
   <li><a href='#' title='Facebook'>Facebook</a></li>
   <li><a href='#' title='Digg'>Digg</a></li>
   <li><a href='#' title='Del.Icio.Us'>Del.Icio.Us</a></li>
   <li><a href='#' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>