Cara Membuat Menu Tab Navigator Horizontal -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Menu Tab Navigator Horizontal, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Tutorial Blogger, Artikel Widget, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Cara Membuat Menu Tab Navigator Horizontal
link : Cara Membuat Menu Tab Navigator Horizontal
Gambar dibawah ini

Cara Membuat Menu Tab Navigator Horizontal

Get update here 30 tab menu navigasi horizontal

Melanjutkan postingan sebelumnya sebagai jawaban pertanyaan seorang teman yang ingin mengetahui cara membuat menu tab navigator horizontal.

Sebenarnya pada banyak template baru, tab navigator horizontal ini sudah tersedia dan sobat dengan mudah bisa mendownloadnya dengan gratis dan tidak perlu susah membuatnya. Tapi bagi sobat yang tidak ingin untuk mengganti template baru lagi dan belum memiliki tab navigator horizontal pada headernya, berikut cara membuatnya:

1.Langkah Pertama

• Loggin ke blogger

• Pada dasbor klik tata letak

• klik edit HTML kemudian cari kode ]]></b:skin>

• kemudian letakkan kode berikut diatas ]]></b:skin>

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}

hasilnya seperti ini:

atau kode berikut:

.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;-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px}
.menuhorisontal li a:hover{color:#8A0808; background:#FBEFF5}

Untuk hasil seperti ini

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 Ke Dua

Klik tata letak=> elemen halaman=> tambah gadget pada bagian atas header atau bagian bawahnya=> HTML/JavaScrip

Copy dan paste kode berikut warna merah berikut pada content:

 

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

<a href="http://amatullah83.blogspot.com/search/label/Artikel%20Islam" target="_blank">Agama</a>

<a href="http://amatullah83.blogspot.com/search/label/Teknologi" target="_blank">Tecnology</a>

<a href="http://amatullah83.blogspot.com/search/label/Kesehatan" target="_blank">Kesehatan</a>

<a href="http://amatullah83.blogspot.com/search/label/Islamic%20Animation" target="_blank">Islamic Animation</a>

<a href="http://amatullah83.blogspot.com/search/label/Glitter%20Text" target="_blank">Glitter Teks</a>

<a href="http://www.blogger.com/" target="_blank">Loggin Blogger</a>

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

Keterangan: untuk URL silahkan sobat ganti, begitu pula warna backgroundnya silahkan sesuaikan dengan selera. Bisa lihat kode warnanya disini

• Simpan. simpan lagi... lihat blog anda!

Semoga berhasil dan bermanfaat!

*Contoh menu tab horizontal diatas header seperti diblog ini, sedang yang berada dibawah header seperti gambar dibawah ini.

Demikianlah Artikel Cara Membuat Menu Tab Navigator Horizontal

Sekianlah artikel Cara Membuat Menu Tab Navigator Horizontal kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Cara Membuat Menu Tab Navigator Horizontal dengan alamat link https://trikmitos.blogspot.com/2009/12/cara-membuat-menu-tab-navigator.html