Kali ini D-G Blog akan update postingan mengenai menu, dan menu kali ini menggunakan css. Bagi kalian yang bosan dengan menu yang biasa aja, kalian harus mencoba menu bagus , keren dan luar biasa berikut.
Kelebihan:
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://zonnacyber.blogspot.com/ - Start -->
<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://zonnacyber.blogspot.com/ /atom.xml" rel="http://wizyuloverz.blogspot.com">RSS Feed</a></li>
<li class="facebook"><a target="_blank"href=" http://zonnacyber.blogspot.com/ ">Facebook</a></li>
<li class="twitter"><a target="_blank"href=" http://zonnacyber.blogspot.com/ ">Twitter</a></li>
<li class="g-mail a"><a target="_blank"href=" http://zonnacyber.blogspot.com/ ">Google</a>
<li class="y-mail a"><a target="_blank"href="https://www.Yahoo.com/bookmarks/">Yahoo</a>
<li class="youtube a"><a target="_blank" href=" http://zonnacyber.blogspot.com/ ">YouTube</a></li>
</li>
</li></ul>
<!-- Widget - http://davidgunawan123.blogspot.com - End-->
Kode kode yang saya beri warna merah, itu berarti diubah menjadi link yang kalian inginkan
Kode kode yang saya beri warna hijau, itu adalah link gambar facebook, twitter, dll dan bisa kalian ganti sesuai keinginan kalian.
Jika kalian ingin langsung menaruhnya di bagian HTML juga bisa, namun tidak saya sertakan di post ini, carilah ide pribadi karena saya agak sibuk mengenai pelajaran sekolah jadi saya kasih yang simple dan mudah saja.
0 komentar
Berkomentarlah dengan Bahasa yang Relevan dan Sopan.. #ThinkHIGH! ^_^