Tab Hidangan Horizontal Dengan Css Versi 1

Membuat tab sajian dengan memakai CSS (Cascading Style Sheet) atau arahan sebagai suplemen dari HTML yang berfungsi untuk menambah keindahan tampilan blog/situs.
CSS mempunyai kelebihan dibanding java script adalah tidak menjadikan blog menjadi berat waktu loading.
Tab sajian dengan CSS ini kalau waktu memungkinkan akan dibentuk beberapa versi dengan tampilan yang berbeda satu sama lainnya.
Sebagai permulaan, dibawah ini merupakan cara menampilkan tab sajian dengan CSS bab 1.

Demo : Perhatikan gambar dibawah ini :



Jika anda tertarik dengan tampilan tab sajian versi 1 ini, ikuti langkah-langkahnya :

1. Masuk ke Blogger
2. Pilih Rancangan bab Elemen Halaman.
3. Klik Tambah gadget
   
4. Pilih HTML/Javascript
5. Copy arahan dibawah ini lalu paste pada kolom yang tersedia
   
   <style type="text/css">
#navcontainer {
background: #369;
border-top: 1px solid #9CC;
font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#navlist {
list-style: none outside none;
margin: 0;
padding: 0;
}

@media all {
#navlist {
text-align: center
}
}

#navlist li {
bottom: 11px;
display: inline;
line-height: 1.2em;
margin: 0;
padding: 0;
position: relative;
}

html>body
#navlist li {
background: #000;
margin: 0 3px 0 0;
padding: 4px 0px 4px 0;
}

#navlist a, #navlist a:link, #navlist a:visited {
background: #900;
border: 1px solid #FFF;
bottom: 2px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em;
margin: 0;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;
}

#navlist a:hover {
background: #C00;
bottom: 1px;
color: #FFF;
position: relative;
right: 1px;
}

#navlist a:active {
background: #999;
bottom: 0px;
color: #FFF;
position: relative;
right: 0px;
}

#navlist li#active {
background: #369;
bottom: 13px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}

html>body
#navlist li#active {
background: #000;
margin: 0 4px 0 4px;
}

#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover {
background: #369;
border-bottom: none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 0;
color: #FFF;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
}

</style>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a id="current" href="URL/alamat sajian 1">Menu 1</a></li>
<li><a href="URL/alamat sajian 2">Menu 2</a></li>
<li><a href="URL/alamat sajian 3">Menu 3</a></li>
<li><a href="URL/alamat sajian 4">Menu 4</a></li>
<li><a href="URL/alamat sajian 5">Menu 5</a></li>
<li><a href="URL/alamat sajian 6">Menu 6</a></li>
<li><a href="URL/alamat sajian 7">Menu 7</a></li></ul>
</div>


6. Kode yang berwarna kuning dan merah ganti dengan apa yang ingin anda tampilkan
   
   1. Kode yang berwarna merah adalah : URL/alamat sajian 1,2 ,3 ,4, 5. 6 dan 7 ganti dengan sajian atau label pada blog anda.
   2. Kode yang berwarna kuning adalah : Menu 1, 2, 3, 4, 5, 6 dan 7 ganti dengan URL/alamat link sasaran dari menu
      
7. Jika jumlah sajian yang ditampilkan masih kurang, anda sanggup menambah beberapa sajian lainnya dengan catatan, pahami dulu arahan dari setiap sajian pada contoh.
8. Setelah final pengeditan, klik tombol Simpan
9. Lihat hasilnya
   

Selamat mencoba, biar berhasil.....

Sumber http://epg-studio.blogspot.com/

Bagikan Artikel ini