Membuat Menu Sidebar Melayang dengan Efek Jquery Keren
1. Masuk ke dashboard blogger > Klik Rancangan Template > Klik Edit HTML
2. Cari Kode ]]></b:skin> agar lebih mudah gunakan CTRL+F, lalu letakkan atau pastekan kode berikut tepat diatas kode ]]></b:skin>
/* Starts Menu Sideabr Jquery melayang by kampoengunik.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgReHFmDCrJ93AbP9sK1HkNEbvWeoff_LEHa4UGoW4jGomi1QdEagw-a59fXNjh20gfQ7ZQUMzntfglQ_iuG2kxTM1O3WtObhGm5hnaXJbwptvwMIFbIKYU-kRk6JeBqJj9q7wAOOKtoeY/s1600/home.png);
}
ul#navigation .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidR-Bpkb7ZCLw-45Z_edBF09iYJWMRUsFAJurOO1shvH3J_jz_3MPdpP0e63o4yg8odZKHYdBun-xOSFWuLjocJWizgv3AJrXHbk3Bd45uS-NL0bWuZJE-81X96zTbIoPgtLf8_Yq7F9g/s1600/konco.png);
}
ul#navigation .rss a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhDBqzYoRATx3OHNfn6z2m2gciGHn0njROoGeATdwHTkCGGmiDe_ifKXd2IvS95tCD-rQd5YhOfwh2SCyC6ojjQ-wGiESbHTPh5AkEX7LDyjxtNVQXCkTxtVDa85KLgb8aE6HffLbMp04/s1600/rss.png);
}
ul#navigation .mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCtWKlQpykY1zLxQLrun0WVbreCrFMDg9q7XcbAqZuvwU3YOoStHm7rXuqitl47rh-qrhxlglHOBSctwdFiGX8MQzG0yP3hVqpHntKlSliGfcP2TQJFTEIQHRl7sJwSNGEvc2ZCm77bSM/s1600/mail_receive.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvh8sqvDhuoLBJzn9EXgDCrfd6ygIOipceoN54Mr0y7WO4XFLSlV7OHKFH-28ufN6_1i56XNJBlVqZ8zw5GkBdiH53LB06s2GVhdyP_f6V6AufCJ2Hla0rn_A7NNw-g9T_Eky3X9hSohs/s1600/about.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEk2KmqnXbbV8Jx9QQCkfqQtAZ0EXW8830b37auMRFus2FQBYCzVflLcEc7v7AtkGeuJBtMW03L6SAj_rCHpI0ZCH2slbuZdxitO6FwWB9xhPhWfjwNFRYz6pWg0dDPXH7Zhe2lIaY52s/s1600/twitter.jpg);
}
ul#navigation .youtube a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUcnEGk_m6pd-H4Q_ofCy0qBNCzO_rUKuropQttz2iE5myt32WbUXLEFvXxcH_Ew3FsQebD5jqeL6byx-LK1KepGWhKisBDK_ZjqGElICn6ONx2Q8dkalgmvIJ-IB-pQO30XCrRFwbgCY/s1600/You+Tube.png);
}
ul#navigation .googleplus a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-p7FDLBPFG48l2PMHItbe8O_TTjOaxDg_Jv2DtjFRsndHaJmGsdl6hpN7j21CPTNzTHKlV7A5ApVSnGzvh1z1wmjx79vwGxL63fkgB6GphaYptB4L-8KDhqaHWPtTkBS4nN42ykcK0c/s1600/google+plus+circle.jpeg);
}
ul#navigation .yahoo a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdVNkd2NUEbQIXe4CnNnnFKVKCyQQhXK71neEweukfQ26Jz8jLsiyO9U04AOqtfMxoxZF3W9WbjF1sVqj9R8J_ZfvshuH5RSF9v6nTUZleobEfoUzHPAHRGdE3JfY3HGbxC_ow6rJjNeI/s1600/yahoo+icon.jpg);
}
/* End Menu Sideabr Jquery melayang by kampoengunik.blogspot.com End*/
3. Cari kode </body> agar lebih mudah gunakan CTRL+F, lalu letakkan atau pastekan kode berikut tepat 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>
4. Klik Simpan Template
5. Selanjutnya klik Rancangan lagi, tepatnya pada Elemen Laman, Tambah Widget / Gadget Baru, pilih HTML / JavaScript, lalu masukkan kode berikut:
<div class='header'></div>
<div class='scroll'></div>
<ul id='navigation'>
<li class='home'><a href='http://kampoengunik.blogspot.com/' title='Home'></a></li>
<li class='about'><a href='http://kampoengunik.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/itayuliana88' target='_blank' title='Add Me on facebook'></a></li>
<li class='twitter'><a href='http://twitter.com/ita88' 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/kampungunik' 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>
</ul>
Selesai, sekarang buka blog kamu dan lihat hasilnya, Menu Sidebar dengan Efek Jquery Keren sudah ada diblogmu :p
sumber: andi-techno.blogspot