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:



52 Komentar:

membuat photo gallery dengan php said...

wah keren mas bisa bergerak gerak
saya bookmark dulu deh yak buat ntar dicoba

Beben Koben said...

Mending kita maenkan dicss-nya aja deh ama a:hovernya. Lumayan nggak berat kan ???

Daenk said...

Infonya nya bermanfaat Mas, kalau boleh tanya gimana tuh caranya bikin banner flash

yuliana said...

mantab bener...

blog buat bloggers said...

ilmu yang sangat matang gan
sangat layak untuk dipertunjukan kepada sahabat semuanya
salam sukses selalu gan

Template Blog Gratis said...

Wah hebat mas, mantaaap.....

Mohon dukung saya ya di kontes SEO Kenali dan Kunjungi Objek Wisata di Pandeglang

Giblog said...

jquery link nudging di gabung sm thumb nya itu yah mas.. mantaf..

MbahDoyok said...

bagus banget mas.... :)
siip deh

Anonymous said...

bener2 berguna nih artikel. aku pake ya!!!

Admin said...

wah...... muantap bos....

Ada yang istimewa dari blog ini :

1. Template buatan sendiri

2. Alexa ranK cukup bagus

3. Pokoknya banyak yang bagus....

makasih triknya mas... akan saya coba

Unknown said...

mantep mas, nice infoh... postingannya jgn dihapus ya klo2 suatu saat sya perlu jadi nyari disini =))=))

Ronaldo Rozalino said...

Mantap Bro thanks ya

momogi said...

sebaiknya scriptnya jangan ngambil dari h1.ripway.com tapi langsung dicopy dan ditulis di blogna.

ini untuk menghindari kalau sewaktu-waktu blog aslina ilang, biar fx-na gak ilang

btw: nice post lho

Inspirasi Pemuda said...

bagus bagus bagus, boleh boleh boleh...

langsung praktik sob.

Mx Axrom said...

Waw great inform...

nada said...

info yang bagus bang
manstabss

NURA said...

salam sobat
wah canggih nich,,
membuat menu sidebar unik dengan jquery

keren juga animasi link jika disorot mouse

pengenpintar said...

info yang keren sob
keep sharing

Ocim said...

postingannya sangat bermanfaat bagi dunia blogger

hendrie k_bejo said...

Good Tutor I Like it's

Comeng baloik Coy!!

choen said...

keren bro, jquery memang memberikan kesan :)

Wandhe Fadilah said...

wah keren ka, hehehhe
mksh informasinya

MI Tanggel said...

tak cobanya dulu mas ya, nanti kalau gak berhasil mohon bimbingannya. OK

Belajar TIK said...

artikel yang bagus bro

Unknown said...

Kereeeeen!!!!..blog yang benar-benar bagus nih... pengen belajar di blog ini ah....makasih..salam kenal

Abdillah said...

Salam kenal, beruntung saya ketemu blog ini. Saya akan coba

Rynisma said...

Thx. Sangat membantu sekali buat pemula seperti saya ^^ Kerenzz

sittin said...

sangat menarik dan pantas untuk segera diaplikasikan

Anonymous said...

terima kasih mas info nya..
kira2 bisa share templatenya ga ya.. hehee
naksir nih.. :)

Anonymous said...

maaf mas..link Digital Life dah aku pasang di blog saya ya mas.. :)

Download Lagu Mp3 Gratis said...

ku coba di Situs Download Lagu Mp3 Gratis dulu ah

rey said...

seperti accordeon ya mas

Ahmad Maryuki said...

ok....membantu...newbie ki

_zy said...

hasilnya seperti apa? kok tidak diberi preview nya sekalian?

he he salam kenal

Anonymous said...

klo dlam satu menu sidebar isinya dua atauu lebih postingan yg read more itu gmn?
d tunggu jwbn ny

apguide said...

I am also going to write a blog post about this…I enjoyed reading your post and I like your take on the issue. Thanks.

www.apguide.com

Edy Samsul said...

Thanks infonya sobat. Udh difollow dan link juga udh ada di swara pendidikan. balas ya gan?

Unknown said...

kok sy tdk bs lg buka blog saya.
gara-gara ripway.com
gmn solusinya

Unknown said...

jiahh , kok ,masukke h1.ripway gmna nih ?

AkakJ said...

gimana nih... kok malah otomatis pergi ke laman Ripway.Com.. masih loading edit HTML... loh malah perginya ke Ripway.Com.. gimana nih gan???

Alazabut said...

siapa ini yang punya blog kasi solusi woy.. kok malah otomatis pergi ke laman h1.ripway.com.. blog saya gak bisa di buka lagi cuy...

Anonymous said...

si PePek

Anonymous said...

si KonToLLL

Anonymous said...

SideBar Unik KontOL.

Unknown said...

keren beud ... udah saya coba di bloh saya ...
IndiSchool Malang
thanks

Unknown said...

WOw
Sidebarnya keren Gan
d tunggukunjunganya gan
;)

Web Developers Delhi said...

It was very useful for me. Keep sharing such ideas in the future as well. This was actually what I was looking for, and I am glad to came here! Thanks for sharing the such information with us.

Mobile App Developers said...

It was very useful for me. Keep sharing such ideas in the future as well. This was actually what I was looking for, and I am glad to came here! Thanks for sharing the such information with us.

SEO Company Pitampura said...

I will probably be back again to browse more, many thanks for the data.

Web Designers Pitampura said...

That is an extremely smart written article. I will be sure to bookmark it and return to learn extra of your useful information. Thank you for the post. I will certainly return.

Unknown said...

setelah saya pasang seperti di atas kok blognya jadi agak berat gan? apa emang gitu efeknya? makasih!

App Development Company London said...

I certainly agree to some points that you have discussed on this post. I appreciate that you have shared some reliable tips.

Post a Comment

Silahkan tinggalkan komentar anda, setiap komentar yang anda tulis akan menambah jumlah backlink anda.
Sebaiknya gunakan Name/URL pada saat menuliskan komentar.

Template Design by Eris Agustian - Digital Life | Professional Blogger Template