Membuat Menu Sidebar Melayang dengan Efek Jquery Keren
Hai sobat, 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 yang saya maksud ini bisa dilihat di link ini: http://id-web.16mb.com/jsider . Nah keren kan sob? Ayo pasang diblog kalian :)
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 rizqy-fadhillah.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/AVvXsEgjIqSs9_A3te1Xw4uYjltzPlYez0i1AiCw8aeaKBkW30H92fV5WZvIgG1o1dd06u46mQlYSuoWgEi_08FEJjLSS0VK0jN-xm15sdHCThnFafF3FsUlycULGkL72XBaKtg6KzUoGga4qbY/s1600/home.png);
}
ul#navigation .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_HLcQ3Ll_ozhP74kh5Y7TaS-eGOcCOxhU7o4QzQSWEDaelrl8GzxO7w-4CsSSnshQKYhHqcpjQeY7vjyIhVOAVPXXxwu_x7W7rVsoFFa4sMBN8m2KJz7wBlqS7KcxvskDRzoOBSzTfgs/s1600/konco.png);
}
ul#navigation .rss a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitros0Hjrd5iRSkQHvyHQ3eTMludNRbVYoJAjpJGWkE-_hE8xhSIz-933eNrgOFcL7rzLva5qqN_ZuIPN06aSwBp7UfCQ-cPL0sfUXGxTotwf_Gv_wAUit3GAwVyft0Hcpiv_mZYblBUY/s1600/rss.png);
}
ul#navigation .mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheuVC7C1_yYeZ13raNeJvY9bvZHKDumZrdV9643ijCSm3Tyfsmc9emLrQAk7Hj_5OBQomfoCo3JESHLWdwjVZzP1eReu6UK1XCNUt-suTmbsdb2EagJzVl8KTaNuVOU5TbOgh6NxEbwSY/s1600/mail_receive.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTHhDUwobL_GeLwVjJPw9yiLk4QqQQbKgQPNiHiuL2-DE00XYoFVPRZBqAUUXqPW0ZQDeBROmEELe9B_FIqjI13cUG5pQJzVHDT2H49blJDYdL6XIfzlZweLm5bFszNfAIEcHGiiDdtaA/s1600/about.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRrS9T8ERR43fjEh5NVTKB2bWCVawwsAVp8IXugshHK0g8PzEXt0jx2QWdX1x7hS3LoXIkIzr9ofVHt2yRFs5Gr8fh_Qcy4o04bNjnTpuOpsjUbemE2r57Hq9QSIkhgjB4noF5tRTAVjM/s1600/twitter.jpg);
}
ul#navigation .youtube a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFKkEh9t_qslWhS0Hm7W0nKnw5UzKAajUF-bJm2V3pKeZfds3WxbfFoPU-yE_DAIaSYLFvroEYZiwO_SzK_G7vQIjlr3KaWYfoEQRlEp576qIltTgJGhW4Q6JvhW0FPJBaJquCTq_4OSE/s1600/You+Tube.png);
}
ul#navigation .googleplus a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjouEoxxprUDooFvkWCO0ZbwNImxOfbwilSDRBEG9nkrhGL4guEebHe03W4pET4ekpT16AiKPiNykEkDSFX7s1zOEE2EkwEVHk-qpY37e_qMErZXnIhWc0Ovuq9U8Y7M2y0M1FoL_2VBzo/s1600/google+plus+circle.jpeg);
}
ul#navigation .yahoo a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSHPZ5VOZA5AgLIT65JIFqRE_sSmlyIu6PH08JmbDHDgIUu56znDjVtewK5wa5WdJOP92D9UpFDgJVTxW6198vbhGvtbu7aTFqnka-OTFxSiPqIOIjGOUcFX-lq7H0Bc6djoI5hefYhnI/s1600/yahoo+icon.jpg);
}
/* End Menu Sideabr Jquery melayang by rizqy-fadhillah.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://rizqy-fadhillah.blogspot.com/' title='Home'></a></li>
<li class='about'><a href='http://rizqy-fadhillah.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/rizqi fadhillah' target='_blank' title='Add Me on facebook'></a></li>
<li class='twitter'><a href='http://twitter.com/Rizqi_Fadhillah' 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/Rizqi' 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 :)
0 Response to "Membuat Menu Sidebar Melayang dengan Efek Jquery Keren"
BACA DULU SEBULUM BERKOMENTAR PERATURAN BERKOMENTAR DI BLOG INI :
- Di Wajibkan Berkomentar Dengan OpenID,supaya mimin bisa berkunjung balik
- Berkomentarlah sesuai artikel diatas,Jika diluar artikel gunakanlah tag [ OOT ].
- Berkomentar Disaran kan Sesuai Artikel
- Untuk Menyisipkan Kode Gunakan <i rel="code">Tulis kode yang sudah diparse di sini</i>
- Untuk Menyisipkan pre Gunakan <i rel="pre">Tulis kode yang sudah diparse di sini</i>
- Untuk Menyisipkan Catatan/Blockquote Gunakan <b rel="quote">Tulis catatan di sini</b>
- Untuk Menyisipkan Link Gunakan <i rel="anchor">URL DISINI</i>
- Untuk Menyisipkan Gambar Langsung Saja Tulis URL Imagenya
- Untuk Menyisipkan Video Youtube Langsung Saja Tulis URL Videonya
Konversi KodeEmoticon