Integrasi Navigasi Efek Slide Out

Integrasi Navigasi Efek Slide Out (Slide Out Navigation) pada template Blogger
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>
Langkah 5
Masukan (copypaste) kode CSS dibawah ini diatas kode pada langkah 4:

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

}
Langkah 6
Cari kode dibawah ini:
</head>
Langkah 7
Masukan (copypaste) kode jQuery dibawah ini diatas kode pada langkah 6:

<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>
Langkah 8
Cari kode dibawah ini:
</body>
Langkah 9
Masukan (copypaste) kode dibawah ini diatas kode pada langkah 8:
<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>
[Baca keterangan untuk memodifikasi menu]
Langkah 10
Simpan template dan preview blog anda...

Download jQuery Slide Out Navigation
Klik disini untuk download Source Code Navigasi Efek Slide Out dengan jQuery
Keterangan:
Ubahlah LINKANDA sesuai dengan link keinginan anda.
Ubahlah keterangan didalam tag title (misal; title='Beranda' di ubah menjadi title='Home') sesuai dengan keinginan anda.
Perhatikan kode pada Langkah 5 baris 5 yaitu top: 50px; ubahlah nilai 50 untuk menentukan jarak antara bagian atas halaman blog dengan menu.
Perhatikan kode pada Langkah 5 baris 15 yaitu margin-left: -50px; ubahlah nilai -50 untuk mengatur berapa jarak menu yang akan disembunyikan.
Jika nilai -50 diubah (pada keterangan nomor 4) maka nilai -50 pada Pada Langkah 7 baris 7 dan baris 13 juga harus diubah atau disamakan.
Perhatikan kode pada Langkah 5 baris 34, 37, 40, 43, 46, 49, 52 ubahlah URL Icon sesuai dengan icon yang telah anda siapkan.



sumber http://modification-blog.blogspot.com/2010/04/navigasi-efek-slide-out-dengan-jquery.html