Tutorial Tabbed Widget 3 in 1 (Style II)

petang ni nina nak ajar dan share satu tuto lagi. semalam nina ada buat untuk Style I. KLIK sini ok untuk lihat.. bentuk dia lain sikit lah. tapi rasanya yang ni lagi comey. dulu nina pernah guna tapi sekarang tak lagi. jimat guna benda ni. tak serabut :D

langkah 1 :
mula mula korang copy code dekat bawah ni dan pastekan di ruangan http://htmledit.squarefree.com/ (ada tulisan nanti delete dulu baru paste code ni). korang boleh edit di situ dulu dan dia ada preview terus tab korang tu. senang sikit kan..

<center><div id="widget" style="background:url(URL BACKGROUND) no-repeat left top; width:80;height:300px;padding: 30px 10px 0px;text-align: center;line-height: 1 ">
<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width:100px; /* Main Menu Top Width */
text-align:center ; height: 30px; /* Top High Main Menu*/
padding-top:8px; vertical-align:middle; border:2px solid #ffffff; /* Top Menu border color */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Top Fonts Main Menu */
font-weight:bold; color:#000; /* Main Menu Font Color Top */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #dedede; /* Background colors on Main Menu */ }
div.TabView div.Pages {clear:both; border:2px solid #FFFFFF; /* Main Box border color */ overflow:hidden; background-color:#FFFFFF; /* Main Box background color */ }
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>TAB 1</a>
<a>TAB 2</a>
</div>
<div style="width:200px; height:290px; " class="Pages">
<div class="Page">
<div class="Pad">
CODE HERE 1
</div>
</div>
<div class="Page">
<div class="Pad">
CODE HERE 2 
<div class="Page">
<div class="Pad">
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</div></div><center/></center></div></div></div></div></form></div></center>

warna hijau = url background yang korang suka *tak nak letak background pun tak apa, ABAIKAN*

warna purple = ikut apa yang ditulis

warna merah = title tab korang tu

warna biru = code korang yang nak letak macam code banner ke, cbox ke, etc

langkah 2 :
dah siap edit ? ok pergi dashboard -> design --> add a gadget --> HTML/Javascript

langkah 3 :
copy code tadi yang sudah siap di edit dan pastekan dekat ruangan HTML/Javascript
langkah 4 :
save !