Membuat Menu Tab Navigasi pada Templated Versi Terbaru

Tulisan ini aku dedikasikan buat teman bloggerku artana's blog, yg pengen membuat menu tab navigasi seperti Menu Navigasi weblog ask. Hasil uji coba Weblog Ask dgn memakai templated standar versi TERBARU (seperti templated yg Weblog Ask pake) dari blogspot ternyata sangat mudah membuatnya. Malah kita bisa editing berdasarkan kehendak kita. Oke, ikuti langkah2 berikut ini :

1. Login/masuk dulu ke akun web/blog kalian,
2. Masuk  ke dasbor, klik Rancangan, klik lagi edit HTML (No. 1), seperti gambar di bawah ini :

3. Klik Expand Template Widget (No.2),
4. Untuk mencari kode HTML ]]></b:skin>, tekan CTRL F, masukkan kode ]]></b:skin>(No.3),
5. Masukan/Copy kode HTML dibawah ini,

 /* navbar
================== */

#NavbarMenu {
background: #555 ;

width: 980px;

height: 30px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
}
#NavbarMenuleft {

width: 780px;

float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 200px;
font-size: 11px;
float: right;
margin: 0;
padding: 6px 0 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 {
color: #FFF;
display: block;
font-size: 10px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
}
#nav li a:hover, #nav li a:active {
background: #555 url(http://www.revolutiontwo.com/demo/church/wp-content/themes/church_10/images/navhov.png);
color: #FFF;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #555;
width: 150px;
color: #FFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #777;
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;

6. Letakkan kode HTML tersebut tepat di atas kode ]]></b:skin> (No 4),
7. Klik Simpan Template.
8. Untuk membuat menu Tab Navigasinya, pada dasbor klik Rancangan, klik elemen halaman,
9. Klik Tambah Gadget, klik HTML/JavaScript (<==Klik), kemudian copy kode HTML di bawah ini :
<div id='navbarmenu'><br /> <div id='navbarmenuleft'><br /> <ul id='nav'><br /> <li><a href='http://weblogask.blogspot.com/'>Home</a></li><br /> <li><a href='http://weblogask.blogspot.com/2010/03/about.html'>about</a></li><br /> <li><a href='http://weblogask.blogspot.com/search/label/artikel'>artikel</a><br /> <ul><br /> <li><a href='#'>Sub Page #1</a></li><br /> <li><a href='#'>Sub Page #1</a></li><br /> </ul><br /> </li><br /> <li><a href='http://weblogaskdata.blogspot.com/'>cari blogger se kota</a></li><br /> <li><a href='http://weblogask.blogspot.com/search/label/cerita'>cerita</a><br /> <ul><br /> <li><a href='#'>cerita ku</a></li><br /> <li><a href='#'>cerita utk anak2</a></li><br /> </ul><br /> </li><br /> <li><a href='http://weblogask.blogspot.com/search/label/tv online'>TV online</a><br /> <ul><br /> <li><a href='http://weblogask.blogspot.com/2010/07/muliti-tv-online.html'>multi tv indonesia</a></li><br /> <li><a href='http://weblogaskdata.blogspot.com/2010/07/espn-chanel.html'>ESPN Chanel</a></li><br /> <li><a href='http://weblogaskdata.blogspot.com/2010/07/bbc-tv-online.html'>BBC TV Online</a></li><br /> </ul><br /> </li><br /> </div><br /> <!-- akhir bg_nav --><br />
Klik simpan, kemudian tempatkan dibagian atas / header blog.
Agar pada saat mengklik menu navigasi tidak keluar pada tampilan semula, maka bila ditemukan tulisan target="_blank" HARUS DIHILANGKAN. Lakukan editing sesuai selera dgn meng KLIK Rancangan, kemudian KLIK Perancang Template Baru! Nah, pilih warna, Font yg kalian inginkan.
Rubahlah angka pd tulisan yg berwarna merah, seperti width: 980px; sesuai dgn lebar template kalian. Untuk menu Navigasi kode HTML yg telah dicopy spy disesuaikan dgn blog kalian.
Selamat mencoba, bila ada kesulitan, kita akan sama2 share utk perbaikan lagi.