Tab Menu Horizontal

Bagi anda yang memiliki blog dengan latar belakang gelap seperti EPG Studio, agar tampilannya tambah gelap sangat cocok menggunakan tab meu horizontal versi 4 ini.
Dengan latar belakang berwarna hitam ditambah dengan dua gambar yang juga warna gelap yaitu merah tua dengan hover merah kehitaman akan mejadikan tampilan blog anda semakin gelap.

Demo : perhatikan contoh dibawah ini :

1. Masuk ke Blogger
2. Pilih Rancangan bagian Elemen Halaman
3. Klik Tambah Gadget
4. Pilih TML/Javascript
5. Copy kode dibawah ini kemudian paste pada kolom yang tersedia
   
   <style type="text/css">

body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

#tabs {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1gO1Fw5vGcMQHRD9crWKmUX87ewww6mqSXflO773nlz3BXpXy9BDJ1yEXMgwAxOUdc_8Gs2tfDU5g7inNEbrzbYsE_dGxcp-ncSdqCzSGn3Qwjj7ZSTa8_chtHIYzXVR0ekzUmxqQlQ/") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZiy3J2afJUubGyem1aYfzdcUyQhaQA9rVu_f0wViQ5axBA4WIMNCKxvNT3z2TU25p5QrTuhCHaqCoB_B1ecgZw0Ps0FdslTl-Dc4mKg0l3jpSwPQasx7wdb9bidivLsfxTc3DMkKiAA/") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
#tabs a span {float:none;}

#tabs a:hover span {
color:#FFF;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}

#tabs #current a {
background-position:0% -42px;
}
#tabs #current a span {
background-position:100% -42px;
}

</style>
<div id="tabs">
<ul>
<li><a href="Url/alamat link target 1"><span>MENU 1</span></a></li>
<li><a href="Url/alamat link target 2"><span>MENU 2</span></a></li>
<li><a href="Url/alamat link target 3"><span>MENU 3</span></a></li>
<li><a href="Url/alamat link target 4"><span>MENU 4</span></a></li>

<li><a href="Url/alamat link target 5"><span>MENU 5</span></a></li>
<li><a href="Url/alamat link target 6"><span>MENU 6</span></a></li>
<li ><a href="Url/alamat link target 7"><span>MENU 7</span></a></li>
<li><a href="Url/alamat link target 8"><span>MENU 8</span></a></li></ul>
</div>
   
   
   1. Pengeditan kode dapat anda lakukan dengan memperhatikan kode yang berwarna ungu muda, ungu tua, merah dan kuning
   2. Kode berwarna ungu muda : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1gO1Fw5vGcMQHRD9crWKmUX87ewww6mqSXflO773nlz3BXpXy9BDJ1yEXMgwAxOUdc_8Gs2tfDU5g7inNEbrzbYsE_dGxcp-ncSdqCzSGn3Qwjj7ZSTa8_chtHIYzXVR0ekzUmxqQlQ/ merupakan alamat gambar untuk latar 1. Ganti alamat gambar tersebut dengan alamat gambar milik anda sendiri. Tampilan gambarmya seperti ini :
      
      
   
   
   3. Kode yang berwarna ungu tua : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZiy3J2afJUubGyem1aYfzdcUyQhaQA9rVu_f0wViQ5axBA4WIMNCKxvNT3z2TU25p5QrTuhCHaqCoB_B1ecgZw0Ps0FdslTl-Dc4mKg0l3jpSwPQasx7wdb9bidivLsfxTc3DMkKiAA/ merupakan alamat gambar untuk latar 2. Ganti alamat gambar tersebut dengan alamat gambar milik anda sendiri. Tampilan gambarmya seperti ini :
      
      
   
   
   4. Kode bermarna merah : Url/alamat link target 1, 2, 3, 4, 5, 6, 7 dan 8 merupakan URL/alamat link target (jika menu diklik akan terbuka halaman lain sesuai URL/alamat link target yang anda pasang). Ganti kode tersebut dengan URL/alamat link target yang ingin anda tampilkan.
   5. Kode berwarna kuning : MENU 1,2 , 3, 4, 5, 6, 7dan 8 merupakan menu yang akan tampil pada tab menu. Ganti kode tesebut dengan menu yang ingin anda tampilkan.
   6. Jumlah menu yang ditampilkan pada tab menu horizontal versi 4 ini sebanyak 8 menu. Anda dapat menambah jumlah menu tersebut sesuai dengan keinginan.
6. Setelah selesai pengeditan kode diatas, klik tombol Simpan
7. Lihat tab menu horizontal pada blog anda.

Ditulis oleh Unknown, - Rating: 4.5

Judul : Tab Menu Horizontal
Deskripsi : Bagi anda yang memiliki blog dengan latar belakang gelap seperti EPG Studio, agar tampilannya tambah gelap sangat cocok menggunakan tab me...

Bagikan ke

Facebook Google+ Twitter