Cara Membuat Super Vertical CSS Menu Blogger/Blogspot


Vertical menu (menu yang berupa list dalam posisi vertikal) bisa menjadi alternatif navigasi blog Blogger anda. Menu ini biasa diletakkan di bagian sidebar, baik di atas maupun dibawah.
Dalam posting ini, saya persembahkan dua vertical menu dengan CSS murni dan image (gambar), yang setting dan pemasangannya di blog Blogger/Blogspot sangat mudah.
Kode CSS:
<style type="text/css">
#menu4 {width: 200px;margin: 10px;border-style: solid solid none solid;border-color: #000;border-size: 1px;border-width: 1px;}
#menu4 ul {list-style: none;margin: 0;padding: 0;}
#menu4 li a {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 80%;font-weight: bold;height: 32px;voice-family: "\"}\""; voice-family: inherit;height: 24px;text-decoration: none;}
#menu4 li a:link, #menu4 li a:visited {color: #CCC;display: block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi86uHGYARqA1mEqbmBWdNIk7DAa4YeInXmKQfNTQrZfn6Ef9vIO8oEbWniaf4FxwzcJcCYo9-m4BJ-SmrVeUl6Wj2Utjb0lYJB55REYyyxRwgVbKwTEpz5YyyYsZYuC0QEbeRP30p9ZdQ/s1600/menu4.gif);padding: 8px 0 0 10px;}
#menu4 li a:hover, #menu4 li #current {color: #FFF;background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi86uHGYARqA1mEqbmBWdNIk7DAa4YeInXmKQfNTQrZfn6Ef9vIO8oEbWniaf4FxwzcJcCYo9-m4BJ-SmrVeUl6Wj2Utjb0lYJB55REYyyxRwgVbKwTEpz5YyyYsZYuC0QEbeRP30p9ZdQ/s1600/menu4.gif) 0 -32px;padding: 8px 0 0 10px;}
</style>
Note: Upload dan host gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi86uHGYARqA1mEqbmBWdNIk7DAa4YeInXmKQfNTQrZfn6Ef9vIO8oEbWniaf4FxwzcJcCYo9-m4BJ-SmrVeUl6Wj2Utjb0lYJB55REYyyxRwgVbKwTEpz5YyyYsZYuC0QEbeRP30p9ZdQ/s1600/menu4.gif sendiri.
Kode HTML:
<div id="menu4">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Order</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
Kode CSS:
<style type="text/css">
#menu2 {width: 200px;border-style: solid solid none solid;border-color: #677D92;border-size: 1px;border-width: 1px;margin: 10px;}
#menu2 ul {list-style: none;margin: 0;padding: 0;}
#menu2 li a {font-size: 80%;font-weight: bold;font-family: Verdana, Arial, Helvetica, sans-serif;height: 32px;voice-family: "\"}\""; voice-family: inherit;height: 24px;text-decoration: none;}
#menu2 li a:link, #menu2 li a:visited {color: #fff;display: block;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-TKMAdWEBYmFBgFmPgtzo0-3Ra8iHaAU0WOAQ_gLn64Jiz8zQDO-kV2h_s4AaI9Wu-X8qXF3cAjlLL375SXrX01YejnhyphenhyphenuTIcJuHLWbJk5qOi8hYGs3qKHFDgeb9G2t7YU-fepeNDP-Y/s1600/menu2.gif);padding: 8px 0 0 10px;}
#menu2 li a:hover, #menu2 li #current {color: #283A50;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-TKMAdWEBYmFBgFmPgtzo0-3Ra8iHaAU0WOAQ_gLn64Jiz8zQDO-kV2h_s4AaI9Wu-X8qXF3cAjlLL375SXrX01YejnhyphenhyphenuTIcJuHLWbJk5qOi8hYGs3qKHFDgeb9G2t7YU-fepeNDP-Y/s1600/menu2.gif) 0 -32px;padding: 8px 0 0 10px;}
#menu2 li a:active {color: #283A50;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-TKMAdWEBYmFBgFmPgtzo0-3Ra8iHaAU0WOAQ_gLn64Jiz8zQDO-kV2h_s4AaI9Wu-X8qXF3cAjlLL375SXrX01YejnhyphenhyphenuTIcJuHLWbJk5qOi8hYGs3qKHFDgeb9G2t7YU-fepeNDP-Y/s1600/menu2.gif) 0 -64px;padding: 8px 0 0 10px;}
</style>
Note: Upload dan host gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-TKMAdWEBYmFBgFmPgtzo0-3Ra8iHaAU0WOAQ_gLn64Jiz8zQDO-kV2h_s4AaI9Wu-X8qXF3cAjlLL375SXrX01YejnhyphenhyphenuTIcJuHLWbJk5qOi8hYGs3qKHFDgeb9G2t7YU-fepeNDP-Y/s1600/menu2.gif sendiri.
Kode HTML:
<div id="menu2">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#>Order</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
Cara Membuat dan Memasang Vertical Menu CSS:

