Tab Hidangan Horizontal Dengan Css Versi 5

Tampil dengan variasi warna orange dan biru muda, warna hover biru muda dan border bawah dengan ukuran yang agak tebal ialah 10px dengan warna orange serta warna latar belakang abu-abu muda.
Warna latar belakang dan warna border bawah sanggup anda ganti sesuai harapan yang penting fahami dulu kode-kode yang digunakan.

Demo : Perhatikan gambar dibawah ini :

CARA MEMBUATNYA

1. Masuk ke Blogger
2. Pilih Rancangan bab Elemen Halaman
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Copy isyarat dibawah ini lalu 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:#EFF4FA;
font-size:93%;
line-height:normal;
border-bottom:10px solid #DD740B;
}
#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://lh6.googleusercontent.com/_1j80TgNqd_8/TbaYaT6KL7I/AAAAAAAACto/Y5bV8ctYFNE/tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("https://lh5.googleusercontent.com/_1j80TgNqd_8/TbaYaFRKa3I/AAAAAAAACtk/RXQSL3iw1vw/tabright.gif") 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 id="current"><a href="Url 1"><span>Menu 1</span></a></li>
<li><a href="Url 2"><span>Menu 2</span></a></li>
<li><a href="Url 3"><span>Menu 3</span></a></li>
<li><a href="Url 4"><span>Menu 4</span></a></li>

<li><a href="Url 5"><span>Menu 5</span></a></li>
<li><a href="Url 6"><span>Menu 6</span></a></li>
<li><a href="Url 7"><span>Menu 7</span></a></li></ul>
</div>
   
   
   
   1. Kode dengan warna pink, coklat muda, coklat tua, merah dan kuning merupakan isyarat yang sanggup anda ganti
   2. Kode berwana pink : border-bottom:10px solid #DD740B meupakan ukuran ketebalan boder bawah dan warna boder bawah. Ganti ukuran dan warna tersebut dengan yang anda inginkan
   3. Kode berwarna coklat muda : https://lh6.googleusercontent.com/_1j80TgNqd_8/TbaYaT6KL7I/AAAAAAAACto/Y5bV8ctYFNE/tableft.gif merupakan alamat latar 1. Ganti alamat gambar tersebut dengan milik anda. Ini tampilan gambarnya :
      
      
   
   
   
   4. Kode berwarna coklat renta :https://lh5.googleusercontent.com/_1j80TgNqd_8/TbaYaFRKa3I/AAAAAAAACtk/RXQSL3iw1vw/tabright.gif merupakan alamat latar 2. Ganti alamat gambar tesebut dengan milik anda. Ini tampilan gambarnya :
      
      
   
   
   
   5. Kode berwarna merah : Url 1,2, 3, 4, 5, 6 dan 7 merupakan alamat Link sasaran dari setap menu. Ganti alamat tersebut dengan URL/link sasaran dari blog anda.
   6. Kode berwarna kuning : Menu 1, 2, 3, 4, 5, 6 dan 7 merupakan sajian dari blog anda yang akan tampil pada tab menu. Ganti isyarat tersebut dengan sajian yang ingin anda tampilkan.
   7. Tambahkan beberapa sajian lainnya sesuai dengan keperluan
      
6. Setelah tamat pengeditan, klik tombol Simpan
7. Lihat Tab Menu Horizontal pada blog anda sekarang.
   

Selamat mencoba, agar bermanfaat....
Sumber http://epg-studio.blogspot.com/

Bagikan Artikel ini