Ira Chan's: Cara Membuat Slide Out Navigation pada Blogger Agar Menarik

Hallo, yuk kita buat menu slide out navigation yang keren buat blogger kamu

Kalo tertarik yuk ikutin caranya berikut :

Login blogger
Rancangan, Edit Html, Cari kode ]]></b:skin>
Dan Simpan kode berikut diatasnya :

/*—————- 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/AVvXsEhslJxix9ZYMA_oSbiXVhF9sie3RBxP8UUTS5IlMzK6_Rt4hGHHu4W9KljVVWyRjNV7bDllIxMREX_GQPmhN4MQgyhpA1ESX7qJS_-kvkN-SHVb-4iwlU-lC0b54apfS1bwisAsmEEwyV0/s1600/home.png);
}
ul#navixed .about a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9WyRY_B8rCQgj1GCR9tj6hICSoHKs8PRuv4gMBIQPk3AUrZdqt9vWF0EM-Vgwg36aVntagFfQ_KGeH4w7BQygdvoDHk0gtaRdPb5NmbE1BFy2Wzsl_5GYQuQOKlRIBAjUygVuR23ILZY/s1600/id_card.png);
}
ul#navixed .search a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUxC8jqk8Hl_BLt_ifs8bcHTjEiKUhPdHNVoLkwkylUjajalejDPtRrPGXgAyApnFea6-YnTOSI4mMEmWKtNi6n0TzzMQUJhu1MXa6f0Z7pbhkRDdoNk0-3LbTXol20hGP3xhlbdyEaxQ/s1600/search.png);
}
ul#navixed .podcasts a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNezHlzCcrvaWE3v7urHsi_JA3gT4ORVFAjq9bR0KCkJtJBToYnt0Ijp89rNLPNFwad5FWhQRzrws8B3xJVIYZACLlMIJOi-WWofXE4CoNSCqiO7mL90l-bvFDUS4IZW8fbZHripGZztk/s1600/ipod.png);
}
ul#navixed .rssfeed a   {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnvdAQcs2efmwwHwd4cR9gNiH0gaP9rCpp38Lv8UVuT0gKAOW1Tj7RmXW-7bIxVzs1c_CfNn5vmNJYwujyrv-1kOjqNIJG1ZyctSSFwyXUp9qkFHgwatkaMp2LDdktuQCFW5igw-v5OX4/s1600/rss.png);
}
ul#navixed .photos a     {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWt-SMbOqza3hrqewOPutFYYdsgqnSwBzySb44bmXoBaYU9GVTCAMryLanmF4T_pav-iyL-suHgGjO1KlN8Eebo71bDDAQSQ2qrWK4NwguDqBHS0uNMpvYhaJj-iH0Zg87y6Z8ixYTtTs/s1600/camera.png);
}
ul#navixed .contact a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw-l2FEUFxw14lHU2QlSmVfnqGARFUBTNjZKP3iD8yoUWm5JZtL2_6-rPnQItKccV5lKbyqd5-g-X2k5yc7ev9bQ0njSu8P6QzcXQH0Xg5ABG6fZwTwRWuUt-TPav_4cAsB4tJmh_DbPc/s1600/mail.png);
}

dan simpan script ini di atas kode </head> :

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’/>
<script src=’http://asenkdotcom.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>

terakhir simpan cara pemanggilannya 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>

selesai… jangan lupa simpan template ya, selamat mencoba

Bookmark this post: