2 March 2013

Tutorial : Tabview #2


Assalamualaikum, Salam Sejahtera. :)
Bismillahirrahmanirrahim..

Tab Menu 3 dalam 1. Boleh jimatkan ruang hehe :D Ramai yang tanya tak henti-henti sejak qihah guna tabview ni sampai la sekarang. hehe.

1. Dashboard pergi ke Layout -> Add A Gadget -> HTML/JavaScript
2. Copy Codes ni dan pastekan di ruangan HTML/JavaScript tu
<div id='polskahekjor'>
<style type="text/css">

    div.P0L5K4 div.C0D3R    {height: 24px; overflow: hidden;float:left; }

div.P0L5K4 div.C0D3R a:hover    { background-color: #eee; }

div.P0L5K4 div.C0D3R a.Active{background:#000;color:#fff;}

 div.P0L5K4 div.N0T4C0D3R    { clear: both; border: 0px solid #bce8f6; overflow: hidden; background-color: #eee;}

    div.P0L5K4 div.N0T4C0D3R div.h3ll0c0d3r    { height: 100%; padding: 0px; overflow: hidden; }

    div.P0L5K4 div.N0T4C0D3R div.h3ll0c0d3r div.BL0g3R    { padding: 3px 5px; }

div.P0L5K4 div.C0D3R a    { background:#ccc; float: left;border-radius:11px 11px 0px 0px;
    display: block; width: 33%; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif; font-size: 12px; font-weight: 900; color: #151515;}

    </style>
<script type='text/javascript'>
    //<![CDATA[
    function P0L5K4_C0D3R(P4WN3D, id)
    {
      var P0L5K4 = document.getElementById(P4WN3D);
      var C0D3R = P0L5K4.firstChild;
      while (C0D3R.className != "C0D3R" ) C0D3R = C0D3R.nextSibling;
      var TT = C0D3R.firstChild;
      var i   = 0;
      do
      {
        if (TT.tagName == "A")
        {
          i++;
          TT.href      = "javascript:P0L5K4_J3R('"+P4WN3D+"', "+i+");";
          TT.className = (i == id) ? "Active" : "";
          TT.blur();
        }
      }
      while (TT = TT.nextSibling);
      var N0T4C0D3R = P0L5K4.firstChild;
      while (N0T4C0D3R.className != 'N0T4C0D3R') N0T4C0D3R = N0T4C0D3R.nextSibling;
      var h3ll0c0d3r = N0T4C0D3R.firstChild;
      var i    = 0;
      do
      {
        if (h3ll0c0d3r.className == 'h3ll0c0d3r')
        {
          i++;
          if (N0T4C0D3R.offsetHeight) h3ll0c0d3r.style.height = (N0T4C0D3R.offsetHeight-2)+"px";
          h3ll0c0d3r.style.overflow = "auto";
          h3ll0c0d3r.style.display  = (i == id) ? 'block' : 'none';
        }
      }
      while (h3ll0c0d3r = h3ll0c0d3r.nextSibling);
    }
    function P0L5K4_J3R(P4WN3D, id) { P0L5K4_C0D3R(P4WN3D, id);
    }
    function P0L5K4_H4CKR3W(P4WN3D) { P0L5K4_C0D3R(P4WN3D,  1);
    document.write('');}
    //]]>
    </script>

<form action="P0L5K4.html" method="get">
<div id="P0L5K4" class="P0L5K4">
<div style="width: 100%;" class="C0D3R">
<a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div><div style="width: 100%; height: 300px;color:#151515;" class="N0T4C0D3R">
<div class="h3ll0c0d3r" style='background:#fff;'>
<div class="BL0g3R">
CODE HERE! 1</center></center></center></center></center></div>
</div>
<div class="h3ll0c0d3r" style='background:#fff;'>
<div class="BL0g3R">
CODE HERE! 2</center></center></center></center></div>
</div>
<div class="h3ll0c0d3r" style='background:#fff;'>
<div class="BL0g3R">
CODE HERE! 3<center>
</div>
</div>
</div>
</form>
<script type="text/javascript">P0L5K4_H4CKR3W('P0L5K4');</script>
</div>

3. Adjust code

    Blue - Nama tab. (Jangan panjang sangat. senang letak number 1, 2, 3 je  hehe)
    Red - Code Widget yang anda nak letak (jangan panjang sangat. make it short)
    Pink - Warna Background Title Tab Menu yang ditekan (kalau rujuk gambar, warna pink) Boleh cari di SINI
    Hijau - Warna Background Title Tab Menu yang tak ditekan (kalau tengok gambar, dia warna biru) Boleh cari di SINI
    *Warna dalam code ni tak sama dengan warna dalam gambar di atas. Sila tukar sendiri*

4. Save

Source
Senang kan? Tak faham apa-apa boleh komen :D Yang lain kalau korang rasa tak reti nak ubah, better jangan ubah.. Nanti tak jadi pulak kang. yang lain2 boleh ubah sendiri. peace. Assalamualaikum
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 :)

4 comments:

  1. Terima kasih!! Lama tunggu tuto ni.. >_<

    ReplyDelete
  2. nak tanya, coding utk g+ following kecik mcm dlm gambar kt atas tu ada sekali ke tak.. kalau xda, boleh buat tuto untuk itu jugak x

    ReplyDelete
  3. tuto ni boleh guna utk blogskin gak ke?

    ReplyDelete

Budi Bahasa Budaya Kita