TAB MENU HORIZONTAL DENGAN CSS VERSI 4

 epg-studio.blogspot.com


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 :

CARA MEMBUATNYA

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/AVvXsEgsqx1d0_N2s2pewQQAp-x_gY8Xh26yqG_uCRkAcZ0KZqjnZhsqRjn8broFk_-BWQSG_TKQ7ZYvXT0bFjE9heLlr8enzaO-Z8Iv2yOPlDqV_MRz7L1ztESZv_0l9GWofb0KDwgI-zohJHQ/") 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/AVvXsEjHwigm5xMCLHKwdjCDUDWysl1AKFBRzgS5pceKsvEhdjB7CWQRXZ9od38k4c-KuP_GyReMNq1n-3_J_PyZx0Y6x4NjVF5AjJuNy-VMdJx4MM-kr2VBQ3DAH19mriUnLHlyPCU6KFjzTsk/") 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/AVvXsEgsqx1d0_N2s2pewQQAp-x_gY8Xh26yqG_uCRkAcZ0KZqjnZhsqRjn8broFk_-BWQSG_TKQ7ZYvXT0bFjE9heLlr8enzaO-Z8Iv2yOPlDqV_MRz7L1ztESZv_0l9GWofb0KDwgI-zohJHQ/ 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/AVvXsEjHwigm5xMCLHKwdjCDUDWysl1AKFBRzgS5pceKsvEhdjB7CWQRXZ9od38k4c-KuP_GyReMNq1n-3_J_PyZx0Y6x4NjVF5AjJuNy-VMdJx4MM-kr2VBQ3DAH19mriUnLHlyPCU6KFjzTsk/ 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.

Posted in: Tutorial Blogger