Membuat Menu Vertikal di Blogger

Kali ini kita akan belajar membuat menu vertikal di Blogger. Menu vertikal ini akan tampil seperti pada gambar contoh. Yuk, kita mulai langkah-langkahnya:

Langkah-Langkah:

Masuk ke Blogger:
- Pilih menu "Layout --> Edit HTML".

Tambahkan Script CSS:

Salin dan tempelkan script berikut ini sebelum kode ]]></b:skin> atau di area CSS Anda.

css
.glossymenu, .glossymenu li ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 185px; /*LEBAR ITEM MENU UTAMA*/
    border: 1px solid black;
}
.glossymenu li {
    position: relative;
}
.glossymenu li a {
    background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
    font: bold 12px Verdana, Helvetica, sans-serif;
    color: white;
    display: block;
    width: auto;
    padding: 5px 0;
    padding-left: 10px;
    text-decoration: none;
}
.glossymenu li ul {
    position: absolute;
    width: 190px;
    left: 0;
    top: 0;
    display: none;
}
.glossymenu li ul li {
    float: left;
}
.glossymenu li ul a {
    width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active {
    color: white;
}
.glossymenu li a:hover {
    background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Mengubah Warna Menu:
- Anda bisa mengganti warna menu dengan mengubah teks merah (blue1.gif dan blue2.gif) ke warna yang Anda inginkan. Misalnya, jika Anda ingin menggunakan warna merah, kodenya akan menjadi seperti ini:
```
css
.glossymenu li a {
    background: white url('http://blog.superinhost.com/vertical/red1.gif') repeat-x bottom left;
}
.glossymenu li a:hover {
    background-image: url('http://blog.superinhost.com/vertical/red2.gif');
}
```
- Warna Menu Vertikal:
  - blue1.gif, blue2.gif
  - green1.gif, green2.gif
  - red1.gif, red2.gif
  - pink1.gif, pink2.gif
  - black1.gif, black2.gif
Simpan Template:
- Setelah menambahkan kode CSS, simpan perubahan pada template Anda.

Tambahkan Gadget HTML/JavaScript:

Pergi ke menu "Page Elements".

Pilih "Add a Gadget --> HTML/JavaScript" dan masukkan kode berikut:

html
<ul id="verticalmenu" class="glossymenu">
    <li><a href="/">Home</a></li>
    <li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
    <li><a href="http://x-template.blogspot.com">Free Template</a></li>
    <li><a href="http://getebook.co.cc">Free Ebook</a></li>
</ul>

Catatan:
- Kode merah adalah tautan.
- Kode biru adalah teks tautan.
- Jika Anda ingin menambahkan menu, cukup salin kode dan tempelkan.

Simpan Pengaturan:
- Klik "Save" untuk menyimpan gadget yang baru saja Anda tambahkan.

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda dapat membuat menu vertikal di blog Blogger Anda. Menu ini tidak hanya membuat blog Anda terlihat lebih profesional tetapi juga memudahkan pengunjung dalam menavigasi konten di blog Anda. Selamat mencoba dan semoga berhasil!

Selamat Mencoba!

Ruli Lesmana