 |
| Membuat Menu Sidebar Keren di Blog |
Selamat Malam..!!!
Kebetulan Ane Ganti Template yang Sidebarnya Cuma Satu kolom Jadi Ane Cari nih widget Sekalian Ane Share Buat Sahabat ane yang baik² ini,, ahah..!!
Langsung Ke TKP aja Yah gan..!!
- Masuk Ke Blogger Mu..!
- Pilih Template
- klik Edit HTML
- Cari kode ini ]]></b:skin> Tekan CTRL+F Untuk Mempermudah Pencarian
- Copy kode di bawah ini Tepat di atas 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/AVvXsEjiboxgBG-MOxHFkG041gKrrEphgqfBpYET4HBeAcp7okEghXvI5ua3rn3ShBtglsH-5VrIVEFfvIiVXEZnKnTzyfNTvJ1QEOPH115u2jKftHthbnWlGirci87rfKb0U6TAwDJZHjZHRmI/s1600/home.png);
}
ul#navigation .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaVKdY0J9C3ZKpfc3vECmeBUJ1hYgona1W-5zpsO9PQgj2yHxr8C6h6snutZiq9Ctj3iDx7KQv_G8-YrhXrJ4kqYhXeEtM1Jvg53wx2zaqOd8kJe9NDeKA6hDm2QQlZqHgGLdYkE4U3WQ/s1600/konco.png);
}
ul#navigation .rss a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKpWLQzg5AKCTOZ0U88EvViB6xOWs1939Qc8AEXcFeU9x7F4ahW49Tvbe-Ydyht-AsFDE5DPTHtsgZWwcx_vy_EXXYkp-NOvDH1vV4rycoWOMZmRlrLqUj7NFTZgAzQjZj1Nyx9IcQd_A/s1600/rss.png);
}
ul#navigation .mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJqHPpBo3ybEy65sLw_JR2i6KF-SsXiLfM4jkbH0HH2sywiDBMUtYgI_kuIrX585hiiJ-1HMWa7Iq36eRyGmjBUkypbZHBOzoPCpJHqIrPdXXN88Msrelp3FEeUVHRT_1KtxWwVlyC4mM/s1600/mail_receive.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUNb-i18FzZsRoD68XFWeOdUdlLRTrFcxpVyQiTHYGRMyzcspNvvsai132N47TtbySQsC112UhWcGIFCl4GXvUiMcHgp1XKXAol89otlo85VnpNy1RJKxLpb_l51mFtqp-vhfhKRCoYmM/s1600/about.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ZoFpGKbq8XYtt-pn3j3ntSEv8PrvHP1gft-zEFMbU6OBwBYhkadGezmoPEF2YiEc_iwR8_i4aoFcpcuKQZcYDAQ7HcINIMwIWdJIs7En0sNeeMqaVWQ4xE7k1ULyYzRluuKAW2cOHtw/s1600/twitter.jpg);
}
ul#navigation .youtube a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-XvVKrxLwZzfJSLWAcGLELEPuVnc6E_PNuYE-veiWJ643YsGtEqSMr1SjV0k3qYln5kFN7XWLdacRaaXg22icVVxikMkmXM23QbXlQyZLUxJM3TUOStHOLl9iENBGRPJsOCqKz7RdAo8/s1600/You+Tube.png);
}
ul#navigation .googleplus a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOrkXFL9KsPZvxu-13mIJgUzqGU4Vt3ryT2pIktEav28fL3xMHUI_Hw3XjM20j3f459At7geNWDd9onnMCKK-YdFVLz22MW6MFO3IWFhS-dJxwsnHMI3Quj-wATFjmLMzUxBnr2t7akVk/s1600/google+plus+circle.jpeg);
}
ul#navigation .yahoo a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ZPujkCouMmLK29qds0XoUcqCz2_vFeep2p4ITfDFNijX8K6CZl9JgnHssXZTIQS_U0_gfzTQeJlQXxvSLN2yEvaKZQA3TjCxTx-83TkOQKvT7E78YzN82FGjeDTZovyZOA60gLbWzKI/s1600/yahoo+icon.jpg);
}
/* End Menu Sideabr Jquery melayang by andi-techno.blogspot.com End*/
6 . Kemudian Cari kode
</body>
7. Copy kode di bawah ini Tepat di atas kode </body>
<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>
8. Save Template Sahabat..!!
Eitss Belum Selesai...!!
9. Copy kode di bawah ini dan Letakan JavaScript Sahabat
<div class='header'></div>
<div class='scroll'></div>
<ul id='navigation'>
<li class='home'><a href='http://maftuhijore.blogspot.com/' title='Home'></a></li>
<li class='about'><a href='http://maftuhijore.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/maf2hy.co.cco' target='_blank' title='Add Me on facebook'></a></li>
<li class='twitter'><a href='http://twitter.com/maftuhijore' 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/maftuhi' 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>
Semoga Bermanpaat Thnk atas Tutornya kang.. http://andi-techno.blogspot.com
Title : Cara Membuat Menu Sidebar Melayang dengan Efek Jquery
Description : Membuat Menu Sidebar Keren di Blog Selamat Malam..!!! Kebetulan Ane Ganti Template yang Sidebarnya Cuma Satu kolom Jadi Ane Cari nih wi...