Menu navigasi horizontal

Berbagai macam cara pengoptimalan pencarian artikel pada blog, kemarin-kemarin zoel sudah posting kotak pencarian "search engine" untuk memudahkan pengunjung menemukan artikel pada blog kita, selain search engine "menu navigasi" pun bisa jadi andalan dalam pencarian postingan blog kita. Kita bisa menyimpan link posting kita di navbar ini, namun navbar ini ada kelemahannya, yaitu navbar ini tidak support fungsi dropdown, namun keuntungannya pun ada yaitu praktis dalam memakainya, kenapa?? karena Navbar ini bisa kita edit tanpa melalui pengeditan HTML, jadi misal mau masukkin link tidak usah bingung-bingung pergi ke "edit HTML" untuk masukkin link, cukup dengan memasukkan link pada kotak tab "edit elements". jadi praktis sekali penggunaan navbar ini, hukum alam bahwa klo ada kelemahan pasti ada kelebihan. hehe...

Nah jika sobat tertarik dengan tutorialnya, maka sobat langsung saja Login dulu di blogger sobat-layout-edit HTML-klik expand template widget-masukkan code di bawah ini di atas code ]]></b:skin>:

/*-- (Menu/Nav) --*/
#nav{background:#000; height:30px; padding:5px 0 0; margin-bottom:0px; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px}
#nav-left{float:left; display:inline; width:700px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:13pt comic sans ms,arial,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}

 Kemudian letakkan code di bawah ini sesudah code <div id='outer-wrapper'><div id='wrap2'> (gunakan ctrl+f untuk memudahkan pencarian)

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Setelah itu sobat tinggal save dan sekarang coba lihat di Layout-edit elements, maka perhatikan ada gadget yang muncul di atas header.

Namun jika sobat ingin meletakkan navigasi tersebut di bawah header, maka langkah yang sobat lakukan adalah merubah letak dari <div id='outer-wrapper'><div id='wrap2'> , dan caranya rubah posisinya yang tadinya di bawah body, sekarang pindahkan tepat di atas code
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

Maka sekarang lihat perubahannya.