Cara Membuat Menu Floating Pada Blogger

Menu Float adalah menu yang dapat berjalan naik turun sesuai pergerakan mouse atau scroll. yah menu ini juga hampir sama dengan horizontal menu namun bentuknya saja yang berbeda. berikut cara2nya :

1. Masuk ke Blogger.com

2. Pilih Rancangan --> Edit HTML --> Backup template terlebih dahulu Lihat disini, setelah itu centang expand template widget.

3. Cari kode ini ]]></b:skin> gunakan ctrl+f untuk mempermudah pencarian. Lalu copas kode css dibawah ini dan letakan sebelum kode ]]></b:skin> tadi.

 

#floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:200px;
}
#floatMenu ul {
margin-bottom:20px;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
}
#floatMenu ul.menu1 li a:hover {
border-color:#09f;
}
#floatMenu ul.menu2 li a:hover {
border-color:#9f0;
}
#floatMenu ul.menu3 li a:hover {
border-color:#f09;
}

 

 

4. Masih kode ini ]]></b:skin> gunakan ctrl+f untuk mempermudah pencarian. Lalu copas kode css dibawah ini dan letakan SESUDAH/DIBAWAH kode ]]></b:skin> tadi.

 

<script language='javascript' src='http://files-teckzest.bravehost.com/jquery.js'></script>
<script language='javascript' src='http://files-teckzest.bravehost.com/jquery.dimensions.js'></script>
<script language='javascript'>
$(document).ready(function(){
// code will go here
});

$(document).ready(function(){
$(window).scroll(function () {
// code will go here
});
});
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
// code will go here
});
});
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});

</script> 

Ganti durasi dengan yang lebih lama , 1000 atau 5000 misalnya.

 

5. Save Template, kemudian Klik Lagi Elemen Laman--> Tambah Gadget --> HTML/Javascript dan masukan kode dibawah ini.

 

<div id="floatMenu" style="top: 350px; ">   <ul class="menu1"><li><a href="hzndi.blogspot.com" onclick="return false;"> Home </a></li>   </ul>  

<ul class="menu2"> <li><a href="http://hzndi.blogspot.com/search/label/Computer%20Tips%20and%20Tricks" onclick="return false;"> Computer Tricks </a></li>    

<li><a href="http://hzndi.blogspot.com/search/label/Blogger" onclick="return false;"> Blogger </a></li>
   
<li><a href="http://hzndi.blogspot.com/search/label/Link Exchange" onclick="return false;"> Tukar Link </a></li>    

 

</ul>   <ul class="menu3">
<li><a href="http://hzndi.blogspot.com/search/label/Bukut Tamu" onclick="return false;"> Buku Tamu</a></li>   </ul> </div>

7. Ganti tulisan yang berwarna merah dengan alamat URL Blog kamu dan nama yang ingin ditampilkan dalam menu kemudian simpan template.

Postingan Terkait:

Posted in: Blogger