Tak jauh berbeda cara membuat menu vertikal di blogspot. Hanya memasukkan kode di bawah ini dengan mengganti alamat URL anda.Tentunya masih banyak lagi model menu lainnya yang bisa anda cari di Google, ini hanya sebagian contoh saja.
Ini hanya cara untuk blogger pemula seperti saya ini yang ingin belajar membuat menu vertikal.
Bila anda tertarik maka simak baik-baik cara membuatnya :
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/AVvXsEjo8uGj927jLVCY56ZuUpFzRJ-7z6_C956JCYDgd0uDeotYbk8TT-FOQoeNs-hzIMvkCL0_OSSiFLfBoKPXat0JbkVF1GmX_gxRaaJ6K0hogpIDNv_hPREJrnybG_VS0uuETd7YHQCrcg0/s1600/menu4.gif);
padding: 8px 0px 0px 30px;
}
#menu4 li a:hover {
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo8uGj927jLVCY56ZuUpFzRJ-7z6_C956JCYDgd0uDeotYbk8TT-FOQoeNs-hzIMvkCL0_OSSiFLfBoKPXat0JbkVF1GmX_gxRaaJ6K0hogpIDNv_hPREJrnybG_VS0uuETd7YHQCrcg0/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/AVvXsEjo8uGj927jLVCY56ZuUpFzRJ-7z6_C956JCYDgd0uDeotYbk8TT-FOQoeNs-hzIMvkCL0_OSSiFLfBoKPXat0JbkVF1GmX_gxRaaJ6K0hogpIDNv_hPREJrnybG_VS0uuETd7YHQCrcg0/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 hijau dengan Judul Link
- Ganti Kode Warna Merah dengan Judul Link
9. Klik "Simpan"
Nah Gampang kan, nah bagi anda yang minat buat bikin menu vertikal ini, tunggu apalagi silahkan terapkan di blog anda. Semoga bermanfaat
Author : coxelgokil | ACI BUDAYA
Anda telah membaca
artikel tentang : Cara Membuat Menu Vertikal Di Blogspot . Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
