Cara Slide Out Navigasi

Ketika Anda membuka halaman blog saya, tentunya Anda akan melihat beberapa menu navigasi berupa "Home", "About Me", "Bannerku" dan lain sebagainya yang tentunya unik dan menarik. Dan sering kali temen-temen blogger menyebutnya dengan istilah "Slide Out Navigation". Tuuhh...lihat yang paling atas tuhh.. Menarik kan..??? hehe5.. Saya yakin deh Anda pasti penasaran

Tapi Anda jangan khawatir, kali ini saya akan mencoba untuk share ilmu dan pengalaman saya ini kepada Anda semua tapi klonya anda merasa ragu coba dulu

Oke.., berikut langkah-langkah cara membuat Slide Out Navigation :

[1]. Login Blogger

[2]. Klik Rancangan kemudian Edit HTML lalu cari kode ]]></b:skin>

[3]. Copas script berikut dan letakkan di atas kode ]]></b:skin>; tadi :
</*----------------
Beautiful Slide Out Navigation
-------------------------------*/>

.headerfixed
{
width:600px;
height:56px;
position:absolute;
top:50%;
left:10px;
background:#fff url(title.png) no-repeat top left;
}
ul#navixed {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navixed li {
width: 103px;
display:inline;
float:left;
}
ul#navixed li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#000;
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#navixed li a:hover{
background-color:#000;
}
ul#navixed li a span{
letter-spacing:2px;
font-size:11px;
color:#FFF;

}
ul#navixed .home a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhllibTcHQgY8G5yQ-udMdftm-dqyXivlnh0m8_kxnkHtg5a6bpTqARKqFFAs5oMHE5f_ESIYUWHgC5jqidQrHTajQDPGNxyqy4K3XCvfhyphenhyphenG2RAxfSkHBPB8bv5nCgSvbDmWBDrBvpeSt4/s1600/home.png);
}
ul#navixed .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvMv8NSsf93K1Am9Uu2A8eaBfyWKrC4auALVRveXWqX2RRcxwdxXu9asryh7sIdsew3XPY5Lq_2MlmCx4omP6Og9fmyk-fEhJDIUQvKE8VQrdFRRuRtvMjkrE7PzH0i8-HdpaBbix2qdI/s1600/id_card.png);
}
ul#navixed .search a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixYS_fxvlrqBrtnxDjyjJGW2WyEiuVNM9Cl9Bxm45pZ2XIPqN_KPDEYucRm_jzV16aqLHzd7cP6OD0-dYkveF3tELjX2YWjiG2hD2Rq_XCZJvamD8zBs7eC3P6prg5ofYmsxY8fEDIiYU/s1600/search.png);
}
ul#navixed .podcasts a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Tn_jopWrkWda7rxvNLl9cCxvTJzt6c4R-kgZkUVxSPFLPJPuTWjOCz43NZBoLyoE5pNaT0dh4LccEHXViOXViO485uR79r_Td3lt1Smd8X9fLHPaIZwGQ3ks05lZUv46_FFb1aOCCpc/s1600/ipod.png);
}
ul#navixed .rssfeed a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeG2J9-Z3Q8RTNLWL0-umWz8GG2-0KIzsInpbawpiFC34x2UTdE_xtBVjhFvItUepNKiS5qvkrrmeZgwzaykHohoaGhCP8rEnA7cvNL93BKNuNPmiFkOkcU3RjFMb9DWjHACVqETJHC6U/s1600/rss.png);
}
ul#navixed .photos a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJy6xVaBUniBalQGlSXt92J7JW4fJNUHjBqoIbMtMmcM3oeFtiuH5m12kjYKFFNRv7CziZLqmcoSFTOHLODdvwv99Qs2QXNs7Je4nZsNTfvYEDRgXLTd-b9FDv8b7jecgFRZnCtThWj_Y/s1600/camera.png);
}
ul#navixed .contact a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-KSfe3L4Fkn8VrmLz-Av6U8nCHIjoUdnYubI9SfUhwsMAt58QFXMR-mhnOU0wmSlOm-vdzEem_-gqOoT_wsWSZsAo5Wnynr4lyHvJf-iJDc3uCBXKltUziq9_r3Rxs9L3OyE_Lij1AEA/s1600/mail.png);
}

[4]. Kemudian cari kode </head> dan letakkan script berikut ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script src='http://kangdadang.googlecode.com/files/jcolor.js'/>
<script type='text/javascript'>
$(function() {
var d=300;
$('#navixed a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navixed > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

[5]. Terakhir, cari kode </body> dan letakkan script berikut ini di atas kode </body> :

<ul id='navixed'>
<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>




Bagaimana, mudah kah cara membuat Slide Out Navigation..??? Yakin deh Anda semua pasti bisa membuat SLide Out Navigation seperti yang saya terapkan di blog saya.

Selamat mencoba yaa dan semoga bermanfaat..