1. Masuk ke dashboard > Design/Rancangan > edit HTML
2. Masukkan kode CSS tepat di ATAS </head> (gunakan Ctrl + F untuk mencari)
3. Save template.
4. Copy Kode HTML, ganti # dengan url-url blog atau url apapun yang ingin dipasang. Ganti kata-kata Home, Products, dan lain-lain dengan anchor text yang diinginkan. Tambahkan/hapus baris antara <li> dan <li>  sebelum </ul>untuk menambah/menghapus menu.
5. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget
6. Setelah pop up window muncul, pilih opsi HTML/Javascript dan masukkan kode HTML.
7. Klik save.
8. Drag/geser widget menu vertical tersebut ke posisi yang diinginkan.
9. Save lagi.
10. Done!

Encoded and modified for Blogger/Blogspot Blogs by: Ahmad Khoirul Azmee. © All Rights Reserved.
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Membuat Super Vertical CSS Menu Blogger/Blogspot
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 19 Comment(s):

ScriptMarketer said...

Sungguh tutorial menarik..,
Biar semakin mantab, ijin menyubangkan trik css, karena kebetulan saya cinta sekali sama yang satu ini :-)

Ini hanya untuk alasan kompresi CSS untuk meningkatkan web speed. Akan lebih cool jika pada bagian atribut dirampingkan untuk mereduce ukuran file.

Seperti ini kira-kira:

#menu2 {width: 200px;border-style: solid solid none solid;border-color: #677D92;border-size: 1px;border-width: 1px;margin: 10px;}

bisa ditanspose ke:

#menu2 {
width: 200px;
border: 1px #677D92 solid;
}

Sedang untuk #menu4 li a:link, gunakan CSS Sprite untuk secara drastis me-reduce HTTP Request.

BTW.. Tutorial yang Mancap..

Keep update, my friend :-)

Unknown said...

Mas Wid, wuhuy! and woiyyooo! iya bener banget mas Wid, pas bikin kemaren, ga kepikiran CSS shorthand, asal nulis untuk mengukur dan memposisikan aja, hehehe. Ide yang bagus. oke ntar aku rampingkan lagi dah. Makasih, my friend!

Baby Care Tips said...

saya newbie di dunia blogging...makins ering baca artikel di blog ini ..makin bertambah pengetahuan saya ttg dunia blogging.. makasih :D

Unknown said...

senang rasanya bisa membantu :D welcome to the world of blogging!

muh.yusuf said...

Jangan heran kalau ini ada pada blog saya. Berarti NABELO kata orang Kaili (Palu)

ItsMe said...

Nice blog..
Here is free script for horizontal menu or vertical menu or dropdown menu or css menu or html menu.
www.designedmenus.com

jablay said...

Saya udah coba, baru blajar sih, tapi masih mirip daftar link, donlod gambarnya gak bisa...hahaha. batu ya!

Anonymous said...

terima kasih pak, saya baru belajar.izin copas kode css-nya. blog saya piddep.blogspot.com jika sempat berkunjung tolong kasih masukan.

Share With Agung Talaga Blog said...

Kalo untuk yg model verticalnya gmn mas......

Pper fly said...

Mas klo cara mengisi tautan biar ada di menunya gimana??

Unknown said...

ganti tiap # dengan url halaman yang ingin dimasukkan. contoh: "http://blaballa.com/hhhh.html". kemudian ganti home, products, dll dengan kata-kata yang diinginkan.

Goodbox said...

benar2 artikel super mas ,,, saya cari2 kemana 2 eh ternyata di sini ada ,,,,,,hehheheheh

Goodbox said...

mas sebelumnya saya sudah bikin ,cara-membuat-menu-horizontal-tabs sederhana di blogger ,dan berhasil,, tapi kalau mau bikin Cara Membuat Super Vertical CSS Menu Blogger/Blogspot yang di atas ,,,, menu horizontal tabs sederhananya dihapus jangan ,,,,, minta caranya yaa,,,salam kenal aja mas ,,,

daka:

War Thepowered BeHeroes said...

laakh,, gak mudeng gan ?

Sejahtera Cell said...

Assalamu'alaikum... salam kenal...dan trimakasih

Diary Online said...

Ini Yang Saya Cari,Mudah Dimengerti,terima kasih kawan

Rachmat said...

GILA...

ternyata cara buatnya gampang banget, sudah disiapkan CCSnya

mohon ijin pasang di blog saya

terimakasih banyak

jual liftbarang di jakarta said...

untuk memasukan postingan kita ke menu-menu itu bagaimana ya???

jual liftbarang di jakarta said...

bagaimana memasukan postingan kemasing-masing menu tsb??

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap