6 August 2011

Tutorial : Buat Tabview Tanpa Ubah Template.


Photobucket

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
author image

FAQIHAH HUSNI

Hi! I'm the writer and author of this webpage. Currently studying in SM Sains Kubang Pasu or know as KUPSIS in Kedah. A Kedahan girl for sure! 2017 is my senior year there and I'm fighting to 9A+ in SPM. Do pray the good result for me and others 1317 warriors. Thank you for your time :)

37 comments:

  1. tuto ni agak susah, keliru. hee

    ReplyDelete
  2. mcm mna nak kecik kan huruf tue ?

    ReplyDelete
  3. @biyha EH/ Ni kak Biyha ke? Tak Percaya. Cubit pipi jap, HAHA. Sabar jelah. saya copy dan edit kat Microsoft Office Word 2007. Hehehe

    ReplyDelete
  4. @adinda fatihah ^.^ Kena sabar buat ini. Lama-lama, jadi lah tuh. Kihah pun macam tuh juga

    ReplyDelete
  5. @miminasir ;p Awak tulis tadi, huruf besar ke kecik? saya tulis biasa kaa

    ReplyDelete
  6. jumpe pun tuto ni. thanks kihah. begune sgt ;]
    mochi2 :D

    ReplyDelete
  7. Thanks ! :D Btw, cmne nk ltk gmbr ye ?

    ReplyDelete
  8. Camne nak ltk gambar kat tabview tu eyh ? CER CITER-2 !

    ReplyDelete
  9. x dapat buat lr. isi tajuk 1 n 2 jadi sekali pulak ? napa tu > btw its a nice tuto.

    ReplyDelete
  10. thnx 4 d tuto . how to put the picture ?

    ReplyDelete
  11. Kalau nak tmbh lagi tjuk bley tak ?

    ReplyDelete
  12. agak susah pada mulanya. tup tup jadi jugak! thanx :)

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. dah lame carik tutor ni.baru jumpe.
    terima kasih yer! suda menjadi :>

    ReplyDelete
  15. salam , macam mne na letak gambar ea ? tolong sgt3 ^_^

    ReplyDelete
  16. Awesome Tutorial !
    Thank You , Kihah !
    <3

    ReplyDelete
  17. saya gune tau.. btw,thank for the tuto :)

    ReplyDelete

Budi Bahasa Budaya Kita