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

36 comments:

  1. mcm mna nak kecik kan huruf tue ?

    ReplyDelete
  2. @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
  3. @adinda fatihah ^.^ Kena sabar buat ini. Lama-lama, jadi lah tuh. Kihah pun macam tuh juga

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

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

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

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

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

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

    ReplyDelete
  10. Kalau nak tmbh lagi tjuk bley tak ?

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

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

    ReplyDelete
  13. mcm mane nak letak gambar?

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

    ReplyDelete
  15. thanks untuk tutor ni faqihah . :D

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

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

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

    ReplyDelete

Your words defines you