Navigasi Efek Slide Out dengan jQuery

Tampilannya seperti gambar di samping... untuk cara membuatnya :

1. Seperti biasa log in blogger
2. Rancangan , edit html
3. Masukkan kode dibawah ini di atas kode ]]></b:skin> 

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://dimash.waphall.com/nav_home.png);
}
ul#menusisi .tentang a{
background-image: url(http://dimash.waphall.com/nav_info.png);
}
ul#menusisi .cari a{
background-image: url(http://dimash.waphall.com/nav_search.png);
}
ul#menusisi .komentar a{
background-image: url(http://dimash.waphall.com/nav_comment.png);
}
ul#menusisi .rssfeed a{
background-image: url(http://dimash.waphall.com/nav_rss.png);
}
ul#menusisi .alat a{
background-image: url(http://dimash.waphall.com/nav_tools.png);
}
ul#menusisi .kontak a{
background-image: url(http://dimash.waphall.com/nav_mail.png);
}

Selanjutbya cari kode </head> dan kopikan kode ini di atsnya :

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;jquery&quot;, &quot;1.3.2&quot;);
</script>
<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>

Selanjutnya cari kode </body> dan kopikan kode berikut diatasnya :

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

yang berwarna biru silahkan isi sesuai kebutuhan.....
Selesai Simpan template......

selamat mencoba.......