Untuk membuatnya anda bisa menggunakan tutorial berikut:
- Login ke akun Blogspot pembaca
- Klik link menu Tata Letak, kemudian pilih Edit HTML.
- Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
- JANGAN beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
- Setelah itu untuk menambah menu horizontal tinggal kopi kode berikut
<div id="nav">10. Jangan lupa mengganti kode URL dan nama yang berwarna merah.
<ul>
<li><a href="URL">NAMA</a></li>
<li><a href='URL'>NAMA</a>
<ul>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
</ul>
</li>
<li><a href='URL'>NAMA</a>
<ul>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
</ul>
</li>
<li><a href='URL'>NAMA </a>
<ul>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
</ul>
</li>
<li><a href='URL'>NAMA</a>
<ul>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
<li><a href='URL tambahan'>NAMA tambahan</a></li>
</ul>
</li>
</ul>
</div>
11. Paste dibawah kode
<b:widget id='Header1' locked='false' .....dst.........'/>Langkah Selanjutnya Copy Kode Dibawah Ini:
</b:section>
</div>
#NavbarMenu {
background: #000;
width: 874px;
height: 35px;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
color: #fff;
font-weight: bold;
margin: 0px;
padding: 0px;
}
#NavbarMenuleft {
width: 874px;
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: #808080;
height: 24px;
color: #fff;
display: block;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
font-weight: bold;
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: #c0c0c0;
color: #000;
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: #c0c0c0;
width: 150px;
color: #000;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
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: #000;
color: #fff;
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;
}
Untuk warna menu horizontal ini bisa diganti sendiri jika ingin menggunakan warna yang lain, silahkan menuju ke postingan saya tentang kode warna dan contohnya.
Khusus kode "color:" ini adalah kode buat warna hurufnya, jadi silahkan diganti dengan kode warna lainnya dengan mengubah huruf yang saya warnai biru.
Setelah itu paste diatas ]]></b:skin> lalu save template.
Lihat hasilnya.
Semoga berhasil dan sukses.
Semoga sukses!! Berhasil, jangan lupa komen jika gagal/berhasil
ini yg saya cari, dicoba dulu ya, baru mau bikin nih, hihi
ReplyDeleteini yg saya cari, dicoba dulu ya, baru mau bikin nih, hihi
ReplyDeletegood articel..please visit my blog..thank's
ReplyDeletemantap article nya mas..
ReplyDeleteapa cocok dengan semua browser mas?
browser hp java dan operamini tidak bisa. thx bro kunjungannya
ReplyDeleteMakasih ya, tp belum jadi tuh..
ReplyDeletetrims atas infonnya,
ReplyDeletesangat membantu
template saya tidak ada kode " ]]> " bos
ReplyDeleteadanya " " apakah sama saja? mhn pencerahannya, thx
ok t coba dulu,trims
ReplyDeletesaya udah coba pasang template di blogspot saya. tampilannya udah benar, tapi kenapa waktu sub menunya disorot langsung hilang ya..... shg tidak bisa masuk page sub menu yang diinginkan.
ReplyDeleteGimana caranya supaya sub menu tertahan sampai kita klik sub menu pilihan kita ya?
Tolong bimbingannya bro....
Terimakasih.
thank tutorialnya sob...
ReplyDeletewww.gantatriplex.blogspot.com
lagi nyoba-nyoba nih gan tapi masih susah aja ternyata..hufftt..
ReplyDeletemakasih bos
ReplyDeletelangsung ke TKP nih