TAB MENU HORIZONTAL DENGAN CSS VERSI 1

epg-studio.blogspot.com


Membuat tab menu dengan menggunakan CSS (Cascading Style Sheet) atau kode sebagai pelengkap dari HTML yang berfungsi untuk menambah keindahan tampilan blog/situs.
CSS memiliki kelebihan dibanding java script yaitu tidak mengakibatkan blog menjadi berat waktu loading.
Tab menu dengan CSS ini jika waktu memungkinkan akan dibuat beberapa versi dengan tampilan yang berbeda satu sama lainnya.
Sebagai permulaan, dibawah ini merupakan cara menampilkan tab menu dengan CSS bagian 1.

Demo : Perhatikan gambar dibawah ini :

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

1. Masuk ke Blogger
2. Pilih Rancangan bagian Elemen Halaman.
3. Klik Tambah gadget
4. Pilih HTML/Javascript
5. Copy kode dibawah ini kemudian 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 menu 1">Menu 1</a></li>
<li><a href="URL/alamat menu 2">Menu 2</a></li>
<li><a href="URL/alamat menu 3">Menu 3</a></li>
<li><a href="URL/alamat menu 4">Menu 4</a></li>
<li><a href="URL/alamat menu 5">Menu 5</a></li>
<li><a href="URL/alamat menu 6">Menu 6</a></li>
<li><a href="URL/alamat menu 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 yaitu : URL/alamat menu 1,2 ,3 ,4, 5. 6 dan 7 ganti dengan menu atau label pada blog anda.
   2. Kode yang berwarna kuning yaitu : Menu 1, 2, 3, 4, 5, 6 dan 7 ganti dengan URL/alamat link target dari menu
7. Jika jumlah menu yang ditampilkan masih kurang, anda dapat menambah beberapa menu lainnya dengan catatan, pahami dulu kode dari setiap menu pada contoh.
8. Setelah selesai pengeditan, klik tombol Simpan
9. Lihat hasilnya

Selamat mencoba, semoga berhasil.....

Posted in: Tutorial Blogger