- Login ke account blogger kamu.
- Cari Kode kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.
/* navbar
================== */
#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Catatan :
- Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau.
- Kemudian cari kembali kode seperti di bawah ini.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>
... dan seterusnya ...
</b:section>
</div>
- Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna kuning (sesuaikan dengan template blog kamu).
<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>
<div id='navright'>
<form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>
</div>
</div><!-- akhir bg_nav -->
- Jangan lupa disimpan
- Login ke account blogger kamu.
- Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
- Cari kode HTML di bawah ini yang posisinya diantara <body> ... <body>.
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>
Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
- Tambah kode berikut di nav link yang kamu inginkan, letakkan sebelum </li>.
<ul>
<li><a href='URL sub 1'>Sub menu 1</a></li>
<li><a href='URL sub 2'>Sub menu 2</a></li>
<li><a href='URL sub 3'>Sub menu 3</a></li>
</ul>
Contoh :
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a>
<ul>
<li><a href='URL sub 1'>Sub menu 1</a></li>
<li><a href='URL sub 2'>Sub menu 2</a></li>
<li><a href='URL sub 3'>Sub menu 3</a></li>
</ul>
</li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>
Catatan :
1. Perhatikan peletakkan kode untuk menambah menu dropdown, ditandai dengan warna hijau.
2. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.
- Jangan lupa disimpan.
Tambahan : Kode CSS #nav li li yang perlu kamu optimasi adalah sebagai berikut.
Membuat Sub Drop Down nya#nav li li {float: left;
margin: 0px;
padding: 0px;
width: 150px; <!-- lebar dropdown menu -->
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff; <!-- warna latar dropdown menu -->
width: 160px; <!-- lebar dropdown menu, ketika disentuh korsur/mouse -->
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff; <!-- garis tepi bawah dropdown menu -->
border-left: 1px solid #ffffff; <!-- garis tepi kiri dropdown menu -->
border-right: 1px solid #ffffff; <!-- garis tepi kanan dropdown menu -->
<!-- atau kamu bisa mengganti kode border-bottom, left, dan right dengan kode border: 1px solid #ffffff; -->
}
#nav li li a:hover, #nav li li a:active {
background: #c06000; <!-- warna latar dropdown menu , ketika disentuh korsur/mouse -->
padding: 7px 30px 7px 10px;
}
- Login dulu ke account blogger kamu.
- Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".
Tips: Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
- Tambahkan kode CSS berikut di bawah kode CSS menu horizontal yang ada.
#nav li ul a {
width: 100px;
}
#nav li ul ul {
position: absolute;
margin: -30% 0 0 95%;
}
#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 li li.sfhover ul {
left:auto;
}
#nav li:hover, #nav li.sfhover {
position:static;
}
- Cari kode HTML <div id='navleft'>.
Tips: Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
- Kemudian tambahkan menu turunan kedua, seperti kamu menambahkan dropdown menu dalam horizontal navigasi (turunan pertama). Illustrasi kodenya adalah sebagai berikut.
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>teks kamu</a></li>
<li><a href='http://Link_yang_dituju'>teks kamu</a>
<ul>
<li><a href='URL sub 1'>teks kamu</a></li>
<li><a href='URL sub 2'>teks kamu</a></li>
<li><a href='URL sub 3'>teks kamu</a>
<ul>
<li><a href='URL sub 3.1'>teks kamu</a></li>
<li><a href='URL sub 3.2'>teks kamu</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://Link_yang_dituju'>teks kamu</a></li>
<li><a href='http://Link_yang_dituju'>teks kamu</a></li>
</ul>
</div>
</div>
Catatan :
1. Perhatikan peletakkan kode untuk menambah dropdown menu, ditandai dengan kode berwarna hijau.
2. Perhatikan pula peletakkan kode untuk menambah menu turunan kedua, ditandai dengan kode yang berkedap-kedip.
3. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.
- Jangan lupa disimpan.
Tidak ada komentar:
Posting Komentar