Cari Artikel Blog Ini

Total Tayangan Halaman

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>



  • Gantilah tata warna yang ada sehingga penampilannya berbeda dengan EPG Studio
  • Gantilah huruf yang berwarna merah dengan menu pada blog anda

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
4 Comments

4 komentar :

×÷·´¯`·.·•[ peace ]•·.·´¯`·÷× mengatakan...

Mantab kang infonya selalu up to date banget buat new bie dalam dunia blogger,sukses selalu ya kang.

Gian mengatakan...

mas tab menunya qo malah jadi satu di bagian kanan, g kaya mas berjajar gitu??? mohon bantuannya...thx....

Multimedia Visual Desain mengatakan...

wahhh.......... keren.........
jadi banyak tahu nih, ahayy...... tengkyu :D

Rizwan mengatakan...

nice gan infonya....ane coba deh
http://onerizone.blogspot.com

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!