Tutorial cara letak multitab widget pada blog [3 Tab ] dengan efek tukar warna background

Multi tab widget ni sama saja macam yang sebelum ni..tapi versi ni ada fancy sikit..
Aku tambah coding javascript.. warna background blog akan berubah jika anda klik pada tab tu...

Live demo
cuba klik pada tab1 tab2 dan tab3...tgk apa jadik..

Tab 1 Tab 2 Tab 3

Masukkan code widget di sini tab 1

Masukkan code widget di sini tab 2

Masukkan code widget di sini tab 3

cara pasang widget ni cukup senang...
pergi ke desbot---desaign---ada gadget---html / javascript...
copy code di bawah kemudian save....

<div id='polskahekjor'>
<script type="text/javascript">function bgChange(bg){document.body.style.background=bg;}</script>
<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:#00ffcc;color:#ff3366;}

    div.P0L5K4 div.N0T4C0D3R
    { clear: both; border: 1px solid #ff3366; 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:#ff3366; 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: 11px; 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 onclick="bgChange('#6633FF')">Tab 1</a> <a onclick="bgChange('#151515')">Tab 2</a> <a onclick="bgChange('#fff')">Tab 3</a></div>
<div style="width: 100%; height: 300px;color:#151515;" class="N0T4C0D3R">
<div class="h3ll0c0d3r" style='background:#ffb3c6;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 1

</div>
</div>
<div class="h3ll0c0d3r" style='background:#b3ecff;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 2

</div>
</div>
<div class="h3ll0c0d3r" style='background:#ecb3ff;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 3

</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">P0L5K4_H4CKR3W('P0L5K4');</script>
</div>

Untuk tukar warna background...tukar code warna yang aku kasi kaler warna hijau tu..yang tulisan tab tu tukar la ikut suka...

code warna RUJUK SINI

Sekian