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>.
Langkah berikutnya carilah kode ]]></b:skin> lalu sisipkan kode berikut di atasnya.
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.
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..
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>
<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 */
-----------------------------------------*/
#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>
<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..
52 Komentar:
wah keren mas bisa bergerak gerak
saya bookmark dulu deh yak buat ntar dicoba
Mending kita maenkan dicss-nya aja deh ama a:hovernya. Lumayan nggak berat kan ???
Infonya nya bermanfaat Mas, kalau boleh tanya gimana tuh caranya bikin banner flash
mantab bener...
ilmu yang sangat matang gan
sangat layak untuk dipertunjukan kepada sahabat semuanya
salam sukses selalu gan
Wah hebat mas, mantaaap.....
Mohon dukung saya ya di kontes SEO Kenali dan Kunjungi Objek Wisata di Pandeglang
jquery link nudging di gabung sm thumb nya itu yah mas.. mantaf..
bagus banget mas.... :)
siip deh
bener2 berguna nih artikel. aku pake ya!!!
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
mantep mas, nice infoh... postingannya jgn dihapus ya klo2 suatu saat sya perlu jadi nyari disini =))=))
Mantap Bro thanks ya
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
bagus bagus bagus, boleh boleh boleh...
langsung praktik sob.
Waw great inform...
info yang bagus bang
manstabss
salam sobat
wah canggih nich,,
membuat menu sidebar unik dengan jquery
keren juga animasi link jika disorot mouse
info yang keren sob
keep sharing
postingannya sangat bermanfaat bagi dunia blogger
Good Tutor I Like it's
Comeng baloik Coy!!
keren bro, jquery memang memberikan kesan :)
wah keren ka, hehehhe
mksh informasinya
tak cobanya dulu mas ya, nanti kalau gak berhasil mohon bimbingannya. OK
artikel yang bagus bro
Kereeeeen!!!!..blog yang benar-benar bagus nih... pengen belajar di blog ini ah....makasih..salam kenal
Salam kenal, beruntung saya ketemu blog ini. Saya akan coba
Thx. Sangat membantu sekali buat pemula seperti saya ^^ Kerenzz
sangat menarik dan pantas untuk segera diaplikasikan
terima kasih mas info nya..
kira2 bisa share templatenya ga ya.. hehee
naksir nih.. :)
maaf mas..link Digital Life dah aku pasang di blog saya ya mas.. :)
ku coba di Situs Download Lagu Mp3 Gratis dulu ah
seperti accordeon ya mas
ok....membantu...newbie ki
hasilnya seperti apa? kok tidak diberi preview nya sekalian?
he he salam kenal
klo dlam satu menu sidebar isinya dua atauu lebih postingan yg read more itu gmn?
d tunggu jwbn ny
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
Thanks infonya sobat. Udh difollow dan link juga udh ada di swara pendidikan. balas ya gan?
kok sy tdk bs lg buka blog saya.
gara-gara ripway.com
gmn solusinya
jiahh , kok ,masukke h1.ripway gmna nih ?
gimana nih... kok malah otomatis pergi ke laman Ripway.Com.. masih loading edit HTML... loh malah perginya ke Ripway.Com.. gimana nih gan???
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...
si PePek
si KonToLLL
SideBar Unik KontOL.
keren beud ... udah saya coba di bloh saya ...
IndiSchool Malang
thanks
WOw
Sidebarnya keren Gan
d tunggukunjunganya gan
;)
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.
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.
I will probably be back again to browse more, many thanks for the data.
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.
setelah saya pasang seperti di atas kok blognya jadi agak berat gan? apa emang gitu efeknya? makasih!
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.