MEMBUAT TAB MENU HORIZONTAL

Sebuah blog akan menjadi kurang lengkap jika belum dipasang tab menu yang dapat dijadikan pedoman oleh pengunjung untuk melihat menu yang terdapat dalam blog tersebut.
Sebenarnya banyak cara untuk menampilkan menu misalnya : MEMBUAT LABEL BERPUTAR (LABEL CLOUDS) , MENGHEMAT HALAMAN POSTINGAN DENGAN DROPDOWN MENU , MENAMPILKAN LABEL DALAM TAB MENU
Atau dapat juga dengan cara membuat sendiri dengan sofware khusus untuk membuat tab menu. Silahkan anda lihat di CARA MEMBUAT TAB MENU atau MEMBUAT TAB MENU DENGAN CSS TAB GENERATOR dan MEMBUAT TAB MENU DENGAN CSS MENU GENERATOR
Semua link diatas merupakan cara untuk menampilkan menu yang terdapat dalam sebuah blog.
Jika anda ingin menampilkan tab menu yang sudah jadi (tab menu yang digunakan EPG Studio), tinggal copy kode dibawah ini kemudian masukan pada blog anda.
Cara memasukkan kode kedalam blog seperti biasa : Masuk ke Blogger, Rancangan, Elemen Halaman, Tambah Gadget, Klik tanda + pada HTML/JavaScript, Paste kode pada kolom yang tersedia, Simpan
Kodenya seperti ini, silahkan anda copy :


<!doctype transitional//en 1.0 -//w3c//dtd public html xhtml>
<style type="text/css">
<!--
/* CSS Tabs */
#navcontainer {
background: #6C82B5;
border-top: 5px solid #32527A;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#navlist {
list-style: none outside none;
margin: 0px;
padding: 0;
}
@media all {
#navlist {
text-align: center
}
}
#navlist li {
bottom: 0px;
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:#999999;
border: 1px solid #FFF;
bottom: 10px;
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: #e6e6e6;
bottom: 1px;
color: #FFF;
position: relative;
right: 1px;
}
#navlist a:active {
background: pink;
bottom: 0px;
color: blue;
position: relative;
right: 0px;
}

#navlist li#active {
background:#369 ;
bottom: 1px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}
html>body #navlist li#active {
background: #000;
margin: 0 2px 0 2px;
}

#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover {
background: #808080;
border-bottom: none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 10;
color: ;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
}
-->
</style>
<div id="navcontainer">
<ul id="navlist">
<!-- CSS Tabs -->
<li><a href="http://epg-studio.blogspot.com/search/label/TUTORIAL%20BLOGGER">TUTORIAL BLOGGER </a></li>
<li><a href=" http://www.blogger.com/profile/14536802221205706514" target="_balnk">PROFIL ADMIN</a></li>
<li><a href="http://bloglambirday.blogspot.com" target="_blank">AYAH BUNDA</a></li>
<li><a href="http://epg-studio.blogspot.com/search/label/FREE%20DOWNLOAD">FREE DOWNLOAD</a></li>
<li><a href="http://epg-studio.blogspot.com/2009/04/berita-bocornya-un-sma-2009.html">TUKERAN LINK</a></li>
<li><a href="http://epg-studio.blogspot.com/search?max-results=999"><blink>DAFTAR ISI</blink></a></li>
<li><a href="http://epg-studio.blogspot.com/2008/07/koleksi-award-epg-studio.html">KOLEKSI AWARD</a></li>
<li><a href="http://epg-studio.blogspot.com/2009/08/buku-tamu.html">BUKU TAMU</a></li></ul>
</div>
</!doctype>

COBA ...............AJAH

Posted in: Tutorial Blogger