kli ini saya akan membuat menu kaleng tersembunyi ya udh jngn banyak bacot langsung aja oke.....

kelebihan :


1. Bersembunyi ketika tidak terkena mouse
2. Selalu mengikuti scrool sepanjang halaman blog
3. Bisa ditaruh gambar.


Keren bukan?
Kalau begitu langsung saja caranya ya
1. Masuk ke www.blogger.com
2. Ke tata letak
3. HTML / Java Script
4. Pastekan kode berikut

<!-- Widget - http://indraahmadrobani.blogspot.com/ - Start --><br /> <br /> <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><br /> <br /> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"> </script><br /> <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><br /> <br /> <ul id="navigation"> <li class="rss"><a target="_blank" href="http://indraahmadrobani.blogspot.com/ /atom.xml" rel="http://indraahmadrobani.blogspot.com/">RSS Feed</a></li> <li class="facebook"><a target="_blank"href=" http://indraahmadrobani.blogspot.com/ ">Facebook</a></li> <li class="twitter"><a target="_blank"href="http://indraahmadrobani.blogspot.com/ ">Twitter</a></li> <li class="g-mail a"><a target="_blank"href=" http://indraahmadrobani.blogspot.com/ ">Google</a><br /> <li class="y-mail a"><a target="_blank"href="https://www.Yahoo.com/bookmarks/">Yahoo</a><br /> <li class="youtube a"><a target="_blank" href=" http://indraahmadrobani.blogspot.com/ ">YouTube</a></li> <br /> <br /> <br /> </li> <br /> <br /> <br /> </li> </ul> <!-- Widget - http://indraahmadrobani.blogspot.com/ - End--> <br /> <br />




Keterangan:
Ganti nama dan url gambar yg di ingin kan
ganti url http://indraahmadrobani.blogspot.com dengan url anda .

Jika artikel ini bermaanfaat silahkan Berkomentar di kotak komentar Sekian Post Dari Saya DRobani

TERIMA KASIH ATAS KUNJUNGANNYA