Membuat Vertical Menu CSS Di Blog

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/AVvXsEgun3RjwREIGNwYLeXETniTgEkCcIpqNh5vUqtrSbqryEh0QCznWvyAvq_F04K8CDxNsadgh-_FNR2HGpgVM2yBfO3z_j5EauN-XAu_WRnac1jHrMP979RZ45ovIP7uT6mqL8XcD-1MSP0/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/AVvXsEgun3RjwREIGNwYLeXETniTgEkCcIpqNh5vUqtrSbqryEh0QCznWvyAvq_F04K8CDxNsadgh-_FNR2HGpgVM2yBfO3z_j5EauN-XAu_WRnac1jHrMP979RZ45ovIP7uT6mqL8XcD-1MSP0/s1600/menu4.gif) 0 -32px;padding: 8px 0 0 10px;}

</style>

Note:

Upload dan host gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgun3RjwREIGNwYLeXETniTgEkCcIpqNh5vUqtrSbqryEh0QCznWvyAvq_F04K8CDxNsadgh-_FNR2HGpgVM2yBfO3z_j5EauN-XAu_WRnac1jHrMP979RZ45ovIP7uT6mqL8XcD-1MSP0/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/AVvXsEgLCq4lFO3qGWx9dIqpsXvS8X1mxv6Pe_ICJs_GDq-fS64sWVGuoQWgp4kLFfxQvJN9pN1exajMbYlL-WtBxMyISrIKCfZ0mTAAz1131P3PyYG_T7skesinekKz-6adgF_Ve0O55zWvKUs/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/AVvXsEgLCq4lFO3qGWx9dIqpsXvS8X1mxv6Pe_ICJs_GDq-fS64sWVGuoQWgp4kLFfxQvJN9pN1exajMbYlL-WtBxMyISrIKCfZ0mTAAz1131P3PyYG_T7skesinekKz-6adgF_Ve0O55zWvKUs/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/AVvXsEgLCq4lFO3qGWx9dIqpsXvS8X1mxv6Pe_ICJs_GDq-fS64sWVGuoQWgp4kLFfxQvJN9pN1exajMbYlL-WtBxMyISrIKCfZ0mTAAz1131P3PyYG_T7skesinekKz-6adgF_Ve0O55zWvKUs/s1600/menu2.gif) 0 -64px;padding: 8px 0 0 10px;}

</style>

Note:

Upload dan host gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLCq4lFO3qGWx9dIqpsXvS8X1mxv6Pe_ICJs_GDq-fS64sWVGuoQWgp4kLFfxQvJN9pN1exajMbYlL-WtBxMyISrIKCfZ0mTAAz1131P3PyYG_T7skesinekKz-6adgF_Ve0O55zWvKUs/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!

Posted in: HTML-CSS Tricks