Cara Membuat Menu Melayang Dengan Icon - ANAK TANGERANG,hallo sobat apa kabar semoga semua dalam keadaan baik.Pada kesempatan ini saya akan berbagi bagaimana cara membuat menu melayang dengan icon (fixed) lihat gambar diatas.
Baiklah saya rasa sahabat sudah pada mengerti maksud apa yang saya sampaikan di sini,kalau gitu langsung saja kita langkah pemasangan nya berikut ini :
1.Login blogger
2.masuk tata letak / tambah widget baru
3.Pilih tata letak Java script
4.Masukan kode dibawah ini kemudian save..!!!
<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width: 993px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#000000;
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.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}
ul#navigation li a:hover{
background-color:#BDBDBD;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#FFFFFF;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/RSS.png);
}
ul#navigation .facebook a {
background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Facebook.png);
}
ul#navigation .twitter a {
background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Twitter.png);
}
ul#navigation .g-mail a{
background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Google.png);
}
ul#navigation .y-mail a{
background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/Yahoo.png);
}
ul#navigation .youtube a{
background-image: url(http://i1123.photobucket.com/albums/l546/wizyuloverz/YouTube.png);
}
</style>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
<ul id="navigation">
<li class="rss"><a target="_blank" href="http://www.cobainfo.com/" rel="http://www.cobainfo.com/">RSS Feed</a></li>
<li class="facebook"><a target="_blank"href="http://www.cobainfo.com/">Facebook</a></li>
<li class="twitter"><a target="_blank"href=" http://www.cobainfo.com/">Twitter</a></li>
<li class="g-mail a"><a target="_blank"href="http://www.cobainfo.com/">Google</a>
<li class="y-mail a"><a target="_blank"href="http://www.cobainfo.com/">Yahoo</a>
<li class="youtube a"><a target="_blank" href=" http://www.cobainfo.com/">YouTube</a></li>
</li>
</li></ul>
