Cara Membuat Menu Sidebar dengan Efek Jquery

loading...
Sidebar merupakan menu-menu yang letaknya pada bagian sisi blog,bisa disebelah kanan/kiri,tergantung bentuk tampilan pada template blog yang digunakan.Biasanya sidebar hanya diisi widget yang standar saja/yang dianggap penting-penting saja.Tapi ternyata ada yang bisa kita lakukan dengan tampilan sidebar agar terlihat lebih unik dan menarik,yaitu dengan menambahkan efek Jquery.Apa itu efek Jquery ? mungkin pertanyaan itu yang timbul dibenak sobat blogger semua setelah mendengar Jquery.Saya akan coba jelaskan sedikit tentang Jquery itu agar sobat semua tahu.Ya,jadi Jquery adalah efek seperti show and hide pada menu sidebar,ketika menu disorot dengan mouse maka akan muncul/menjorok terlihat dan ketika tidak disorot mouse akan tersembunyi kembali.Tampilannya seperti ini :


Preview hasilnya bisa kalian lihat disini
Jika kalian tertarik memasangnya di blog silahkan ikuti cara dibawah ini :
1. Log in blog kalian
2. Masuk pada template > edit html
3. Beri tanda ceklist pada expand widget
4. Cari kode ]]></b:skin> agar lebih mudah tekan ctrl+F lalu masukkan kode ]]></b:skin>
5. Letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tadi :

/* 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(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 andi-techno.blogspot.com End*/
6. Cari kode </body> lalu letakkan kode ini 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>


7. Masuk ke menu tata letak > tambah widget > html/javascript
8. Masukkan kode dibawah ini kedalam kolom konten :

<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>
Nb :ganti tulisan berwarna merah dengan link kalian masing-masing

12 Comments

Leave a Reply

Your email address will not be published.


*