Membuat Menu Sidebar Melayang dengan Efek Jquery Keren

Hallo sobat sobat blogger , sebelumnya Dhecun Blog telah membuat trik blogger yang berjudul Cara Membuat Gambar Bergetar Otomatis Di Blog , nah pada trik blogger kali ini saya ingin berbagi trik Cara Membuat Menu Sidebar Melayang dengan Efek Jquery yang Keren.
Untuk contoh Menu Sidebar Melayang Jquery silahkan klik disini.
Bagaimana keren kan sob...?
Ayo pasang di blog anda sekarang juga jangan sampai ketinggalan hehehe :)

Jika anda tertarik untuk memasangnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Centang Expand Template Widget
5. Tekan tombol Ctrl+F
6. Cari kode ]]></b:skin>
7. Masukkan script dibawah ini tepat diatas kode ]]></b:skin>
/* Starts Menu Sideabr Jquery melayang by dhecun.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 dhecun.blogspot.com End*/
8. Kemudian cari kode </body>
9. Masukkan script dibawah ini tepat diatas kode </body>
<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>
10. Klik simpan template
11. Selanjutnya pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
12. Masukkan script dibawah ini
13. Klik simpan
<div class='header'></div>
<div class='scroll'></div>
<ul id='navigation'>
<li class='home'><a href='http://dhecun.blogspot.com/' title='Home'></a></li>
<li class='about'><a href='http://dhecun.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://www.facebook.com/dhecun.blog/' target='_blank' title='Add Me on facebook'></a></li>
<li class='twitter'><a href='http://twitter.com/' 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/' 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>
<div style="text-align: center;">
<a href="http://dhecun.blogspot.com/2012/11/membuat-menu-sidebar-melayang-dengan.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>
Catatan :
Ganti tulisan yang berwarna merah dengan URL anda , tulisan yang berwarna biru ganti dengan teks sesuai keinginan anda.



Semoga bermanfaat...!!!

Subscribe

0 Komentar Blogger
Komentar Facebook

0 komentar:

Pasang Widget Otomatis



Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Masukkan URL blog max 10 URL
( Tools by Dhecun Blog : Get Widget )

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.
RSS feeds















Space Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

RSS feeds

Widget Populer

Widget Zoom Detail Gambar

Widget Share Button Melayang

Share

Tukar Link

Traffic

Semua Artikel




Tampilkan semua artikel

10 Artikel Terbaru






Masukkan email anda

untuk berlangganan artikel




Dhecun Blog

Followers

Google+ Followers

Google+ Badge