Cara Membuat Menu Tab View

Jika Agan sering mampir ke blog orang pasti sering melihat menu tab view yang terpajang di side bar seperti gambar berikut.

Kelebihan widget yang satu ini tentu sangat menghemat ruang. Apabila Agan berniat mencobanya, silahkan salin kode berikut :

<div style="text-align: center;">
<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 71px; /* Lebar Menu Utama Atas */
text-align:center ; height: 26px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #000000; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana",Arial; font-size: 9px; /* Font Menu Utama Atas */
font-weight:bold; color:#ff0000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:11px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #444444; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #000000; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:80%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 219px;" class="Tabs">
<a>Info KB</a>
<a>Mbah Google</a>
<a>Status-Mu</a>
</div>
<div style="width:219px; height:210px; " class="Pages">
<div class="Page">
<div class="Pad">
<div style="text-align: center;">
<a href="http://www.alexa.com/siteinfo/ketagihanbaca.blogspot.com"><script src="http://xslt.alexa.com/site_stats/js/s/a?url=ketagihanbaca.blogspot.com" type="text/javascript"></script></a>
</div>
<div style="text-align: center;">
<a href="http://www.prchecker.info/" title="Google PageRank Checker" target="_blank">
<img src="http://pr.prchecker.info/getpr.php?codex=aHR0cDovL2tldGFnaWhhbmJhY2EuYmxvZ3Nwb3QuY29tLw==&tag=2" alt="Google PageRank Checker" style="border:0;" /></a>
</div>
</div>
</div>
<div class="Page">
<div class="Pad">
<script src="//www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/107950459797439355026/CGS_Small_English.xml&amp;synd=open&amp;w=220&amp;h=60&amp;title=Google+Search&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>
</div>
</div>
<div class="Page">
<div class="Pad">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/live_stream_box.php?app_id=148202208531311&amp;width=200&amp;height=350&amp;via_url&amp;always_post_to_friends=false" style="border: medium none; height: 350px; overflow: hidden; width: 200px;"></iframe>
</div>
</div>
</div>

</div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>

Perhatikan :

Tulisan ini :

Info KB <--- Judul tab 1

Mbah Google <--- Judul tab 2
Status-Mu <--- Judul tab 3

Kode ini :

<div style="text-align: center;">
<a href="http://www.alexa.com/siteinfo/ketagihanbaca.blogspot.com"><script src="http://xslt.alexa.com/site_stats/js/s/a?url=ketagihanbaca.blogspot.com" type="text/javascript"></script></a>
</div>
<div style="text-align: center;">
<a href="http://www.prchecker.info/" title="Google PageRank Checker" target="_blank">
<img src="http://pr.prchecker.info/getpr.php?codex=aHR0cDovL2tldGFnaWhhbmJhY2EuYmxvZ3Nwb3QuY29tLw==&tag=2" alt="Google PageRank Checker" style="border:0;" /></a>
</div>

Itu adalah kode widget Alexa dan widget PageRank untuk isi tab 1. Silahkan Agan ganti dengan kode apa saja dari milik Agan.

Kode ini :

<script src="//www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/107950459797439355026/CGS_Small_English.xml&amp;synd=open&amp;w=220&amp;h=60&amp;title=Google+Search&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

Itu adalah widget mesin pencari untuk isi tab 2.  Silahkan Agan ganti dengan kode apa saja dari milik Agan.

Kode ini : 

 <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/live_stream_box.php?app_id=148202208531311&amp;width=200&amp;height=350&amp;via_url&amp;always_post_to_friends=false" style="border: medium none; height: 350px; overflow: hidden; width: 200px;"></iframe>

Itu adalah kode widget commentbox Facebook untuk isi tab 3. Silahkan Agan ganti dengan kode apa saja dari milik Agan.

Angka ini :

width:219px  Setel angka ini untuk merubah ukuran lebar.

height:210px Setel angka ini untuk merubah ukuran tinggi.

Oya, untuk pemasangannya, tinggal di pasang di side bar. Jika Agan lupa saya pernah bahas caranya di sini. Selamat mencoba.