Cara Membuat Menu Tab Navigator Horizontal

Nah sobat blogger kali ini judul posting saya adalah Cara Membuat Menu Tab Navigator Horizontal. Mungkin kalian bertanya - tanya apa itu Menu Tab Navigator Horizontal. Menu Tab Navigator Horizontal itu seperti gambar di bawah ini :

 

Nah sudah taukan sobat blogger, ok langsung saja :
1. Langkah pertama :

• Login Blogger
• Masuk ke Template >> Edit Html 
• Kemudian cari kode ]]></b:skin> 
• Lalu  letakan kode di bawah ini di atas kode  ]]></b:skin>  

Kode script

menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #DF0101;} .menuhorisontal ul{margin:1; padding:0; padding-left:0px; font:20px Arial; list-style-type:none} .menuhorisontal li{display:inline; margin:0} .menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:9px; padding:4px 4px 4px 4px; color:#DF0101; background:#F8E0EC;} .menuhorisontal li a:hover{color:#8A0808; background:#FBEFF5}

Jika sudah nanti hasilnya akan seperti gambar diatas.

keterangan untuk angka margin, padding, font dan huruf bisa anda sesuaikan selera begitu pula dengan warna huruf dan backgroundnya. Untuk kode warna bisa lihat disini

• Simpan template 

2. Langkah Kedua

• Klik tata letak tambah gadget >> pilih HTML/javascript dan masukan kode di bawah ini diatas header atau di bawahnya.
• kode script :

 <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://amirhidayat93.blogspot.com">HOME</a>

<a href="http://amirhidayat93.blogspot.com" target="_blank">Folder</a>

<a href="http://amirhidayat93.blogspot.com" target="_blank">item 1</a>

<a href="http://amirhidayat93.blogspot.com" target="_blank">Item 2</a>

<a href="http://amirhidayat93.blogspot.com" target="_blank">Item 3</a>

<a href="http://amirhidayat93.blogspot.com" target="_blank">Item 4</a>

<a href="http://amirhidayat93.blogspot.com" target="_blank">Sumber</a>

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

Keterangan :Untuk URL silahkan sobat ganti, begitu juga dangan background  kode warna bisa lihat disini

Semoga bermanfaat!

| Sumber |