Multi Tab Widget For Blogger/Blogspot Blogs -Updated

ဒါကေတာ့ Multi Tab Widget လုပ္နည္းေလးပါ။ Multi Tab Widget ပံုုကေတာ့ေအာက္ပါပံု
အတိုင္းေတြ႕ႏိုင္ပါတယ္။ html codeပို႔စ္မွာေပၚေအာင္စမ္းရင္းနဲ႔ ဒီ Multi Tab Widget ဟာ
လန္းတာနဲ႔ က်ေနာ့္လိုပဲ မသိေသးသူမ်ားအအတြက္တင္ေပးလိုက္တယ္။
က်ေနာ္လည္းhtmlcodeေတြေပၚေအာင္ညီေလးဇင္မ်ိဳးေအာင္အကူအညီနဲ႔အဆင္ေျပသြား
တာေလ။ ေမးရင္းစမ္းရင္းနဲ႔ပဲ လိုခ်င္တာေလးေတြ အဆင္ေျပခဲ့တယ္။

Multi Tab Widget လုပ္နည္းကို ေအာက္ပါအတိုင္း ဖတ္ျပီးလုပ္ေဆာင္ျခင္းျဖင့္ အဆင္ေျပ
သြားမွာပါ။ ၀ါသနာရွိရင္ စမ္းၾကည့္လိုက္ေလ...ဒါမွမရွင္းေသးလွ်င္ မူရင္းလင့္အတုိင္းသြားျပီး
ဖတ္ရႈႏိုင္ပါတယ္။

• Go To Blogger > Layout > Edit HTML
• Search for </head> (Tip: Use Browser Search Box. Press Ctrl + F )
• And Just above </head> paste the code below,

    <script type='text/javascript'>

    //<![CDATA[

    function tabtampil_oom(TPID, id)
    {
      var Tabtampil = document.getElementById(TPID);
      var TTs = Tabtampil.firstChild;
      while (TTs.className != "TTs" ) TTs = TTs.nextSibling;
      var TT = TTs.firstChild;
      var i   = 0;
      do
      {
        if (TT.tagName == "A")
        {
          i++;
          TT.href      = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";
          TT.className = (i == id) ? "Active" : "";
          TT.blur();
        }
      }
      while (TT = TT.nextSibling);
      var Halamans = Tabtampil.firstChild;
      while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
      var Halaman = Halamans.firstChild;
      var i    = 0;
      do
      {
        if (Halaman.className == 'Halaman')
        {
          i++;
          if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
          Halaman.style.overflow = "auto";
          Halaman.style.display  = (i == id) ? 'block' : 'none';
        }
      }
      while (Halaman = Halaman.nextSibling);
    }
    function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);
    }
    function tabtampil_inisial(TPID) { tabtampil_oom(TPID,  1);
    document.write('');}

    //]]>

    </script>

*
Save your template

Adding the code for Multi Tab widget to HTML/JavaScript widget

    <style type="text/css">
    div.TabTampil div.TTs
    {height: 24px; overflow: hidden; }
    div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
    { background-color: #eee; }
    div.TabTampil div.Halamans
    { clear: both; border: 1px solid #fff; overflow: hidden; background-color: #ffffff;}
    div.TabTampil div.Halamans div.Halaman
    { height: 100%; padding: 0px; overflow: hidden; }
    div.TabTampil div.Halamans div.Halaman div.Alas
    { padding: 3px 5px; }
    div.TabTampil div.TTs a
    { border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom:0px solid #eee; float: left;
    display: block; width: 95px; 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: #000000}
    </style>
    <form action="tabtampil.html" method="get">
    <div id="TabTampil" class="TabTampil">
    <div style="width: 300px;" class="TTs"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div>
    <div style="width: 300px; height: 300px;" class="Halamans">
    <div class="Halaman">
    <div class="Alas">
    <br/>

    Tab 1 content goes here

    </div>
    </div>
    <div class="Halaman">
    <div class="Alas">
    <br/>


    Tab 2 content goes here


    </div>
    </div>
    <div class="Halaman">
    <div class="Alas">
    <br/>


    Tab 3 content goes here

    </div>
    </div>
    </div>
    </div>
    </div></form>

    <script type="text/javascript">tabtampil_inisial('TabTampil');</script>

မူရင္းလင့္