Tips Membuat Menu Navigasi Secara Horizontal

Menindak lanjuti artikel tips-make-horizontal-blogger-menus dengan tambahan yang saya baca dari artikelnya
O-OM yang kali ini akan membuat suatu menu navigasi bawaan dari blogger. Dengan menggunakan fasilitas CSS, widget Linklist yang semula sering dipakai sebagai blogroll secara vertikal, kita modifikasi menjadi menu navigasi secara horizontal. Langkah yang kita lakukan sbb :

1. Login Blogger

2. Masuk --> Layout --> Edit HTML

3. Backup dahulu

4. Lalu --> Edit HTML

5. Cari Kode ini --> ]]></b:skin>

6. Setelah ketemu, copy paste kode dibawah ini diatasnya -->]]></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}

]]></b:skin>

7. Kemudian cari kode <div id='outer-wrapper'><div id='wrap2'> biasanya terletak di bawah html tag <body> kemudian copy-paste kode dibawah ini, dan taruh dibawahnya kode --> <div id='outer-wrapper'><div id='wrap2'>. Contohnya seperti dibawah ini :

Catatan HTML4 = Bisa menyesuaikan dengan Kode HTML kita dan tidak harus HTML4 seperti milik OOM.

7. Save Templates.

Source : http://dhuwuh.blogspot.com/2008/08/tips-membuat-menu-navigasi-secara.html