Tutorial : Tab Like Me

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ|Salam Sejahtera


 Again tutorial. LOL do I care? haha. Okey 'tab' ni sesuai untuk template designer sahaja.Kalau untuk classic template {blogskin} hadifah tak tahu lah pulak. :P. Okey2. Pergi layout,html/java script,copy kod ni
<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: #DBCEBF; }
div.P0L5K4 div.C0D3R a.Active{background:#AD793D;color:#fff;}
 div.P0L5K4 div.N0T4C0D3R
    { clear: both; border: 0px solid #bce8f6; overflow: hidden; background-color: #AD793D;}
    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:#8F765A; 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>TITLE 1</a> <a>TITLE 2</a> <a>TITLE 3</a></div><div style="width: 100%; height: 300px;color:#151515;" class="N0T4C0D3R">
<div class="h3ll0c0d3r" style='background:#fff;'>
<div class="BL0g3R">
<center><img border="0"src="http://1.bp.blogspot.com/-Qc7SgO_QmZI/ULlSThAy0GI/AAAAAAAACAU/i29iRvN7DHg/s1600/peserta+19.png" width="210" />
<center>
KOD TITLE 1</div>
</div>
<div class="h3ll0c0d3r" style='background:#fff;'>
<div class="BL0g3R">
<div class='widget-content' style='overflow:auto; width:ancho; height:250px;'>
KOD TITLE 2
</div></div>
</div>
<div class="h3ll0c0d3r" style='background:#fff;'>
<div class="BL0g3R">
KOD TITLE 3</div>
</div>
</div>
</div></form>
<script type="text/javascript">P0L5K4_H4CKR3W('P0L5K4');</script>
</div>
NOTE :
ORANGE : KOD COLOUR
RED : TAJUK TAB KORANG TU. CONTOH DISCLAIMER,GA OR WHATEVER
BLUE : KOD2 YG KORANG NAK TUNJUK.

Preview and save. Tolong bagitahu kalau kod ni rosak ye. hadifah rasa semacam pulak. LOL. Kalau korang tak faham bagitahu eh? huhu. okey dah. hadifah stop dah buat tuto untuk harini. bye2 ^_^

3 comments:

  1. salam dik... ^^ kita guna benda ni menjadi..! thanks a lot.. hehe.. cuma nanti bold/higlightkan colour2 code yang perlu ditukar..kita dah pening..huhu..

    ReplyDelete

Tekan "publish" sekali je tau

Terima kasih komen

BUDI BAHASA BUDAYA KITA :)