Menu ini di buat oleh Codrops. Seperti yang saya bilang di atas menu ini sudah memiliki tombol top dan bottom, Untuk lebih jelasnya tentang Fixed Fade Out Menu silahkan Anda lihat demonya terlebih dahulu!
Cara Menginstal Fixed Fade Out Menu di Blogger
1. Pergi ke akun Blogger.
2. Pada Dasbor klick Template ➨ Edit HTML.
3. Centang Expand Template Widget ➨ Backup template Anda.
4. Sekarang temukan kode ]]></b:skin> (bila kesulitan mencarinya coba klick DISINI)
5. Lalu tambahkan kode CSS berikut tepat di atas kode 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/AVvXsEgkKQNq-VicPf44S7Q6fwq4dtLepJVGRv6ve713gr992OtM3VPNkayxPBWjzwhkAFzvzCwXbiXkiSFZnX1S7cZzwER_H_OknKRwIvzTS_XeyrRt6ZvgR9jiF572EWx-g2wgJuqP3R-UA7fo/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/AVvXsEgkk5voghwX267fxbdNSdceN7OjIsiQ-KMmVQrjlUoa5CMR-yuKhBC6hgOdDC_FEYCryY5woyCcqCdZZ50S6izgxLhS3Xe7BI-8iVhbHdYlFetSFlee_D9it8fIxBuMFwrMZeYqBQ86XCP5/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/AVvXsEgFnfcEeVCshvfi2ufKvwfCwLXA0ZaUA55DxCRa51ZkZAfsbaKObIE2F-BqCrV3yGgjDKok9hA9Os8Sod4Pfkz0O-VmE4MIeTQP0LSAXD6EIgQ9w-FHSQ9uUqtxq3ki0OnnjqLQDo0dLqQQ/s400/top.png) no-repeat center center;
}
#navix a.bottom span{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqMgFKEH1cxMFAhoCnYwcsDvZkkqWnfQdiGESatbgVMdQybaWV0qUIbDOboSRfGJ-Err8tJLlqvOtYvWk828nQXsamL2OQ6py3xP_y4qbn_7itrtX54f9EBbGWQ_NDmE9MeGoNfVhRf9Em/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzCSCOEaz7YCyPDwyQUHQ8zwcI1Cr-73y8guu0A-5a4ZnUMAqm_fsDXncVvIwBZ5U3426sVEzrmwz-AQ1eP9rSNRNEMtMu1fCAIFLI_UpaaahrIyMvbRVl10AsX-ev_fvVinoeikG_Ow/s1600/otowebsite.search.png) no-repeat center center;
}
input.searchbutton:hover{
background-color:#D9D9DA;
}6. Sekarang temukan kode </head> dan letakkan kode berikut tepat di atasnya.
<script type="text/javascript" src="http://otowebsite.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>7. Selanjutnya temukan kode <body> dan copy kode berikut tepat di atasnya.
<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 href=’YOUR_LINK_HERE‘>Link 1</a></li> <li><a href=’YOUR_LINK_HERE‘>Link 2</a></li> <li><a href=’YOUR_LINK_HERE‘>Link 3</a></li> <li><a href=’YOUR_LINK_HERE‘>Link 4</a></li> <li><a href=’YOUR_LINK_HERE‘>Link 5</a></li> <li><a href=’YOUR_LINK_HERE‘>Link 6</a></li> <li class="search"> <input type="text"/> <input class="searchbutton" type="submit" value=""/> </li> </ul> </div>
Keterangan : Silahkan lakukan perubahan pada kode di atas, seperti memasang link/url Anda.
8. Simpan template.
Ada Kesulitan ?!?
Jika Anda mengalami kesulitan dalam Instalasi Fixed Fade Out Menu jangan sungkan untuk bertanya, saya akan membantu Anda, karna Saya ada disini!
Posting Komentar Blogger Disqus
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>
Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.
Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.
Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
Konversi Kode di Sini! Daftar Member Aktif