Minggu, 26 Juni 2011

Buat Menu Melayang

Hai para Blogger mania kali ini saya akan memberikan tips untuk kamu jika ingin membuat menu melayang di blog kamu ,menu yang selalu mengikuti layar kita bergerak.langsung aja cekidot,,,,
kamu tinggal mengopy paste coding dibawah ini :


Langkah Awal,buka blogger kamu,kemudian Rancangan => Edit HTML
lalu masukan CSS dibawah ini ke template kamu,Kemudian kamu cari kode  ]]></b:skin> dan paste diatas code tersebut :

#floatMenu {
position:absolute;

top:150px;

left:50%;

margin-left:235px;

width:80px;}

#floatMenu ul {list-style-type: none;}

#floatMenu ul li a {

display:block;


background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent;

background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b));

border:1px solid #999;

border-left:6px solid #999;

text-decoration:none;

color:#ccc;

padding:5px 5px 5px 25px;

width:80px;

-webkit-transition: all 0.6s ease-out;


box-shadow: #333 0px 0px 10px;

-moz-box-shadow: #333 0px 0px 10px;

-webkit-box-shadow: #333 0px 0px 10px;

}

#floatMenu ul li a:hover {

color:#fff;

background-color:#333333;

border-right:6px solid #999;

width:150px;


-moz-border-radius-topleft: 15px;

-moz-border-radius-topright: 0px;

-webkit-border-top-left-radius: 15px;

-webkit-border-top-right-radius: 0px;

}

#floatMenu ul.menu1 li a:hover {border-color:#09f;}


Kemudian Langkah Kedua, Selanjutnya kamu masukan script di bawah ini tepat di bawah kode ]]></b:skin>


<script language="javascript" src="https://sites.google.com/site/djogzs/js/jquery_mini.js"></script>
<script language="javascript" src="https://sites.google.com/site/djogzs/js/jquery.dimensions.js"></script>
<script language="javascript">
var name = "#floatMenu";
var menuYloc = null;

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

Dan Langkah yang terakhir, buka halaman blog kamu,kemudian buka rancangan,tambahkan gadget, tambahkan HTML/JAVA SCRIPT,lalu paste kan Code dibawah ini halaman HTML/JAVASCRIPT tadi :

<div id="floatMenu">
<ul class="menu1">
<li><a href="http://www.e-download-anything.tk/search/label/software"> Software </a></li>
<li><a href="http://www.e-download-anything.tk/search/label/Game"> Game </a></li>
<li><a href="http://www.e-download-anything.tk/search/label/Anime"> Anime </a></li>
<li><a href="http://www.e-download-anything.tk/search/label/Tips dan Trick> Tips&Trick </a></li>
<li><a href='http://www.e-download-anything.tk/' onclick='mgjs.gotop();return false;' onclick="return false;"> Back to top </a></li>
</ul>
</div>

Note:
-Yang berwarna merah Ganti dengan Url kamu dan yang berwana hijau ganti juga dengan alamat URL kamu.

Tidak ada komentar:

Posting Komentar