selamat datang di king beraksi kali ini saya akan berbagi trik tentang cara
pasang menu horizontol dengan efek keren
langsung saja bagi kamu yang tertarik ikuti langkah berikut untuk memasangnya
berikut adalah lang untuk pasang menu horizontol dengan efek keren
masuk ke blog kamu dan pada halaman dashboard klik more options pada blog yang ingin di pasang menunya (trik di atas)
dan pilih layout dan klik add a gadget dan pilih html/javascript
dan masukkan kode berikut ke dalam kolom content dan klik save
<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
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:#eeeeee;
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=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
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://i1162.photobucket.com/albums/q539/komarking/blogku/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(http://i1162.photobucket.com/albums/q539/komarking/blogku/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(http://i1162.photobucket.com/albums/q539/komarking/blogku/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(http://i1162.photobucket.com/albums/q539/komarking/blogku/google_64x64.png);
}
ul#navigation .e-mail a {
background-image: url(http://i1162.photobucket.com/albums/q539/komarking/blogku/yahoo_64x64.png);
}
</style>
<script src="http://kingtechnologykomar.googlecode.com/files/jquery.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 href="link rss">RSS Feed</a></li>
<li class="facebook"><a href="FACEBOK-PROFILE">Facebook</a></li>
<li class="twitter"><a href="TWITTER-ACCOUNT">Twitter</a></li>
<li class="googlebookmarks"><a href="link goo">Google</a></li>
<li class="e-mail"><a href="YAHOO ACCOUNT">Yahoo!</a></li>
</ul>
Keterangan :
Ganti teks warna biru dengan link rss kamu
ganti teks warna merah dengan lik facebook kamu
ganti teks warna kuning dengan link twitter kamu
ganti teks warna hijau dengan link google atau hasil pencarian google atau bisa di ganti sesuai keinginan kamu
ganti teks warna aqua dengan account yahoo kamu
Tags
Info