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/AVvXsEimNBC_lg2tOENgogKS5NsK1wU2PQxpiGj00rIS07GeysmqUuntgStA35C_8gO_yJdmkaa0Xd5AQs-Q-DyvSA-_f_w47IqbNsODvOr0DSL-5pJsL1QkD4kICjmPrkwS0vWJsQij4YsK3Eg/s1600/home.png);
}
ul#navigation .about a {
background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_SVKo3FBgFmsYw5o1LMKlhH2e_i25nuTNxPAnuxb8SSPiJBpMw7SAGb2c5xyCQDA4ddHr9gJjBKZ00WVPLtmQ2iW8hewGipZCui1IRIMWv8anXkNzREJEWXgEJ95CBdQEMo6wDh7Bfs/s1600/konco.png);
}
ul#navigation .rss a {
background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxA5T3awlgho85b5evcKL2wwvmhA1fAMnUh7E7nB5mL9gH0EyVJmi2CdnY2ItjISw3n99Bgs0v0jQA886ROSQzeC7M_ehz7bMz39HWhlMf6Whz6d1c2AA8IfZMCtKiJvFBD84z3PZw6oE/s1600/rss.png);
}
ul#navigation .mail a {
background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyUgmNe6o-U1uda4Bfp6S7Rz0-BqRKDrh-CdY5yroQy8O-1HkVZhCviaVEjPRueHdf9_Hadv0B8IslghzehWZ8JUH_0vUQdkkzu2uAZzkLrPZSanyl5uRXceSzsyPOdWcchvWHdVx6-5M/s1600/mail_receive.png);
}
ul#navigation .facebook a {
background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCFPlzlBd62HJQBj_s-u_FmcQ6Rl7xYLTqm_EzwlgDkY5W_X5-8_7e6mAn_biRg46A0CGZP2GDDPyE5m_pCcovqYhZLVip8CjMuGamZZQAxhxUPwqYhygyu5fg0XUuYz7hRK8cAQkG5Ww/s1600/about.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG_0u1yX-BwPQu8idj1YL_Aqzu1BzqE7EiadwM8QcposRqrFKnVikdZ9dtZNArMmAP-g6plPRcUMkl7zRK9zGs5n6sgSbHZ-M0LBpK2iavqpDgnQzLMlBUpb6cJPBZYZ-LN6ar5DIVUJg/s1600/twitter.jpg);
}
ul#navigation .youtube a {
background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5PQz0k3TEu6zViJSXAxIqHOjsDc8CJiEg-ptL_kbhtEPVEU5uK3f8PEa3XyU0IFfWcCP1_z3MQw5iBepcWjsKXPrdZqjtIE1466cm15kuIzjfbV3KBeQUadVuiasQ_7bHeJJ_5dRCsHQ/s1600/You+Tube.png);
}
ul#navigation .googleplus a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXeH0cdXKULBFs0PO4a7XM3XVxpdEOtqQQTU20uIfVb8yxQfDLsOOaEQ7U2oVphY99CQt1KC27PfQ97X46VqYZphln-WywbbXn9YzIZvAB532THczHyuLssxq5ia8PY2Wxf_EJGRyBZZY/s1600/google+plus+circle.jpeg);
}
ul#navigation .yahoo a {
background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZAgMv6fdEtyHP6jMqOONlFewTx6lJx8hymi5t4wxOVm8wHwXQv5Xarqu1ZaEnucoJcUo_UpEwQnR36f_j2O8pVLj92P-tWSfAwul92qjAAi0ASRusJbPKwjv7AAOptNFyYwwAtN0HDfQ/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() {
$('#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://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
Selesai, sekarang buka blog kamu dan lihat hasilnya,
Menu Sidebar
dengan Efek Jquery Keren sudah ada diblogmu :)
Untuk menghargai jasa postingan blog ini
silahkan berikan comenan dan flow/joain blog ini
