Home
About Us
Site Map
Change Links
Testimoni
Download
Contact Mail
skip to main
|
skip to sidebar
Selasa, 11 Januari 2011
Tab Blogger
Do you want to share?
Do you like this story?
YOUR GOOGLE ADSENSE CODE HERE (300x250)
YOUR GOOGLE ADSENSE CODE HERE (300x250)
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>
YOU MIGHT ALSO LIKE
0 komentar:
Posting Komentar
◄ Posting Lebih Baru
Posting Lama ►
Langganan:
Posting Komentar (Atom)
Sign up for hot news and sent to your inbox
Feed
Subscribe to my Rss feeds!
Twitter
Follow me on Twitter!
Facebook
Find me on Facebook!
Advertisements
Advertisements
0 komentar:
Posting Komentar