Menambahkan Menu Navigasi Slide Out Blog

Tau kan sob apa itu Menu Navigasi?

Kalau tidak tau ya cari tau saja sendiri, hehehe..
Oke disini saya akan memberi tau cara menambahkan Menu Navigasi dengan efek slide pada blog sobat. Menu ini mempunyai efek Slide yang sangat halus, saat sobat mengarahkan pointer mouse (mouse hover) pada menu, maka menu akan bergeser keluar (slide out) secara perlahan dan akan kembali pada posisi semula, jika sobat menggeser mouse keluar dari area menu selain itu menu ini akan selalu dalam posisi tetap walau sobat menggeser (scroll) halaman naik ataupun turun. Sobat bisa saja menggunakan navigasi menu ini untuk berbagai keperluan, misal Sosial Bookmark dan lain sebagainya.

Jika masih belum jelas, coba lihat gambar di bawah ini sob,

Belum jelas juga? Langsung saja ikuti tutorialnya sob,

1. Langsung saja ke edit HTML
2. Centang kotak Cekbox "Expand Template Widget"
3. Jika sudah, sobat cari kode ]]></b:skin>
4. Copy dan paste script di bawah ini tepat di atas kode ]]></b:skin> tadi 

ul#menusisi {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#menusisi li {
width: 100px;
}
ul#menusisi li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px;
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#menusisi .beranda a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#menusisi .tentang a{
background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);
}
ul#menusisi .cari a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);
}
ul#menusisi .komentar a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#menusisi .rssfeed a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#menusisi .alat a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);
}
ul#menusisi .kontak a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
} 

• Selanjutnya sobat cari lagi kode </head> dan copy lalu paste script di bawah ini tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(function() {
$('#menusisi a').stop().animate({'marginLeft':'-50px'},1000);
$('#menusisi > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>

• Langkah terakhir sobat cari lagi kode </body> dan pastekan script di bawah ini tepat di atas kode </body>

<ul id='menusisi'>
<li class='beranda'><a href='LINKSOBAT' title='Beranda'></a></li>
<li class='tentang'><a href='LINKSOBAT' title='Tentang'></a></li>
<li class='cari'><a href='LINKSOBAT' title='Cari'></a></li>
<li class='alat'><a href='LINKANDA' title='Alat'></a></li>
<li class='rssfeed'><a href='LINKSOBAT' title='RSS Feed'></a></li>
<li class='komentar'><a href='LINKSOBAT' title='Komentar'></a></li>
<li class='kontak'><a href='LINKSOBAT' title='Kontak'></a></li>
</ul>

• Simpan dan lihat hasilnya.

Ket :
Jika di template sobat sudah pernah dipasang kode yang berwarna merah di atas pada, sebaiknya kode tersebut tidak perlu dipasang