Menu Sidebar dengan Efek Jquery Keren

Jembertheisozone - Trik Cara Membuat Menu Sidebar Melayang dengan Efek Jquery yang Keren. Untuk contoh Menu Sidebar Melayang Jquery yang saya maksud ini bisa dilihat di link ini: http://id-web.16mb.com/jsider . 


ScreenShotnya :

Pada saat tutorial ini dibuat saya menggunakan tampilan blogger lama / lawas, jadi bagi sobat blogger yang menggunakan tampilan blogger baru tinggal menyesuaikan ya :)

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 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_NHxeoqKb2GK7QZTnSItHztyeoUkSTRgjkYn8tZjwMeflHAiO3lI7VfR_5fbXm4e4Dj1U_JUjnjr0xJvTwv1uq2vC_tZN5jkMlvIn8fmktKPSCtzgXpCdAJC9HF0sf3iMzCVgK1VYl54/s1600/home.png);
}
ul#navigation .about a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYnHoiDQiwZmLIn9riaYrxAX289N9gqk83Yl7pXtUjrO5zFKorSAacjKJDjOWGsq3ZWXvVVZylBcSN1y_bdgQjL3UonoHK_rYrj9Q7pcGoIKGchwVfF5PbRB-L3DpjtphjfKuMiTWHjRM/s1600/konco.png);
}
ul#navigation .rss a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVpuIqO64rp0JfllZRg2Sbdzu1WlWkcjtg466farDzZe4F_wrdaQkjR1vOM_KLj9edUaYlkb920Sr0CcQYnbWB9IlOqaaiXzbbjeC8KcpamYIQ_HSZI5MakYfmrU1Gwj6vTAuXKoZ85X8/s1600/rss.png);
}
ul#navigation .mail a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIx8pKMkAg6i4dy2xziSf62LxYQaFwM_LlGryx9nbaBas4TGNjP7FVxSBD91vyHoSZlxtIMTolEjyX7kk8HAGZTlptWL5AkVM4jj3kWF4x2s8TkJ_-zVDjgz6VKXFbSoBCmNhZScIHdNc/s1600/mail_receive.png);
}
ul#navigation .facebook a   {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikwFbQVJd2ZzbHuPht2eWIhBB-DO8UCuumhL-oCi6y2UX5IDmjHYM2BxUBi_fSBTI_vBGNYE9TFp599GS9QSRWLhGh5zDvIrulP7ambNiBs7YqfYxS5w5lh6r9h6Xg_0EnIfNa0Vbnv50/s1600/about.png);
}
ul#navigation .twitter a     {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnlds54k3VJ20cE8P2KqwFdQSr0XPT3iAOv0wEsCe2war1aB-kpl1ffi3YutKgFX7QyKsjHM8QUu_qA9_SzvqeI5kC8_ae8Q2YJTjv7pyZcJ8XTtEreoKU9t9pmS2zQxzHueH_2bXBTO4/s1600/twitter.jpg);
}
ul#navigation .youtube a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-k91GlzgzRwEiwOZyw0mhm1_naZYnj2cpsijIkAJOIT8UCcaVPxPCrc41ayx6YX1P_6iXESw3KwC4zUTJzEVtivub_cHO_abZMQN7Ew7D9ZWqF-ehEqFGDPdc3rcC_MaYp5MPWVRuE7c/s1600/You+Tube.png);
}
ul#navigation .googleplus a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZGB4B90p9vDUmNQUnpx8ANY1K2n4yjobI52OE_YeWUf-FTvLMKUUPbTQ3rVz4mewYgMb2RGj78WqFVlUqntUL_D_OQtNDwTVWPvKZKbKnUqIolQPzvU7YvsywdEadvCqgiacHeRTlwIo/s1600/google+plus+circle.jpeg);
}
ul#navigation .yahoo a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhecvMfv7hb-V_SpQImF5iAjwQywAlh5auKM3pya5Kzh1m6cYl8ARah4kQEmzS0qHksPnsSBTEmt6raeXuobevdExsmjTOMZOipMqynUD5e2WJK9o0dCUC4HVIe1-kN4TVNTwkDctq3xkw/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://jembertheisozone.blogspot.com/' title='Home'></a></li>
<li class='about'><a href='http://jembertheisozone.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/fandywira' target='_blank' title='Add Me on facebook'></a></li>
<li class='twitter'><a href='http://twitter.com/fandymira' 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/fandywira' 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.

You Might Also Like

Tutorial Blogger

• Cara Mengecheck Jumlah Backlink Blog Kita
• 4 Alasan Kenapa Blog Jarang Ada Komentarnya
• Cara Bikin Total Post dan Total Komentar di Blog
• Cara Membuat MenuQ Top Header Blog
• Membuat Iklan Melayang di Blog
• Cara Memasang Read more Blog dengan Animasi
• Cara Membuat Widget Statistik Blog Di tengah
• Cara Pasang Permalink Blog
• Cara Mengubah Tag Heading Untuk Better SEO di Blogger
• Cara Mudah Promosi Blog Di Facebook
• Cara Menghapus Link "Langgan: Entri (Atom)"
• Cara Menambahkan 3 Kolom Di atas Footer Blog
• Membuat Effect Gambar Gelap-Terang pada Blogger
• Kenali Ciri-Ciri Template SEO Friendly Pada Blog
• Cara Ngecheck Seberapa Persen SEO Blogmu
• Memasang Artikel Terkait Bergambar di Blog
• Cara Mendaftarkan Blog ke Technorati 2013
• Cara Agar Blog Menjadi NO. 1 Di Google Dengan Google Ping
• Cara Membuat Artikel Random Di Blogger
• Cara Membuat Rating Bintang Di Search Engine Google
• Mengganti Older Post atau New Post Dengan Angka
• Cara Memasang Feedburner dan Memasang subcribe di Blog
• Cara Membuat Menu Blogger Style Yellow
• Cara Membuat Text Shadow/Glow Pada Judul Posting Blog

Cara Membuat Artikel Terkait Dibawah Posting Tempat Cari ilmu