Membuat Horisontal Tab Menu

Pernah liat Horizontal Tab Menu...???, Selain tampilannya yang menarik, juga bisa meringkas halaman supaya terlihat simple........ Langsung aja liat gambar dibawah untuk lebih jelasnya :



Untuk membuatnya silahkan Copy Paste Kode berikut di side kafe anda :

----------------------------------------------------------------------------------------------
<style type="text/css">div.TabTampil div.TTs{height: 24px; overflow: hidden; }div.TabTampil

div.TTs a:hover, div.TabTampil div.TTs a.Active{ background-color: #E67817; }div.TabTampil

div.Halamans{ clear: both; border: 1px solid #E67817; overflow: hidden; background-color:

#FAE393;}div.TabTampil div.Halamans div.Halaman{ height: 100%; padding: 0px; overflow:

hidden; }div.TabTampil div.Halamans div.Halaman div.Alas{ padding: 3px 5px; }div.TabTampil

div.TTs a{ border-left:1px solid #FFE394; border-right:1px solid #E67817; border-top:1px

solid #E67817; border-bottom:0px solid #E67817; float: left;display: block; width: 70px;

text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration:

none; font-family: "Arial", Serif;font-size: 12px; font-weight: 900; color: #222}</style>

<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 220px;" class="TTs">
<a>Posting</a> <a>Arsip</a> <a>Link</a>
</div>
<div style="width: 220px; height: 250px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<ul>
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>
</div>
</div>
<div class="Halaman">
<div class="Alas"><MainOrArchivePage>
<ul>
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
</ul>
</MainOrArchivePage></div>
</div>
<div class="Halaman">
<div class="Alas"><ul>
<li><a href="http://202.162.207.238:1104" target="_blank">Cuplies Celluler</a></li>
<li><a href="http://hibasy.blogspot.com" target="_blank">Hisyam</a></li>
<li><a href="http://oprexcomputer.wordpress.com" target="_blank">Oprex Computer</a></li>
<li><a href="http://www.nubatik.net" target="_blank">PCNU Kota Pekalongan</a></li>
<li><a href="http://cuplies.wordpress.com" target="_blank">Media Karya Ilmiah</a></li>
<li><a href="http://nufas.wordpress.com" target="_blank">Tutorial Komputer</a></li>
<li><a href="http://lirakliriklagu.blogspot.com" target="_blank">Download Lirik & MP3</a></li>
</ul></div>

</div>
</div>
</div>
</form>

<script style="text/javascript" src="http://h1.ripway.com/masfays/newscriptabs.js"></script>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
----------------------------------------------------------------------------------------------
Keterangan :
Warna Ungu : Tab Pertama
Warna Biru : Tab Kedua
Warna Hijau : Tab Ketiga

Sumber http://www.tips-trick.com