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

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,
Tata letak, 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>