Menu Tab View

Blogger mania...he..he..dari beberapa pembaca ternyata banyak yang menginginkan bentuk menu yang semacam ini
Nah....menu yang diatas dinamakan menu tab view. gimana sich cara bikinnya...yuk mari...
pada beberapa postingan yang sudah saya jumpai, banyak yang menawarkan cara membuatnya tapi kenbanyakan server hostingan untuk scriptnya ada yang mati, jadi tidak jalan menunya...nah nati saya posting dua-duanya kalo mau aman silahkan disimpan pada hostingan yang anda percaya. Jika mau pake script yang sama ya....tidak masalah.
nih scriptnya kalo mau diupload ke hostingan yg dipercaya...he..he..

function tabview_aux(TabViewId, id)<br /> {<br /> var TabView = document.getElementById(TabViewId);<br /> <br /> // ----- Tabs -----<br /> <br /> var Tabs = TabView.firstChild;<br /> while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;<br /> <br /> var Tab = Tabs.firstChild;<br /> var i = 0;<br /> <br /> do<br /> {<br /> if (Tab.tagName == "A")<br /> {<br /> i++;<br /> Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";<br /> Tab.className = (i == id) ? "Active" : "";<br /> Tab.blur();<br /> }<br /> }<br /> while (Tab = Tab.nextSibling);<br /> <br /> // ----- Pages -----<br /> <br /> var Pages = TabView.firstChild;<br /> while (Pages.className != 'Pages') Pages = Pages.nextSibling;<br /> <br /> var Page = Pages.firstChild;<br /> var i = 0;<br /> <br /> do<br /> {<br /> if (Page.className == 'Page')<br /> {<br /> i++;<br /> if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";<br /> Page.style.overflow = "auto";<br /> Page.style.display = (i == id) ? 'block' : 'none';<br /> }<br /> }<br /> while (Page = Page.nextSibling);<br /> }<br /> <br /> // ----- Functions -------------------------------------------------------------<br /> <br /> function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }<br /> <br /> function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }<br />

Berikut caranya :

Lha...ini link scriptnya yang diatas...
Taruh kode script dibawah ini diatas kode </head>

<script src='http://mr.koerniawan.googlepages.com/tabview.js' type='text/javascript'/>




Masukkan kode dibawah ini diatas ]]></b:skin>
<center>
div.TabView div.Tabs
{
height: 20px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 70px;/* Lebar Menu Utama Atas */
text-align: center;
height: 20px;/* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:12px;
border-top: 1px solid #454545;/* Warna Border Atas Menu Utama */
border-left: 1px solid #454545;/* Warna Border Kiri Menu Utama */
border-right: 1px solid #454545;/* Warna Border Kanan Menu Utama */
border-bottom: 1px solid #454545;/* Warna Border Bawah Menu Utama */
font-family: "Arial", Serif; /* Jenis Font Menu Utama Atas */
font-weight: 900; /* Ukuran Font Menu Utama Atas */
color: #000000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #cfcfcf; /* Warna Background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border-left: 1px solid #000000; /* Warna Border Kiri Kotak Utama */
border-right: 1px solid #000000; /* Warna Border Kanan Menu Utama */
border-bottom: 1px solid #000000; /* Warna Border Bawah Menu Utama */
overflow: hidden;
background-color: #392e26; /* Warna Background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 95%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</center>


kemudian simpan
masuk ke TATA LETAK - Tambah keget - teyus...HTML / Java Script
Naah masukkan bentuk kode dengan penjelasannya dibawah ini

<div id="TabView" class="TabView">
<div style="width: 250px;" class="Tabs">
<a>Menu :</a>
<a>Aku nih :</a>
<a>K-wan :</a>
</div>

<div style="width: 250px; height: 255px;"
class="Pages">

<div class="Page">
<div class="Pad">

<a href="
http://kyipe.blogspot.com/2009/10/pasang-domain-cocc.html" title="Domain">Pasang Domain CO.CC</a><br/>
<a href="
http://kyipe.blogspot.com/2009/10/mengganti-google-translate-dengan.html" title="Blogger">Pasang Google translate dengan gambar</a><br/>


</div>
</div>

<div class="Page">
<div class="Pad">
<center> <a href="ymsgr:sendIM?koerniawan_guru"><img border="0" src="http://opi.yahoo.com/online?u=koerniawan_guru&m=g&t=2"/></a> <br/><!-- Facebook Badge START --><a style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" href="http://id-id.facebook.com/people/Arif-Kurniawan/1181272605" target="_TOP" title="Arif Kurniawan">Arif Kurniawan</a><br/><a href="http://id-id.facebook.com/people/Arif-Kurniawan/1181272605" target="_TOP" title="Arif Kurniawan"><img width="120" style="border: 0px;" src="http://badge.facebook.com/badge/1181272605.906.1557095386.png" height="152"/></a><br/><a style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" href="http://id-id.facebook.com/facebook-widgets/" target="_TOP" title="Make your own badge!">Buat Lencana Anda</a><!-- Facebook Badge END --></center>

</div>
</div>

<div class="Page">
<div class="Pad">
<center>
<br/>
<script src="http://pub.mybloglog.com/comm3.php?mblID=2008032800315926&amp;r=widget&amp;is=small&amp;o=l&amp;ro=4&amp;cs=black&amp;ww=225&amp;wc=multiple&amp;l=n"></script></center></div></div></div></div>

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

Ganti Tulisan yang berwarna ungu dengan judul menu yang mau dipake,
Gantilah script yang berwarna hijau dengan menu yang kamu mau....he...he...
mau disi link postingan boleh
mau diisi link temen boleh
mau diisi air juga meledak...he....he...
Setelah selesai Simpan

Selamat mencoba !!