cara buat menu navigasi horisontal

setiap blogwalking atau mengunjungi blog seseorang pasti anda melihat ada menu horisontal di bawah header atau di atas header, bagi anda yang penasaran bagaimana cara pembuatannya anda jangan hawatir saya akan berbagi sedikit tentang bagaimana caranya membuat tab menu horisontal.
Hasilnya kurang lebih seperti ini






langkah I

1. Masuk ke Dasbor
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Silahkan cari di dalam template anda kode ]]></b:skin>
5. Persis sebelum kode tersebut pastekan script di bawah ini

.menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #000000;}
.menuhorisontal ul{margin:0; padding:0; padding-left:0px; font:13px Arial; list-style-type:none}
.menuhorisontal li{display:inline; margin:0}
.menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:2px; padding:2px 2px 2px 2px; color:#000000; background:#CCCCCC;}
.menuhorisontal li a:hover{color:#FFFFFF; background:#2E2EFE}

6. klik tombol simpan


Langkah ke 2


1. Masuk ke Dasbor
2. Klik Tab Tata Letak
3. Klik Tab Element Halaman
4. Klik Tambah Gadget yang berada di posisi header ( atas )
Jika pada saat ini template anda belum disetting untuk bisa menambah gadget pada header, silahkan anda surfing terlebih dahulu di sini
5. Klik pilihan menu HTML/JavaScript
6. Pastekan script berikut ini ke dalam kolom konten tersebut

<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #FFFFFF; background:#FFFFFF;">

<div class="menuhorisontal">
<li>

<a href="http://pinginbelajar.blogspot.com">HOME</a>

<a href="http://www.blogcatalog.com/blogs/pingin-belajar.html" target="_blank">Blog Catalog</a>

<a href="http://technorati.com/blogs/pinginbelajar.blogspot.com" target="_blank">Technorati</a>

<a href="http://feeds2.feedburner.com/PinginBelajar" target="_blank">Feed Burner</a>

<a href="http://pinginbelajar.blogspot.com/2008/12/automatic-exchange-link-columns.html" target="_blank">Exchange Link</a>

<a href="http://pinginbelajar.blogspot.com/2008/12/comment-box.html" target="_blank">Comment Box</a>

<a href="http://pinginbelajar.blogspot.com/2009/05/promosikan-blog-anda-sekarang-juga.html" target="_blank">Buruan Daftar</a>

</li>
</div>
</div> 

7. Untuk script yang berwarna merah di atas menandakan warna latarnya, silahkan ganti dengan warna pilihan anda agar sesuai dengan warna site anda. Untuk mendapatkan variasi kode warna, silahkan terlebih dahulu surfing di sini [ html-color-codes ]
8. Silahkan ganti script URL yang berwarna coklat dengan URL milik anda
9. Silahkan ganti script yang berwarna hijau dengan kata pilihan anda
10. Klik Simpan
11. Selesai

selamat mencoba