Membuat Horizontal Menu Navigasi

Nah tutorial kali ini Saya akan mencoba membuat menu navigasi yang sebenarnya meminjam salah satu widget dari bawaan standar blogger.



Dengan sedikit sentuhan pada CSS, widget Linklist yang semula banyak digunakan sebagai blogroll secara vertikal akan kita modifikasi menjadi menu navigasi secara horizontal. Oke langsung aja berikut caranya :

1. Login ke blogger.com
2. Masuk ke menu Template
3. Pergi ke Edit HTML
4. Copy-paste Code berikut Lalu masukkan Sebelum code ]]></b:skin>

/*-- (Menu/Nav) --*/ #nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px} #nav-left{float:left; display:inline; width:600px} #nav-right{float:right; display:inline; width:100px} #nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Arial,Helvetica,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} /*-- (Search) --*/ #search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px 2px no-repeat; -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right; height:25px; margin:0 0px 0 0; width:180px} * html #search{margin-right:8px} #search input{font-family:Verdana,Arial,Helvetica,sans-serif; background:transparent; border:0; color:#555; float:left; font-size:12px; margin:5px 0 0; padding:0px 2px 2px 27px; width:140px}

5. Kemudian Cari lagi Code dibawah ini :

<div id='outer-wrapper'><div id='wrap2'>

6. Copy-paste Code di bawah ini dan letakan kodenya dibawah code diatas :

<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:widget id='HTML3' locked='true' title='Search' type='HTML'> <b:includable id='main'> <div id='nav-right'> <form expr:action='data:blog.homepageUrl + &quot;search&quot;' id='searchform' method='get' name='searchform'> <b:if cond='data:title'/> <div id='search'> <input class='s' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Cari artikel disini&apos;;}' onfocus='if (this.value == &apos;Cari artikel disini&apos;) {this.value = &apos;&apos;;}' type='text' value='Cari artikel disini'/> <input id='searchsubmit' type='hidden' value='Search'/> <data:content/> </div> </form> </div> </b:includable> </b:widget> </b:section> </div>

7. Silahkan Simpan dan lihat hasilnya
8. Sesuaikan warna latar dan textnya sendiri aja ya he he he..!!

Catatan :

Untuk menambah menu, silahkan buka kembali "Elemen Halaman" kemudian perhatikan widget paling atas, disitu sudah terlihat witget baru dengan title "Top Tabs" silahkan klik edit dan tambahkan menu yang ingin ditampilkan.