MEMBUAT MENU VERTIKAL DI BLOGGER

1. Login Blogger

2. Pilih Tabs "Rancangan"

3. Pilih "Edit HMTL" -> Cek "Expand Widget Template"

4. Cari Kode ]]></b:skin> Kemudian Letakkan kode di bawah ini TEPAT di Atas kode ]]></b:skin>

/* Start Menu Vertikal*/

*{

list-style:none;

margin:0px;

padding:0px;

}

#menu4 {

width: 200px;

border-style: solid solid none solid;

border-color: #D76100;

border-size: 0px;

border-width: 0px;

}

#menu4 li a {

   height: 32px;

   voice-family: "\"}\"";

   voice-family: inherit;

   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/AVvXsEiJnreeQ9g9P93IU9_FfgnTj6w0jnW2Umy4RYyOmm9L5zwQEaH37lLtWNxqEqEJuOwDMiUYHrdlK2s5IS7Ypp5I-cxSUcN7Cu0sUQO8tK5R-4l6Us0zZmJMFwxTDME9kl-I9aak1OtI8zs/s1600/menu4.gif);

padding: 8px 0px 0px 30px;

}

#menu4 li a:hover {

color: #fff;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJnreeQ9g9P93IU9_FfgnTj6w0jnW2Umy4RYyOmm9L5zwQEaH37lLtWNxqEqEJuOwDMiUYHrdlK2s5IS7Ypp5I-cxSUcN7Cu0sUQO8tK5R-4l6Us0zZmJMFwxTDME9kl-I9aak1OtI8zs/s1600/menu4.gif) 0 -32px;

padding: 8px 0 0 30px;

}

#menu4 li a:active {

color: #fff;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJnreeQ9g9P93IU9_FfgnTj6w0jnW2Umy4RYyOmm9L5zwQEaH37lLtWNxqEqEJuOwDMiUYHrdlK2s5IS7Ypp5I-cxSUcN7Cu0sUQO8tK5R-4l6Us0zZmJMFwxTDME9kl-I9aak1OtI8zs/s1600/menu4.gif) 0 -64px;

padding: 8px 0 0 30px;

}

/* End Menu Vertikal*/

 

5. Klik "Simpan Template"

* Sekarang tinggal Membuat Widget JavaScriptnya

6. Pilih Tabs "Tata Letak" -> Klik "Tambah Gadget"

7. Cari dan Pilih "HTML/JavaScript"

8. Kemudian Masukkan kode di bawah ini pada widget JavaScript

<div id="menu4">
<ul>
   <li><a href="#1" title="Home">Home</a></li>
   <li><a href="#2" title="About">About</a></li>
   <li><a href="#3" title="Services">Services</a></li>
   <li><a href="#4" title="Portfolio">Portfolio</a></li>
   <li><a href="#5" title="Store">Download</a></li>
</ul>
</div>

Perhatian (Yang Boleh Di Ganti) :
- Ganti Kode #1 sampai #5 dengan URL / Link yang ingin di tuju
- Ganti Kode Warna Biru dengan Judul Link
- Ganti Kode Warna Merah dengan Alamat Link
9. Klik "Simpan"