P
ada
beberapa template Blogger hasil mengunduh dari layanan penyedia
template Blogger gratisan kita dapat menemukan adanya menu navigasi
horizontal dengan sub menu-sub menu vertikal. Namun, hal berbeda kita
temui saat menggunakan template yang disediakan oleh pihak Blogger. Di
sana belum tersedia menu navigasi yang dimaksud. Akan tetapi, kita dapat
menambahkan menu navigasi horizontal dengan sub menu-sub menu vertikal
pada template tersebut. Bagaimana cara membuatnya? Silakan simak
langkah-langkahnya di bawah ini.
Sekadar mengingatkan, tutorial di bawah ini masih menggunakan antarmuka Blogger yang lama.
1. Masuk ke akun Blogger Anda.
2. Klik Rancangan > Edit HTML.
3. Backup template dulu dengan mengeklik Download Template Lengkap.
4. Cari kode ]]> gunakan tombol Ctrl + F untuk mempercepat pencarian.
5. Selanjutnya copy kode di bawah ini dan paste di atas kode tersebut.
#NavbarMenu {
background: #000;
width: 400px;
height: 10px;
font-size: 11px;
font-family: Trebuchet MS, Tahoma, Verdana;
color: #fff;
margin: 0px;
padding: 0px;
}
#NavbarMenuleft {
width: 400px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
background: #222222;
height: 15px;
color: #fff;
display: block;
font-size: 11px;
font-family: trebuchet ms, ;
text-transform: none;
text-decoration: none;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
border-right: 1px solid #000;}
#nav li a:hover, #nav li a:active {
background: #222222;
color: #ffffff;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 150px;
color: #222222;
font-size: 11px;
font-family: trebuchet ms,;
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border: 1px solid #000;
}
#nav li li a:hover, #nav li li a:active {
background: #222222;
color: #ffffff;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul,
#nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav
li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
6. Klik tombol SIMPAN TEMPLATE.
7. Kemudian ke menu Elemen Laman dan klik Tambah Gadget yang ada di bawah header.
8. Pilih HTML/JavaScript.
9. Lalu copy kode di bawah ini dan paste di Konten.
- Silakan diganti tulisan-tulisan yang berwarna merah dengan yang Anda inginkan.
