Membuat Menu Tiga Halaman

Widget ini cocok di pasang pada blog yang mempunyai sidebar berukuran 230px lebih. Kelebihannya dapat menghemat ruang, mudah di pasang sesuai kebutuhan.

Contoh Gambar Tab Menu Tiga Halaman

cara memasang:

masuk ke dashboard

Klik Tab rancangan
 

 Klik Tab tambah gadget

Pilih HTML/JavaScript dan klik

Masukkan kode diruangan yang bertanda merah kemudian klik tab simpan


Salin kode dibawah ini:





<style type="text/css">
div.TabView div.Tabs
{height: 30px;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; border:0px solid ; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#0B610B; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color:#FF0066;  } /* Warna background Menu Utama Atas */
div.TabView div.Pages {clear:both; border:2px solid #BDBDBD;  overflow:hidden; background-color:#FFFFFF;  }
div.TabView div.Pages div.Page {height:100%; 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: 300px;" class="Tabs">
<a>fans Page</a>
<a>Game</a>
<a>Lain2</a>
</div>
<div style="width:230px; height:320px; " class="Pages">
<div class="Page">
<div class="Pad">

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F%23%21%2Fpages%2FKumboyono-software%2F314664138568490&amp;width=200&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:238px; height:290px;" allowtransparency="true"></iframe>

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

<p><a href='http://kumboyono-software.blogspot.com/2011/12/hydro-thunder.html'>hydro - thunder</a></p>
<p><a href='http://kumboyono-software.blogspot.com/2011/12/goofy-skateboarding.html'>goofy - skateboarding</a></p>
<p><a href='http://kumboyono-software.blogspot.com/2011/11/virtual-hottie-2.html'>virtual-hottie-2</a></p>
<p><a href='http://kumboyono-software.blogspot.com/2011/11/need-for-speed-hot-pursuit-2.html'>nfsp2</a></p>
<p><a href='http://kumboyono-software.blogspot.com/2011/10/texas-holdem-poker-3d.html'>texas holdem poker</a></p>



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

<p><a href='http://kumboyono-software.blogspot.com/2011/08/ass.html'>biar foto yg bercerita</a></p>



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


Catatan:
Warna Merah - Petunjuk untuk perubahan.  Silakan delete/hapus semua yang bertanda MERAH sebelum disalin
Warna Hijau - Judul Di Menu Utama
Warna Biru - Untuk mengubah ketinggian dan lebar kotak
Warna Kuning - Ruang tempat kode script. Contoh seperti tulisan berwarna kuning.

selesai.
dan lihat blognya.