Memasang Menu JQuery

Demi artikel mungkin akan menemukan teknik terbaik pemasangan jQuery(seperti gambar di atas) Pada tips-n-trick kali ini semua informasi yang dimasukan masih serba manual, hal ini agar mudah dipahami bagaimana kerja dari sliding panel, sehingga kedepannya kita hanya perlu melakukan modifikasi pada bagian isi dari sliding panel
Oke langsung saja berikut ini :
1.Login ke akun blog anda
2.Masuk ke Rancangan > Edit HTML
3.Klik "Expand Template Widget"
4.Cari kode :]]></b:skin> 
  
5. Masukan Code berikut di atas code yang tadi : 

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

6.Cari kode : </head> 
7.Copy kode dibawah ini dan paste diatas kode tadi :

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

8.Cari kode : </body> 

9.Masukan kode di bawah ini diatas kode tadi :

<div class='panel'>
<h3>Selamat Datang Di OKTRI BLOG</h3>

<p style='text-align:justify'>Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...
</p>
<h3>Sekilas tentang penulis</h3>
<img height='73px' src='http://i634.photobucket.com/albums/uu66/oktri_2009/o-3Jqh3BlhR3srjirD0J-A.jpg' width='73px'/>
<p>Nama saya Oktri darmadi,saya seorang Mahsiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='http://oktridarmadi.blogspot.com/' 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='http://twitter.com/oktridarmadi' title='twitter'>Twitter</a></li>
<li><a href='http://facebook.com//oktri.darmadi' title='facebook'>Facebook</a></li>
<li><a href='http://friendster.com/ok3darmadi' title='friendster'>Friendster</a></li>

<li><a href='http://oktridarmadi.blogspot.com/' title='plurk'>My Blog 1</a></li>
<li><a href='http://www.oktri.co.cc/' title='myspace'>My Blog 2</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Oktri</a>

10.Simpan Template dan lihat hasilnya . 
__________________________________________________________________________________

*)Langkah Ke-9 : ubah sesuai keinginan anda 

Sumber : http://www.oktri.co.cc/