menu sidebarr melayang

selamat mlm para sobat blogger kini saya akan memberikan cara membuat menu sidebarr
melayang di blog.
ikutilah langkah-langkah sebagai berikut ini

1. masuk ke dashboard blogger >klik rancangan temlate>klik edit HTML
2. cari kode ]]></b:skin> Agar lebih cpat mencari nya klik tombol CTRL+F
lalu pastekan kode berikut ini tepat diatas kode]]></b:skin>

/* Starts Menu Sideabr Jquery melayang by lusytutorial 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/AVvXsEgelP3CaU7QsLKYdEa4KiUR52PtJDV2uDekPTD_2Xfbfq7j_LkGYBelR_Tm6fdwFK0If35MdP52N8FHKbHxP2Ak_fNROKauk1t5tX0Ou4liotZpmJo44tWKSzlJCf8ZXy1EBF2zL05C55Y/s1600/home.png);
}
ul#navigation .about a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNxB-AcEfLs-jtSPz67AF6WIqkvMiKKGYDwIAL50HtGFJCBaodqEpzvrmn1logNZRp5HHBc4maNdkvSuZmY1P_1W8CLECwSpTb1oOfFXbASufwXjpsbqqJwLyJR8i6RXMnDHM0Zpl1hR8/s1600/konco.png);
}
ul#navigation .rss a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzfS2vVI8tdCxdaFdXwUbJ0SF9ALYla6JW7eyLb5FEPq-jgI8H0GoD9btWKf9WTjbYCl0knVDqllKuKzuW8Bg1TJjcjHoUplBfBGylYK6_I-rnz66MrmqQe94HD1YZNi-X16RdIVZXFqw/s1600/rss.png);
}
ul#navigation .mail a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5RUg7jWlQrdjUnIdSr7WldItVqLXnUSZ6CqWFT6QMzCmz_EHeiOsPG20Ssz5_sJMChWxKCGH7KIyLNLKINn3VXh6tOW_LkrbZ5FOOVAw6mQTZMAnOgPtkCSiu_8kBpQ9MhsMwXxDfIbs/s1600/mail_receive.png);
}
ul#navigation .facebook a   {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuV44seYqaVeeZLM445xB2q1Pa7772Ptxwk0iKNjJ_z5vozA_Boz4BkmeRnKbghH1lJ65krXHXBpTr3ks9LZlfVe9FzGbTr3jU_BmPvBE_faQ2jkL1PPu9-_7u8PUjGke5Wh9LxrouQdQ/s1600/about.png);
}
ul#navigation .twitter a     {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj76umqmlp2UrYpCfVSBBmY5UrP8oJIEDpXqaoW0zuJHyihcuJnSWUPWfHmDoYdDWj9e-Yho7nvgantdMDQG4o7MaK9XkHg6kmIv1PWHJ5a5wNjuuzYumNE0-cZIbDlhi5AbXcE11kIUxQ/s1600/twitter.jpg);
}
ul#navigation .youtube a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij6LkiAd_Ypj9O7aeAGfCfd31M8CjE9YwfEh1rMXvCNrwmioATCzmJKkyESVyFbbG21_DX_MhweyARr-pyZYaNrmU_3T9i-c5GPwYBcPub7Q5t-rqJL4tHm9mgZzLAeOQj5E0PDpnzYwk/s1600/You+Tube.png);
}
ul#navigation .googleplus a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGFU7ePxmJIKWSVH-FQUqceFN5eoCtPcey4FaxBLE09icL2yz4ZdlPV8igyORbso2LfcgAOPKOhT5E2aaNEEaiA-dPJceS2-KAFCrFicbwC5UeqCZkVCfY28erB1NfTmnri7CBFs7wezM/s1600/google+plus+circle.jpeg);
}
ul#navigation .yahoo a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtyy-VNvvoAbMTzY9iyW19SqfJhNK5fEENtFQsloLQVW2D1DtQov88MFFtYY84eV4dW5UA0G3K_5cpEl7ENx4TA_C6D-TMPHVhuuo0vd22EZoUtQ8mo2c6y29jNKQEbDi2vC42121FVQg/s1600/yahoo+icon.jpg);
}
/* End Menu Sideabr Jquery melayang by andi-techno.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() {
$(&#39;#navigation a&#39;).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},1000);
$(&#39;#navigation &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-2px&#39;},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({&#39;marginLeft&#39;:&#39;-85px&#39;},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://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>
</ul>

#Ganti link yang saya beri warna kuning dengan link kamu, Lalu klik simpan

 Demikian lah langkah-langkah nya Sobat cukup mudah kan 

semoga tutorialni berguna buat sobat blogger skalian