Blogger Hack - Tab View 簡單型

話說好久以前就想要用個簡單漂亮的 Tab 在 Blogger 旁邊
可是都一直沒能達到理想狀態，後來就放棄了╮("╯▽╰)╭

終於在一個有意無意的情況下發現了好物

Create Tab View - Kendhin
Multi Tab Widget For Blogger/Blogspot Blogs -Updated


話不多說，馬上就來試試
簡單的 Tab 經修改後如下
<style type="text/css">
div.TabTampil div.TTs
{height: 22px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #191919; }
div.TabTampil div.kamancy9
{ clear: both; border: 0px solid #666666; overflow: hidden; background-color: #191919;}
div.TabTampil div.kamancy9 div.kamancy8
{ height: 100%; padding-top: 10px; overflow: hidden; }
div.TabTampil div. div.kamancy8 div.kamancy7
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #191919; border-right:0px solid #191919; border-top:1px solid #191919; border-bottom:0px solid #191919; float: left;
display: block; width: 100px; height: 22px; vertical-align: middle; padding-top: 3px; padding-left: 3px;
font-size: 12px; font-weight: 900; color: #666666; }
</style>

<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 330px;" class="TTs"> <a>這是TabView1</a> <a>這是TabView2</a> <a>這是TabView3</a> </div>
<div style="width: 330px; height: 500px;" class="kamancy9">
<div class="kamancy8">
<div class="kamancy7">
這是TabView1的內容
</div>
</div>

<div class="kamancy8">
<div class="kamancy7">
這是TabView2的內容
</div>
</div>

<div class="kamancy8">
<div class="kamancy7">
這是TabView3的內容
</div>
</div>

</div>
</div>
</form>
<script style="text/javascript" src="http://sites.google.com/site/kamancy999/js/tabview.js"></script>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>


tabview.js 檔(中段)的內容
<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 kamancy9 = Tabtampil.firstChild;
      while (kamancy9.className != 'kamancy9') kamancy9 = kamancy9.nextSibling;
      var kamancy8 = kamancy9.firstChild;
      var i    = 0;
      do
      {
        if (kamancy8.className == 'kamancy8')
        {
          i++;
          if (kamancy9.offsetHeight) kamancy8.style.height = (kamancy9.offsetHeight-2)+"px";
          kamancy8.style.overflow = "auto";
          kamancy8.style.display  = (i == id) ? 'block' : 'none';
        }
      }
      while (kamancy8 = kamancy8.nextSibling);
    }
    function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);
    }
    function tabtampil_inisial(TPID) { tabtampil_oom(TPID,  1);
    document.write('');}//]]>
</script>