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
atau kode berikut:
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
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
*Contoh menu tab horizontal diatas header seperti diblog ini, sedang yang berada dibawah header seperti gambar dibawah ini.
Credit : http://amatullah83.blogspot.com/2009/12/cara-membuat-menu-tab-navigator.html
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;}hasilnya seperti ini:
.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}
atau kode berikut:
.menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #DF0101;}Untuk hasil seperti ini
.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}
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.
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!
*Contoh menu tab horizontal diatas header seperti diblog ini, sedang yang berada dibawah header seperti gambar dibawah ini.
Credit : http://amatullah83.blogspot.com/2009/12/cara-membuat-menu-tab-navigator.html
Comments
Post a Comment