Tab Blogger

Name	:	Widget Multi Tab Blogger Vol.1
Platform	:	Blogger
Widget Designed	:	VaNz
Installation	:	Put widget everywhere

Install :

<style> /* Modified By Roxx */ div.TabView div.Tabs { height: 24px; overflow: hidden; } div.TabView div.Tabs a { -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; float: left; display: block; width: 90px; /* Lebar Menu Utama Atas */ text-align: center; height: 24px; /* Tinggi Menu Utama Atas */ padding-top: 3px; vertical-align: middle; border: 1px solid #D8D8D8; /* Warna border Menu Atas */ border-bottom-width: 0; text-decoration: none; font-family: "Tahoma", Serif; /* Font Menu Utama Atas */ font-weight: 900; color: #000; /* Warna Font Menu Utama Atas */ } /* Modified By Roxx */ div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { color: #fff; background-image:url('http://lh3.ggpht.com/_TWC8zfBIdik/S_mtk3GmCTI/AAAAAAAAA0Y/Icb5zF59LTw/h2.gif'); /* Warna background Menu Utama Atas */ } div.TabView div.Pages { clear: both; border: 1px solid #D8D8D8; /* Warna border Kotak Utama */ overflow: hidden; background-color: #fff; /* Warna background Kotak Utama */ } /* Modified By Roxx */ div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; } /* Modified By Roxx */ </style> <script type="text/javascript"> 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"> <!-- 450 adalah lebar boks tab --> <a>Tab 1</a> <!-- Tab 1 adalah judul menu tab 1 --> <a>Tab 2</a> <!-- Tab 2 adalah judul menu tab 2 --> <a>Tab 3</a> <!-- Tab 3 adalah judul menu tab 3 --> </div> <div style="width: auto; height: 350px;" class="Pages"> <!-- 250 adalah tinggi boks tab --> <div class="Page"> <div class="Pad"> ini isi tab pertama </div> </div> <div class="Page"> <div class="Pad"> ini isi tab kedua </div> </div> <div class="Page"> <!-- Buat bikin tab baru --> <div class="Pad"> <!-- CONTENT --> ini isi tab Ketiga <!-- ISI CONTENT --> </div> <!-- jangan lupa ditutup --> </div> <!-- jangan lupa ditutup --> </div> </div> </form> <script type="text/javascript"> tabview_initialize('TabView'); </script>