pada posting kali ini say akan menjelaskan tentang bagaimana membuat drop down menu pada template anda. Salah satu penggunaannya untuk mempermudah navigasi pada blog ,dan dapat juga untuk menghiasi blog agar tampilan lebih bagus.
cara nya pun cukup simple, tidak perlu pengetahuan lebih...hehe
1. Yang pasti login dulu ke blogger kita,Dashboard>Desain>Page Elemen
2.Pilih gadget HTML/JavaScript
3. Copy dan paste kode yang ada di bawah :
<div id='ebtnavbar'>
<ul id='ebtnav'>
<li>
<a href='#'>Home</a>
</li> <li>
<a href='#'>About</a>
</li> <li>
<a href='#'>Contact</a>
</li> <li>
<a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
</ul> </li>
</ul>
</div>
4. Ganti # dengan Link Page Blog dan teks dalam huruf tebal dengan nama halaman. Dan kode yang berwarna hijau adalah kode yang membuat drop down menu. Kita dapat copy dan paste tepat sebelum </ span> di bawah tab yang kita suka.
Untuk menambahkan tab lain, cukup paste kode berikut tepat di atas </ ul>:
<li>
<a href='#'>Tab Name</a>
</li>
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
9. Lalu simpan template
Dan lihat hasilnya..:D
cara nya pun cukup simple, tidak perlu pengetahuan lebih...hehe
1. Yang pasti login dulu ke blogger kita,Dashboard>Desain>Page Elemen
2.Pilih gadget HTML/JavaScript
3. Copy dan paste kode yang ada di bawah :
<div id='ebtnavbar'>
<ul id='ebtnav'>
<li>
<a href='#'>Home</a>
</li> <li>
<a href='#'>About</a>
</li> <li>
<a href='#'>Contact</a>
</li> <li>
<a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
</ul> </li>
</ul>
</div>
4. Ganti # dengan Link Page Blog dan teks dalam huruf tebal dengan nama halaman. Dan kode yang berwarna hijau adalah kode yang membuat drop down menu. Kita dapat copy dan paste tepat sebelum </ span> di bawah tab yang kita suka.
Untuk menambahkan tab lain, cukup paste kode berikut tepat di atas </ ul>:
<li>
<a href='#'>Tab Name</a>
</li>
5. Simpan gadget tersebut
6. Sekarang masuk ke "Design" > "Edit HTML"
7. Backup dulu template, untuk berjaga-jaga, dan cari kode :
]]></b:skin>
8. Copy dan paste kode dibawah, tepat diatas kode diatas :
/*----- EBT Drop Down Menu ----*/
#ebtnavbar { background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
9. Lalu simpan template
Dan lihat hasilnya..:D