Tab Hidangan Horizontal Dengan Css Versi 4
Bagi anda yang mempunyai blog dengan latar belakang gelap menyerupai EPG Studio, biar tampilannya tambah gelap sangat cocok memakai tab meu horizontal versi 4 ini.Dengan latar belakang berwarna hitam ditambah dengan dua gambar yang juga warna gelap yakni merah renta dengan hover merah kehitaman akan mejadikan tampilan blog anda semakin gelap.
Demo : perhatikan pola dibawah ini :
CARA MEMBUATNYA
- Masuk ke Blogger
- Pilih Rancangan bab Elemen Halaman
- Klik Tambah Gadget
- Pilih TML/Javascript
- Copy instruksi 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:#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/AVvXsEgPm7F1LOLPL3Y7YE75p3kHtwSGPovBLvi_URSXdm0E4IkPEy9h44W9YAnh1SCL6VzRJSmcjl3ngfDTUwK9f5UuWj9BiaDf-npDhM4kU_XQeZjGHVj-U0wdoPd6kbBQNSdSbc9NvLCtjqI/") 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/AVvXsEjXJgb4VwlnI9LxWfFG2iLGPTUGuXgtdaifWW5x_Y8s-j8LXYOC7WkSWe0a5CFbqhXbfMUlJq1OSec7Z-hsc6njUSF-Jcep44WVf4pl03AFF2mBkgg9FQkqbXVjY2nuVg8XGFrOe3eogoo/") 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 sasaran 1"><span>MENU 1</span></a></li>
<li><a href="Url/alamat link sasaran 2"><span>MENU 2</span></a></li>
<li><a href="Url/alamat link sasaran 3"><span>MENU 3</span></a></li>
<li><a href="Url/alamat link sasaran 4"><span>MENU 4</span></a></li>
<li><a href="Url/alamat link sasaran 5"><span>MENU 5</span></a></li>
<li><a href="Url/alamat link sasaran 6"><span>MENU 6</span></a></li>
<li ><a href="Url/alamat link sasaran 7"><span>MENU 7</span></a></li>
<li><a href="Url/alamat link sasaran 8"><span>MENU 8</span></a></li></ul>
</div>- Pengeditan instruksi sanggup anda lakukan dengan memperhatikan instruksi yang berwarna ungu muda, ungu tua, merah dan kuning
- Kode berwarna ungu muda :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPm7F1LOLPL3Y7YE75p3kHtwSGPovBLvi_URSXdm0E4IkPEy9h44W9YAnh1SCL6VzRJSmcjl3ngfDTUwK9f5UuWj9BiaDf-npDhM4kU_XQeZjGHVj-U0wdoPd6kbBQNSdSbc9NvLCtjqI/merupakan alamat gambar untuk latar 1. Ganti alamat gambar tersebut dengan alamat gambar milik anda sendiri. Tampilan gambarmya menyerupai ini : - Kode yang berwarna ungu renta :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXJgb4VwlnI9LxWfFG2iLGPTUGuXgtdaifWW5x_Y8s-j8LXYOC7WkSWe0a5CFbqhXbfMUlJq1OSec7Z-hsc6njUSF-Jcep44WVf4pl03AFF2mBkgg9FQkqbXVjY2nuVg8XGFrOe3eogoo/merupakan alamat gambar untuk latar 2. Ganti alamat gambar tersebut dengan alamat gambar milik anda sendiri. Tampilan gambarmya menyerupai ini : - Kode bermarna merah :
Url/alamat link sasaran 1, 2, 3, 4, 5, 6, 7 dan 8merupakan URL/alamat link sasaran (jika hidangan diklik akan terbuka halaman lain sesuai URL/alamat link sasaran yang anda pasang). Ganti instruksi tersebut dengan URL/alamat link sasaran yang ingin anda tampilkan. - Kode berwarna kuning :
MENU 1,2 , 3, 4, 5, 6, 7dan 8merupakan hidangan yang akan tampil pada tab menu. Ganti instruksi tesebut dengan hidangan yang ingin anda tampilkan. - Jumlah hidangan yang ditampilkan pada tab hidangan horizontal versi 4 ini sebanyak 8 menu. Anda sanggup menambah jumlah hidangan tersebut sesuai dengan keinginan.
- Setelah tamat pengeditan instruksi diatas, klik tombol Simpan
- Lihat tab hidangan horizontal pada blog anda.
