Membuat Menu Navigasi Versi "Slide Out Effect" ~ ™ Phuel Radcliffe™

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>
7. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode ]]></b:skin>

ul#navigation{position:fixed; margin:0px; padding:0px; top:0px; right:10px; list-style:none; z-index:999999; width:721px}
ul#navigation li{width:103px; display:inline; float:left}
ul#navigation li a{display:block; float:left; margin-top:-2px; width:100px; height:25px; background-color:#E7F2F9; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; -khtml-border-bottom-right-radius:10px; -khtml-border-bottom-left-radius:10px; text-decoration:none; text-align:center; padding-top:80px; opacity:0.7;     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)}
ul#navigation li a:hover{background-color:#CAE3F2}
ul#navigation li a span{letter-spacing:2px; font-size:11px; color:#60ACD8; text-shadow:0 -1px 1px #fff}
ul#navigation .home a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/internet-icon.png)}
ul#navigation .about a{    background-image:url(http://www.iconarchive.com/icons/zakar/shining-z/48/Brush-SZ-icon.png)}
ul#navigation .search a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/search-icon.png)}
ul#navigation .podcasts a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/my-music-icon.png)}
ul#navigation .rssfeed a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/subscriptions-icon.png)}
ul#navigation .photos a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/jpeg-image-icon.png)}
ul#navigation .contact a{    background-image:url(http://www.iconarchive.com/icons/rokey/the-last-order/48/e-mail-icon.png)}

8. Setelah Itu anda cari kode <body>
Jika Sudah, Letakkan kode berikut tepat dibawah Kode <body>

<ul id='navigation'>
 <li class='home'><a href='#'>Home</a></li>
 <li class='about'><a href='#'>About</a></li>
 <li class='search'><a href='#'>Search</a></li>
 <li class='photos'><a href='#'>Photos</a></li>
 <li class='rssfeed'><a href='#'>Rss Feed</a></li>
 <li class='podcasts'><a href='#'>Podcasts</a></li>
 <li class='contact'><a href='#'>Contact</a></li>
</ul>

Ingat !!: pada item <li> kita dapat melihat beberapa menu yakni :

* Home
* About
* Search
* Photos
* Rss Feed
* Podcast
* Contact

Menu tersebut nantinya akan mengisi header dari tiap elemen <li>,dan pada bagian "<a href='#'>" adalah tempat dimana kita meletakan link tujuan dari tiap-tiap header tersebut.Contohnya seperti ini.

<li class='Home'><a href='http://www.3xploration.co.cc/'>Home</a></li>

Ketika kita mengeklik menu Home ,maka anda akan masuk kehalaman beranda website/blog . Jadi...untuk menu-menu lainnya saya harap anda sudah memahaminya.

9. Langkah terakhir, cari kode ]]></b:skin>
Letakkan kode berikut tepat dibawah Kode diatas :

<script language='javascript' src='http://pujangga.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>