Tutorial Membuat Navigasi Slide Out Di Blog - Setelah kemarin saya share artikel sama
Dan yang berjudul
MEMBUAT MENU ROCKING ROLLING ROUNDED DI BLOG
Kali ini ada beberapa perubahan dalam navigasi yang kemarin navigasi ini sangat bagus
Dan Tidak membuat blog berat navigasi ini juga tidak menggangu Pengunjung
Berikut Cara Pembuatan :
1. Cari Kode ]]></b:skin>
2. Kemudian Letakan Kode Dibawah Ini Diatasnya
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)}
3. Lalu Letakan Kode Dibawah Ini Diatas <body>
<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>
4. Lalu Cari Kembali Kode ]]></b:skin>
5. Letakan Kode Dibawah Ini Dibwah Kode ]]></b:skin>
<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>
Silahkan Anda Atur Menu Sesuai Isi Dari Blog Anda
Posts
