Cara Membuat Menu Navigasi Horisontal Sederhana

Kawan,, Menu Navigasi pada blog bisa di bilang sangat penting bagi para bloger, Menu Navigasi ini mempunyai banyak fungsi dari memperbagus tampilan blog, meringkas link pada blog dan masih banyak lagi kegunaan yang ain, itu semua tergantung pada bloger yang ingin memakainnya. Kali ini saya akan berbagi cara membuat menu navigasi sederhana untuk blogspot. seperti ini..

Kode CSS :

/* Navigasi tabs Sederhana missetx.blogsot.com Starts */

a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}

a.burastabs:hover {color:#FFFFFF; background:#666666;}

#burasbar {width:auto; margin:0 auto;}

/* Navigasi tabs Sederhana Ends */

 kode HTML :

<!-- Navigasi tabs Sederhana http://missetx.blogspot.com Starts -->

<div id='burasbar'>

<a href="#" class="burastabs">Home</a>

<a href="#" class="burastabs">About</a>

<a href="#" class="burastabs">Blog Tips</a>

<a href="#" class="burastabs">SEO Tips</a>

<a href="#" class="burastabs">Contact</a>

<a href="#" class="burastabs">Sitemap</a>

<a href="#" class="burastabs">Advertise</a>

</div>

<!-- Navigasi tabs Sederhana Ends -->

Kode CSS dan HTML di atas bisa di download di sini kawan => Klik disini.  (klik kanan pilih new tab)

Catatan Kawan,, sebelum di copy, edit terlebih dahulu kode HTML di atas. Ganti #dengan URL yg dikehendaki. Ganti juga Home, About, Blog Tips, SEO Tips, Contact, Sitemap, Advertise dengan anchor text yang kawan inginkan. Untuk menambah atau mengurangi tab, copy/tambahkan atau hapus bagian <a href="#" class="burastabs">Anchor Text</a>di atas </div>.

Ini dia kawan cara membuat Menu Sederhana di Blog :

1. Masuk ke Dashboard => Design/Rancannga => Edit HTML.

2. Copy kode CSS di atas,

4. Cari ]]></b:skin> (untuk lebih mudah cari dengan Ctrl + F) setelah ketemu, letakkan/pastel Kode CSS tepat di atas kode ]]></b:skin>. 
5. Save Template.
6. Kemudian masuk ke Page Elements => Klik Add a Gadget   

7. Setelah keluar halaman baru atau pop up window muncul, pilih opsi HTML/Javascript 

8. Masukkan Kode HTML yg telah diedit tadi ke kotak HTML/JavaScript seperti contoh berikut:

 9. Klik save.

10. Geser Gegdget yang baru kita buat tadi ke bawah/atas header (letakkan pada slot gadget) kemudian di save lagi.

Sekian kawan tips cara membuat Menu Navigasi Horisontal Sederhana.Semoga bermnfat dan membantu sahabat semua :)