Membuat Menu Sidebar Melayang dengan Efek Jquery Lebih Menarik

Tutorial Belajar Blog | Trik Blog | Tips Blog - Sekedar Berbagi Tutorial Seputar Blogging , Trik Cara Membuat Menu Sidebar Melayang dengan Efek Jquery, untuk Conoth bisa di lihat tampilan scrensot blog ini.

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 tutorialbelajarblogger.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/AVvXsEhFR7h-DXhCMNQt8CMLJz6xrQ7FYx9JDeYwHO7Rk5UShpkW9PtVJvoqjQ8EpfFFfvbcEsgeTW4wAStkQh5ztKS65_HZyRN18ulu-AnDyZqOdFSr44Ds_FifMQe7XJP3skMknigIVe7z4Ks/s1600/home.png);
}
ul#navigation .about a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeaWfwbayp6UZpJEO4s_xM9xD9Z6oo6pNFsAoNuFIqI9ZItsWL6RzaYO4SsbV16yNtCXKnZVe3nfbawjPtR_EwG41DuOZTDP9QNOTYBqCCcPcYVOeojqRvlKcE_gFxqFb6twy5w3NZvVw/s1600/konco.png);
}
ul#navigation .rss a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAHzLfoqUadM9x0rCRsngug2i8EWRMFT9spqOe_gzuxxWU6e_EfppIEpQC02AmgE_Pk4S1lPpksRZjgCOCb3ucDt_c9_rRWaSbtG_R_IixBhtD7noSj770Fsp4ZCzlaRCuFoErJUs9C-0/s1600/rss.png);
}
ul#navigation .mail a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK-zlJPDaqQOnrcBsrdHqOGkki0E7pVF4UA60JIvKPeVgTcnEwojui-w4YYZn-K2y5GXcTJ7gwp9G42CTe4CItKCyTlyZsvulcXCOSbLlAwmmF0TLi4Oeqe1xMNhU861uQ3-svQ-WBfOk/s1600/mail_receive.png);
}
ul#navigation .facebook a   {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBM3QHWLR6C_G9IdESW60wFziGsLvvINvchvESIBTjSWjyD_EZJIMYsV17nuK4-ZrMMIm4J5M4VK3hu7YEXjBpDTqlFE7Q4o2HDOitlbOq2lhQ2FFEkH6sUt1B3dPZg0eJgbS-EsOxDCU/s1600/about.png);
}
ul#navigation .twitter a     {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGp2qMfdVE74P2dTfq7z8X_IlUxyWs5gf-sggK9Eu6zd_JN1BWcEkIDOfBok15mzlpDvfCFfUAaGtEM2rWDrhJii0MOlZSQgYxwWrclKtprYQRZqbF-QJ1Qsjo5hODq0h0HE6wEsZOD9E/s1600/twitter.jpg);
}
ul#navigation .youtube a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvqfuWEne5ECv4hAOFnowNmr7CeftazHT2ZWxLch2f3MfbXm_csNdJ1BotCRwYNTvhXyTJGAhUS8rDzDkKInquQLmxDAf5HNpvFLf1uJ-3iiV_l5luFOjTVtcupujU3F4SU2qNn6xw6Hs/s1600/You+Tube.png);
}
ul#navigation .googleplus a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsAoS5u3VYNwLuq93TymbWO2HTMXc2vnkmEjPtGZXiQAKB91ybDwKKB23If0JmoLr84MJERG_bmOCuvx3N4QWoE3hfNZNnq1acYpyd7szkTmimOryzZp4N1sNRjmnkrdjkoJji8yPmB94/s1600/google+plus+circle.jpeg);
}
ul#navigation .yahoo a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnGMK8lL0XlwwZ03wCOccRQI8Du4M8bpQS9o94EhWmtxcM5aHywgBve-60inaFI5kuWd7YujJJb15UibIlqa1hIi5NnQO3cq71sykg162-YkM2OU-FfykVNZyVIPvJzi2fOamlLCwiAqY/s1600/yahoo+icon.jpg);
}
/* End Menu Sideabr Jquery melayang by tutorialbelajarblogger.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='tutorialbelajarblogger.blogspot.com' title='Home'></a></li>
<li class='about'><a href='tutorialbelajarblogger.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/oktri.darmadi' target='_blank' title='Add Me on facebook'></a></li>
<li class='twitter'><a href='http://twitter.com/oktri.darmadi' 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

Selesai, sekarang buka blog kamu dan lihat hasilnya, Menu Sidebar dengan Efek Jquery Keren sudah ada diblogmu :)

keyword: cara membuat menu sidebar dengan efek jquery keren, cara membuat menu jquery, membuat menu css, cara membuat sidebar jquery, membuat sidebar css, menu sidebar melayang jquery, menu sidebar melayang css, cara membuat menu sidebar melyang dengan efek jquery keren

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari OBAT KUAT ALAMI | 51B333E5. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow OBAT KUAT ALAMI | 51B333E5 dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

• Cara Membuat Menu Social Button Melayang
• Cara Membuat Menu Blog Keren
• Cara Membuat menu Slide Info di Blog
• Cara Membuat Smooth Scroll Back To Top di Blog
• Cara Membuat Animasi Loading Page Blog dengan jQuery
• Membuat Menu Sidebar Melayang dengan Efek Jquery Lebih Menarik
• Cara Membuat Vertical Sliding Info Panel With jQuery
• Buku Tamu Panel Slide Vertikal Jquery
• Cara Membuat Navigasi Menu Melayang

Ditulis oleh Blogsatu pada tanggal Rabu, 16 Januari 2013