
Preview hasilnya bisa kalian lihat disini
Jika kalian tertarik memasangnya di blog silahkan ikuti cara dibawah ini :
1. Log in blog kalian
2. Masuk pada template > edit html
3. Beri tanda ceklist pada expand widget
4. Cari kode ]]></b:skin> agar lebih mudah tekan ctrl+F lalu masukkan kode ]]></b:skin>
5. Letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tadi :
/* Starts Menu Sideabr Jquery melayang by andi-techno.blogspot.com Starts*/
ul#navigation {
position:fixed;
margin: 0px;
padding: 0px;
top: 55px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 50px;
background-color: #ffffff;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #fff;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
opacity: 0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
ul#navigation .home a{
background-image: url(http://1.bp.blogspot.com/-yQv_roSKv8E/TisG5SFV0QI/AAAAAAAAAiQ/MKIVmJFjkeg/s1600/home.png);
}
ul#navigation .about a {
background-image: url(http://2.bp.blogspot.com/-_i_eNod95V0/TisH8CgzYxI/AAAAAAAAAiU/hvcBZ5aph60/s1600/konco.png);
}
ul#navigation .rss a {
background-image: url(http://2.bp.blogspot.com/-Y-ahpoScsUg/TqqBitCylVI/AAAAAAAABFI/_x42LEbrCaM/s1600/rss.png);
}
ul#navigation .mail a {
background-image: url(http://4.bp.blogspot.com/-E9ZYbJ1M2Js/TqqB4tPrxLI/AAAAAAAABFQ/LjU92QTcYuA/s1600/mail_receive.png);
}
ul#navigation .facebook a {
background-image: url(http://4.bp.blogspot.com/-tR0PjYeb8bo/TisII3maw1I/AAAAAAAAAiY/Mv8dPW3lLA8/s1600/about.png);
}
ul#navigation .twitter a {
background-image: url(http://4.bp.blogspot.com/-gJYAgB6kzy4/TpZaAjJhIrI/AAAAAAAABCY/HuIlgpVfuxg/s1600/twitter.jpg);
}
ul#navigation .youtube a {
background-image: url(http://2.bp.blogspot.com/-stfCxFhmWXQ/Tqq_jvRjzpI/AAAAAAAABFg/FI4CyOjm0BA/s1600/You+Tube.png);
}
ul#navigation .googleplus a {
background-image: url(http://1.bp.blogspot.com/-zFUXY-R8bNI/Tqq_KnzoXQI/AAAAAAAABFY/EEXkFsaYpX8/s1600/google+plus+circle.jpeg);
}
ul#navigation .yahoo a {
background-image: url(http://4.bp.blogspot.com/-WW-omGt9FnA/TpZa3RUMlMI/AAAAAAAABCw/QUmkxsJoonY/s1600/yahoo+icon.jpg);
}
/* End Menu Sideabr Jquery melayang by andi-techno.blogspot.com End*/
6. Cari kode </body> lalu letakkan kode ini diatas kode </body> tadi :
<script src=’http://x-gen.googlecode.com/files/x-gen-jquery.js’ type=’text/javascript’/>
<script type=’text/javascript’>
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>
7. Masuk ke menu tata letak > tambah widget > html/javascript
8. Masukkan kode dibawah ini kedalam kolom konten :
<div class=’header’></div>
<div class=’scroll’></div>
<ul id=’navigation’>
<li class=’home’><a href=’http://andi-techno.blogspot.com/’ title=’Home’></a></li>
<li class=’about’><a href=’http://andi-techno.blogspot.com‘ target=’_blank’ title=’About us’></a></li>
<li class=’rss ‘><a href=’http://feeds.feedburner.com/’ target=’_blank’ title=’Rss feed’></a></li>
<li class=’mail’><a href=’http://mail.google.com’ target=’_blank’ title=’Contact Me’></a></li>
<li class=’facebook’><a href=’http://fb.com/andi.techno‘ target=’_blank’ title=’Add Me on facebook’></a></li>
<li class=’twitter’><a href=’http://twitter.com/Andi_Xgen‘ target=’_blank’ title=’Follow us on twitter’></a></li>
<li class=’youtube ‘><a href=’http://youtube.com/’ target=’_blank’ title=’Follow Me on Youtube’></a></li>
<li class=’googleplus ‘><a href=’https://gplus.to/xgen‘ target=’_blank’ title=’Follow Me on google plus’></a></li>
<li class=’yahoo’><a href=’http://yahoo.com/’ target=’_blank’ title=’YM With Me’></a></li>
Nb :ganti tulisan berwarna merah dengan link kalian masing-masing
thanks ya gan infonya…
bgus ne…
dtunggu ne follow backY….
ne blog q.
http://thephatar.blogspot.com
thanks kunjungannya gan..
terimakasih banyak gan atas infonya!!
hehehe
numpang tinggalkan jejak ya gan??
PREL-BLOG.BLOGSPOT.COM
@ enrico riski
iya gan sama-sama
boleh kok klo ninggal jejak disini
thanks info'x gan, bermanfaat sekali bagi saya ..
@ KING HERBAL
ok gan,sama-sama
Berhasil gan, sukses buat blognya 😀
Visit Back on : farukparkerla.blogspot.com
@ Faruk Parker Rebelz
okey gan,ntar tak visit back
makasih gan info nya….:D
@ Iwan Effendy
iya,sama-sama gan^^
maksi atas infonya bos
@wayanfais
@Wayan fais
sama-sama bro