Cara Membuat Menu Kaleng Di Blog

Minggu, 07 Juli 2013

Cara Membuat Menu Kaleng Di Blog - Pagi hari yang cerah ini saya akan berbagi ilmu kepada anda walaupun scriptnya hasil copyan dari teman saya tapi tidak apa-apalah. Memasang widget ini sangat ringan dan gampang dipasang serta mempunyai bentuk yang lebih elegant atau kreatif. Langsung saja menuju pembicaraan, apabila anda ingin memasang widget ini di blogger anda, anda bisa mengikuti langkah-langkah dibawah ini.

1. Masuk ke blogger.
2. Pilih tata letak.
3. Pilih tambahkan.
4. Cari kode html/javascript.
5. Salin kode dibawah ini.

<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://muhammadagielk.blogspot.com /atom.xml" rel="http://wizyuloverz.blogspot.com">RSS Feed</a></li>
<li class="facebook"><a target="_blank"href="http://muhammadagielk.blogspot.com ">Facebook</a></li>
<li class="twitter"><a target="_blank"href="http://muhammadagielk.blogspot.com ">Twitter</a></li>
<li class="g-mail a"><a target="_blank"href="http://muhammadagielk.blogspot.com ">Google</a>
<li class="y-mail a"><a target="_blank"href="#">Yahoo</a>
<li class="youtube a"><a target="_blank" href="http://muhammadagielk.blogspot.com ">YouTube</a></li>
</li>
</li></ul>

6. Simpan.
Keterangan:
a. Tulisan yang di tandai dengan warna biru, anda bisa menggantinya dengan alamat gambar yang anda sukai.
b. Tulisan yang di tandai dengan warna merah, anda bisa ganti dengan alamat facebook, twitter, google, youtube anda.