Untuk Tutorial Kali ini Saya Akan Membahas Cara Membuat Fixed Fade Out Navigation Menu untuk Blogger. Fixed Fade Out Navigation Menu Adalah Menu Navigasi Baru Yang Telah Ditambahkan Perpaduan CSS Dan JQuery Hingga Mempunyai Fungsi Dan Efek Scroll Fade Out Yang Patut Sobat Coba.
Mungkin Para Sobat Blogger Ada Yang Belum Paham Dengan Tutorial Kali ini Bisa Melihat Atau meninjau DEMO Yang Saya Sediakan Dibawah ini.
Untuk Cara Membuatnya Silahkan Sobat Simak Baik Baik Tutorial Dibawah ini.
Mungkin Para Sobat Blogger Ada Yang Belum Paham Dengan Tutorial Kali ini Bisa Melihat Atau meninjau DEMO Yang Saya Sediakan Dibawah ini.
Untuk Cara Membuatnya Silahkan Sobat Simak Baik Baik Tutorial Dibawah ini.
- Silahkan Sobat Sekalian Login Ke Akun Blogger Sobat.
- Masuk Pada Rancangan Lalu Pilih Edit HTML Dan Centang Expand Template Widget.
- Setalah Itu Carilah Kode ]]></b:skin>Pada Template Sobat.
- Silahkan Copas Kode Dibawah ini Dan Taruh Diatas Kode ]]></b:skin> Tadi.
#navix{
height:35px;
border-bottom:1px solid #ddd;
position:fixed;
top:0px;
left:0px;
right:0px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhishjsOIKzLwZzOnliWirFa3V3rYl9WYda4AbIv2W9mlpGBwRqarO1o4nzC8I8gVaOhxHJ5ugmnM4XY2ZNnKWBgubpI9BfY023Z5lMtmi4JnZIFrUrI7lizAZNTCql8N8X_sXSp5BhNRkE/s400/nav.png) repeat-x center left;
z-index:999999;
}
#navix ul{
height:25px;
list-style:none;
margin:6px auto 0px auto;
width:600px;
}
#navix ul li{
display:inline;
float:left;
margin:0px 2px;
}
#navix a{
font-size:11px;
font-weight:bold;
float:left;
padding: 2px 4px;
color:#999;
text-decoration: none;
border:1px solid #ccc;
cursor: pointer;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_o0wWG2N9aXvWeeYUOjlsvPzMi7QukvB2oM-rJ9exCJlCMC4tHOWYZTAc4cu0KzPSXOeM2WhVaL1t22_tgAcmGkMfS5RC3dXc8Qm8F8oZxF8-wUUnKYplg-taX6RDZq-PAw7Nh4EJl5sE/s400/overlay.png) repeat-x center left;
height:16px;
line-height:16px;
}
#navix a:hover{
background:#D9D9DA none;
color: #fff;
}
#navix a.top span, #nav a.bottom span{
float:left;
width:16px;
height:16px;
}
#navix a.top span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKwnEzDapX3tt_pdn0ww6hGriE2-AC5SVCN3tssfqRbad5TFTdtnkApQOYP9bfqLUJPGhlbS4PFXq8oENPSXk6s_vioeh8h984KboUFwHldZiBh12UqYSzBtoRrTi0cnn91FGi12jBCm0v/s400/top.png) no-repeat center center;
}
#navix a.bottom span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU0du-Ny3pxGwLPterMY8NmOSHmutBF6j37cn7RibL-E8fzwRbTi0fKdaz_G8fbznAeFhDq6VxA_PJhpxwtfV9etUWMJp7JhBUQBe7tSgEfXRhu3XARYq6zHiP4qAhnmgp-JEqSSBObQt8/s400/bottom.png) no-repeat center center;
}
#navix ul li.search{
float:right;
}
#navix input[type="text"]{
float:left;
border:1px solid #ccc;
margin:0px 1px 0px 50px;
padding:2px 2px 2px 2px;
}
input.searchbutton{
border:1px solid #ccc;
padding:1px;
cursor:pointer;
width:30px;
height:22px;
background:#E8E9EA url(http://tympanus.net/Tutorials/FixedFadeOutMenu/images/search.png) no-repeat center center;
}
input.searchbutton:hover{
background-color:#D9D9DA;
}
- Selanjutnya Carilah Kode </head> Dan Taruh Juga Kode Dibawah ini Tepat Diatasnya.
<script type="text/javascript" src="http://filiex.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#navix').stop().animate({'opacity':'0.2'},400);
else
$('#navix').stop().animate({'opacity':'1'},400);
});
$('#navix').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#navix').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#navix').stop().animate({'opacity':'0.2'},400);
}
}
);
});
</script>
- Terakhir Sobat Cari Kode <body> Dan Taruh Kode Berikut Tepat Dibawahnya.
<div id="navix">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
<li><a>Link 4</a></li>
<li><a>Link 5</a></li>
<li><a>Link 6</a></li>
<li class="search">
<input type="text"/>
<input class="searchbutton" type="submit" value=""/>
</li>
</ul>
</div>
- Bila Langkah Langkah Diatas Sudah Beres Silahkan Sobat Pratinjau Dulu Hasilnya.
- Bila Fixed Fade Out Navigation Menu Sudah Oke Silahkan Sobat Simpan Template Sobat.
- Selesai
Cukup Sekian Untuk Tutorial Blogger Kali ini Dan Silahkan Berkunjung Kembali Untuk Mendapatkan Update Tutorial Blogger Terbaru Dari Filiex.
No comments:
Post a Comment