Pada tutorial sebelumnya saya pernah membahas tentang Menu navigasi keren "Slide out effect" ( jQuery ) dimana letak dari menu navigasi tersebut berada di sebelah kiri dari element halaman blog/web.Tapi pada tutorial kali ini kita akan menempatkan Menu navigasi tersebut di atas dari element halaman blog/web anda.Hasilnya tetap sama seperti pada tutorial sebelumnya,disaat kita scroll halaman ke bagian paling bawah sekalipun,menu navigasi tersebut akan selalu ada pada posisi atas elemen halaman.Untuk versi demonya anda bisa lihat disini .
Berikut langkah - langkah project latihan kita kali ini. 1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
5. 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)}
6. Setelah Itu Beralihlah dan cari kode <body>
Jika Sudah, Letakkan kode berikut tepat dibawah Kode diatas
<ul id='navigation'>
<li class='home'><a href='#'><span>Home</span></a></li>
<li class='about'><a href='#'><span>About</span></a></li>
<li class='search'><a href='#'><span>Search</span></a></li>
<li class='photos'><a href='#'><span>Photos</span></a></li>
<li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li>
<li class='podcasts'><a href='#'><span>Podcasts</span></a></li>
<li class='contact'><a href='#'><span>Contact</span></a></li>
</ul>
KET: Saya akan memberi sedikit penjelasan disini kususnya untuk anda yang masih baru atau awam dengan pengkodean diatas.
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://uttafreak-987.blogspot.com/'><span>Home</span></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.
7. Langkah terakhir, cari kode ]]></b:skin>
Jika Sudah, 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>
Selesai..silahkan anda priview dulu dari hasil latihan ini ,apabila semua berjalan dengan sempurna barulah anda
