Tutorial : Buat Tabview Tanpa Ubah Template.

Kihah letak benda tuh, Kak Mish Apple ask Kihah macam mana nak buat gituhh Hari Khamis hari tu. So, Kihah nak buat hari ini. Sebenarnya, Kihah request kat kak AMIRAH. Dia pun belajar dari Kazumiro . Credit kepada dua-dua. HEHE

Dashbord >> Design >> Page Elements >> Add A Gadget >> HTML/JavaScript

Pastekan kod ni kat ruangan HTML/JavaScript tadi.

<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>TAJUK 1</a>

<a>TAJUK 2</a>

</div>

<div style="width:200px; height:290px; " class="Pages">

<div class="Page">

<div class="Pad">

ISI TAJUK 1

</div>

</div>

<div class="Page">

<div class="Pad">

ISI TAJUK 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>

*NotaNota
URL BACKGROUND : Korang abaikan pun tak pe. Delete jer perkataan tuh.
 PINK & BIRU : Isikan dengan perkataan/kod korang oukeey?

S