Membuat menu sidebar unik dengan jquery

Bicara masalah modifikasi blog memang tidak akan ada habisnya. Selalu saja ada hal-hal baru yang layak untuk di coba. Seperti pada posting kali ini, saya akan memberikan trik bagi anda yang suka memodifikasi tampilan blognya agar terlihat unik dan professional. Modifikasi kali ini yaitu menambahkan menu unik pada sidebar blog seperti yang bisa anda lihat di blog ini (silahkan hover mouse pada menu Kategori). Anda akan melihat animasi pada saat link di sorot mouse. Untuk melakukan animasi seperti itu memang tidak cukup hanya dengan kode CSS saja, untuk itu maka dibutuhkan Java script dan jquery.

Menu seperti ini biasanya ditemukan pada halaman website professional, dan setelah saya melakukan uji coba pada template blogger ternyata bisa berfungsi dengan baik. Berikut ini adalah langkah-langkah pembuatan menu tersebut.

Silahkan login ke Dashboard Blogger anda, dan buka jendela Edit HTML. Untuk berjaga-jaga, lakukan backup terlebih dahulu template anda. Selanjutnya carilah kode </head> dan sisipkan kode berikut ini tepat diatas kode </head>.

<script src="http://h1.ripway.com/err13z/jquerymenu/jquery.js" type="text/javascript"></script>
<script src="http://h1.ripway.com/err13z/jquerymenu/menu.js" type="text/javascript"></script>

Langkah berikutnya carilah kode ]]></b:skin> lalu sisipkan kode berikut di atasnya.

/* Sidebar jQuery Menu
-----------------------------------------*/
#navigation{
width: 215px; /* Lebar menu */
}
#navigation ul{
list-style: none;
}
#navigation ul li{
height: 24px;
border-bottom: 1px solid #ccc;
}
#navigation ul li a{
text-indent: 20px;
padding: 5px 0;
display: block;
height: 14px;
text-decoration: none;
color: #434343; /* warna huruf */
background-image: url(http://h1.ripway.com/err13z/jquerymenu/bull.png);
background-repeat: no-repeat;
background-position: 2px 6px ;
}
#navigation ul li a:hover{
background-color: #4E5E00; /* warna background hover */
background-image: url(http://h1.ripway.com/err13z/jquerymenu/bull.png);
background-repeat: no-repeat;
background-position: 10px 6px ;
color: white; /* warna huruf hover */
}
/* Akhir sidebar Menu */

Sesuaikan parameter yang saya beri keterangan pada kode di atas dengan template anda lalu simpan. Langkah selanjutnya klik tab Page elements dan tambahkan sebuah gadget lalu pilih HTML/Java script. Beri judul atau title lalu masukkan kode dibawah ini pada kotak script dan simpan.

<div id="navigation">
<ul>
<li><a href="http://eris-agustian.blogspot.com/">Home</a></li>
<li><a href="http://eris-agustian.blogspot.com/">Profil</a></li>
<li><a href="http://eris-agustian.blogspot.com/">Contact</a></li>

<li><a href="http://link seterusnya..">Title..</a></li>

</ul>
</div>

Ganti url dan title sesuai kebutuhan anda. Anda bisa menambahkan daftar menu sesuai keinginan anda cukup dengan menambahkan link dan title seperti contoh di atas. Anda dapat menempatkan widget menu ini sesuai keinginan anda. Simpan dan lihat hasilnya..selamat bereksperimen..

Artikel terkait: