Kemarin saya telah membahas cara membuat menu horizontal sederhana. Kali ini saya akan bahas cara membuat menu vertikal. Cara pembuatannya cukup mudah, namun penampilannya tidak kalah dengan menu vertikal lainnya. Saya juga akan memberikan beberapa macam menu agar anda bisa memilih sesuai keinginan anda. Silahkan ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan Kode CSS di atas kode ]]></b:skin>
Selanjutanya klik Simpan Template
Klik kembali Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan Kode HTML ke dalamnya dan klik Simpan

Menu 1

Kode CSS
#menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; border: 0px solid #ccc; margin: 10px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQmNi_qmY8P9GGcyf8l7HYaVt8HLhL-VvuFyj5a2mfefqxixyVqhesIGVAmJ8NASZ3jIGNQaW4r8hjkKyxyb-MxopLqF6t5Qapuzm-FvZ1_BR-Fm_HVy8KLHEPp2qyysJ53_jj2JJety4/s800/menu3.gif); padding: 8px 0 0 30px; } #menu1 li a:hover, #menu1 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQmNi_qmY8P9GGcyf8l7HYaVt8HLhL-VvuFyj5a2mfefqxixyVqhesIGVAmJ8NASZ3jIGNQaW4r8hjkKyxyb-MxopLqF6t5Qapuzm-FvZ1_BR-Fm_HVy8KLHEPp2qyysJ53_jj2JJety4/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }

Kode HTML
<div id="menu1"> <ul> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> </ul> </div>

Keterangan: Link anda akan terbuat di tab baru. Bila anda ingin link anda terbuka pada tab yang sama (same windows) hapus saja semua kode target="_blank"

Menu 2

Kode CSS
#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; 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/AVvXsEj9TZm7XKdwoPAc-Jfi-MzfHXgkVkuYxpe6hAI_34hAd69VlCKdWIegTJ9NI_SZFfyri97PBwwSfI-f96rfwFJ67UHDYsz9hxULGXJNvmUfmnAcllrQ7tjD2Hn0ZDK7NjIQmaBcys9fadA/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TZm7XKdwoPAc-Jfi-MzfHXgkVkuYxpe6hAI_34hAd69VlCKdWIegTJ9NI_SZFfyri97PBwwSfI-f96rfwFJ67UHDYsz9hxULGXJNvmUfmnAcllrQ7tjD2Hn0ZDK7NjIQmaBcys9fadA/s800/menu14.gif); padding: 8px 0 0 10px; }

Kode HTML
<div id="menu2"> <ul> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> </ul> </div> 

Keterangan: Link anda akan terbuat di tab baru. Bila anda ingin link anda terbuka pada tab yang sama (same windows) hapus saja semua kode target="_blank"

Menu 3

Kode CSS
#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsdrIzxXtORUkzMrYwolYxQ2gmW_m2gNgxAv3DmZByXGTdIM3Ir3H0v4hNU-mEyn6y3ZSBPO6usuwDU9_-uBBF8OrMpBNvPoL4X2M7-sQSL8tovX__R4VCWoDpOKIjLLZMMbGsZ9qGcrU/s800/menu7.gif); padding: 8px 0 0 30px; } #menu3 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsdrIzxXtORUkzMrYwolYxQ2gmW_m2gNgxAv3DmZByXGTdIM3Ir3H0v4hNU-mEyn6y3ZSBPO6usuwDU9_-uBBF8OrMpBNvPoL4X2M7-sQSL8tovX__R4VCWoDpOKIjLLZMMbGsZ9qGcrU/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }

Kode HTML
<div id="menu3"> <ul> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> </ul> </div> 

Keterangan: Link anda akan terbuat di tab baru. Bila anda ingin link anda terbuka pada tab yang sama (same windows) hapus saja semua kode target="_blank"

Menu 4

Kode CSS
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnDG9ulG85GMiRFIZql3mJ2s_57S3jf4JeySBdjzCplc4Xji6erGmXUlq09hoUxpd15VjrcwjZPBr1pQmOJ-G7e8eacERcEgPsrOduWPyu6Ht8xq8CSsfJL96Zbd1Qp-SfoHRRpgYNyIY/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnDG9ulG85GMiRFIZql3mJ2s_57S3jf4JeySBdjzCplc4Xji6erGmXUlq09hoUxpd15VjrcwjZPBr1pQmOJ-G7e8eacERcEgPsrOduWPyu6Ht8xq8CSsfJL96Zbd1Qp-SfoHRRpgYNyIY/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnDG9ulG85GMiRFIZql3mJ2s_57S3jf4JeySBdjzCplc4Xji6erGmXUlq09hoUxpd15VjrcwjZPBr1pQmOJ-G7e8eacERcEgPsrOduWPyu6Ht8xq8CSsfJL96Zbd1Qp-SfoHRRpgYNyIY/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }

Kode HTML
<div id="menu4"> <ul> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> </ul> </div> 

Keterangan: Link anda akan terbuat di tab baru. Bila anda ingin link anda terbuka pada tab yang sama (same windows) hapus saja semua kode target="_blank" 

Menu 5

Kode CSS
 #menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvQruznxl1_2rAfaDF5LkLwy_BnhOrh3xYxKg2nozRS7te2ZHloUNqBGxu382XUJSCtHWfoYUl8tGYT4c8CCTzDyv-xGWgOpAc_bx5USSAWWQm2sWevJgMvcE-4ioe0zl3OfCFgeoVwo4/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvQruznxl1_2rAfaDF5LkLwy_BnhOrh3xYxKg2nozRS7te2ZHloUNqBGxu382XUJSCtHWfoYUl8tGYT4c8CCTzDyv-xGWgOpAc_bx5USSAWWQm2sWevJgMvcE-4ioe0zl3OfCFgeoVwo4/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML
<div id="menu5"> <ul> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> </ul> </div> 

Keterangan: Link anda akan terbuat di tab baru. Bila anda ingin link anda terbuka pada tab yang sama (same windows) hapus saja semua kode target="_blank" 

Menu 6

Kode CSS
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Qh3uuJDjqhUFajW9ynKWhaGgY1uD_7XEEp08_a2jEUd6vYtTinEFIoY5wuVxwvpVDzN_OPr_he0PN8ztOLzdMkY155dl9cNTWL39C_PQZyPRNzGsm0kzhMmRwzzr3bQYLHusY86h5Sk/s800/menu4.gif); padding: 8px 0 0 10px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Qh3uuJDjqhUFajW9ynKWhaGgY1uD_7XEEp08_a2jEUd6vYtTinEFIoY5wuVxwvpVDzN_OPr_he0PN8ztOLzdMkY155dl9cNTWL39C_PQZyPRNzGsm0kzhMmRwzzr3bQYLHusY86h5Sk/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML
<div id="menu6"> <ul> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> </ul> </div> 

Keterangan: Link anda akan terbuat di tab baru. Bila anda ingin link anda terbuka pada tab yang sama (same windows) hapus saja semua kode target="_blank"

Menu 7 

Kode CSS
#menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjruuueBNdU3ZHGhBHOdN6SHumw_lBnLnhrBdHRHk8_kzudg5C_RCs1eLKntgaPh_WdKNgc4UIVJfJxjwIp2iaNEhC7sC3jo7fx0gXitU4Pus3Jwl_uZ26rUj1NGjargGnj0xSGEt0NoUw/s400/menu11.gif); padding: 8px 0 0 25px; } #menu7 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjruuueBNdU3ZHGhBHOdN6SHumw_lBnLnhrBdHRHk8_kzudg5C_RCs1eLKntgaPh_WdKNgc4UIVJfJxjwIp2iaNEhC7sC3jo7fx0gXitU4Pus3Jwl_uZ26rUj1NGjargGnj0xSGEt0NoUw/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }

Kode HTML
<div id="menu6"> <ul> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> <li><a href="MASUKKAN ALAMAT LINK ANDA DI SINI" rel="nofollow" target="_blank">JUDUL</a></li> </ul> </div>   

Keterangan: Link anda akan terbuat di tab baru. Bila anda ingin link anda terbuka pada tab yang sama (same windows) hapus saja semua kode target="_blank"

Selanjutnya klik Simpan dan lihat hasilnya. Demikian cara membuat menu vertikal. Posting selanjutnya saya akan jelaskan bagaimana memodifikasi menu vertikal ini menjadi menu navigasi dan lain sebagainya. Nantikan posting selanjutnya. Selamat mencoba dan sukses selalu.