工具 | 多标签小工具

好奇怪的标题。

就是这个↓


这个教程很复杂下。所以我一直很懒惰发 ><

1. 去设计》修改HTML,记得在 扩展窗口小部件模板 空格打勾

2. 按 Ctrl+f 寻找:



在它前面添加这些代码:


<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>

3. 保存代码即可。

4. 去设计》页面元素》添加小工具》HTML/Java Script,把这些代码paste进去


    <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: 200px; height: 300px;" class="Halamans">
        <div class="Halaman">
        <div class="Alas">
        <br/>

  
   第一格要写的字写在这 :)

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


    第二格要写的字写在这 :)

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


    第三格要写的字写在这 :)

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

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


5. 保存起来即可。

*红字的tab 1,tab 2, tab 3 改成你要放的名字。 
*深蓝的是小工具高度。
*天空蓝的是小工具宽度。 
*其他的可以自己改哦~

131 条评论:

  1. 你的like的html 那里得来?

    回复删除
  2. 你问我吖Dx
    你是广东人吖^^我是客家xD可是我不会说客家话><

    回复删除
  3. 等了好久哦~~~(泪奔

    回复删除
  4. 我的部落格好冷清哟~

    http://dream-foreverhut.blogspot.com/

    回复删除
  5. 可以给我fireworks的下载网址吗?

    回复删除
  6. 好巧哦~我昨天才去kaki bukit^^
    你住在靠近哪里的?有靠近马华那边的吗?=)

    回复删除
  7. 我客家也不会说客家话><
    上次的skin有人问我网址给了她
    结果跟我一样的skin 我就换了(好笨==)

    回复删除
  8. 要在halaman写内容?=(

    回复删除
  9. 哦..明白了一点点 =D 谢谢你丫~

    回复删除
  10. 我还是不明白哦!!!!!好难哦

    回复删除
  11. 这个要怎么弄成你有的照片呢??
    要有我想把我的fb account 也放在里面要怎样放呢??

    回复删除
  12. 我得房不到照片...能帮我弄吗?T-T
    还有...请问那个menu bar怎样添加?

    回复删除
  13. 可不可以改那个图片?

    回复删除
  14. 我還是弄不到啊 !!
    我弄到很丑..而且, 好亂哦 =[

    回复删除
  15. 問下吖...
    facebook那個贊的html是什麽

    回复删除
  16. 不用了
    翻google找到了

    回复删除
  17. 不好意思 又來麻煩你
    下面那個滾動條可以弄不見嗎

    回复删除
  18. 我看不懂><
    請問你可以說明白點嗎
    不好意思

    回复删除
  19. 把tab 1 的内容改成你要写的东西。
    tab 2,tab 3也一样~

    回复删除
  20. 加图片的话请放:
    < img src="图片网址"/>

    这里不用空格

    回复删除
  21. 我没你说得那么厉害啦=D
    还多亏你的教程呢,你也加油! XP

    回复删除
  22. 可以在标题名字那里放背景的吗?

    回复删除
  23. 请问请问呃....
    1. 可不可以把背景换掉啊??(换成背景图片)
    (只是更改这个工具的背景罢了,其他的不要...)要怎么做??
    2. 还有可不可以把标题的字体(Arial)更改掉?
    如果换成华文的可以吗??
    3. Tab内容里面的div <— 这个要保留吗??
    如果放了代码进去会是怎样的啊??(能不能给我看例子...不能没关系^^)
    4. 怎么把它弄成半圆的??
    谢谢你 x)

    回复删除
  24. 呃....
    那个背景和字体的我弄到了~~
    只是要放内容哪里我不会....
    完全写不到内容也....
    div <— 要不要保留啊??
    那如果要保留,(放了内容的代码会变成怎样)??
    你可以给我看(放了内容的代码会变成怎样)吗?

    回复删除
  25. 在div的下面写要的内容,还是在中间...!?

    回复删除
  26. 不明白 :X 如何加圖片和內容下去?
    若要像你這樣的話 該怎樣放?

    回复删除
  27. 图片放不到欸~><
    放出来变样了..

    放进图片的CODE是要放哪里?

    回复删除
  28. 放图片要这样
    < i m g src="图片网址"/>

    (img不要空格)

    回复删除
  29. i前面也不要空格。

    (我空格是因为blogger不给放这代码在评论~)

    回复删除
  30. 我写不到内容 ~ 怎么写 ?

    回复删除
  31. 那里一个字开始 ?

    还是直接打进去 ??

    回复删除
  32. 我不明白...
    我写的代号全部都会显示出来。
    为什么会这样的?

    回复删除
  33. 滚动条怎样拿掉? 怎样放背景? :D

    回复删除
  34. Xiiao Y
    把Tab 1 的内容换成你要写的字。
    Tab2 tab3也是

    譊芹
    你写什么代码呢?

    Fyonice.J
    你试试调整width和height吧。

    回复删除
  35. 换了 ..

    可是它不是出在那边里面而是在外面==

    回复删除
  36. 外面的是tab1~
    tab2和3的是里面的咯~

    回复删除
  37. 我跟着copy &paste 的...><

    回复删除
  38. 蛤?我不明白你在说什么==

    回复删除
  39. 苹果苹果!你知道怎样换背景和字体吗?

    回复删除
  40. 图片url怎么来的?去哪里可以知道?

    回复删除
  41. 为什么我的tab 1 没东西的?
    tab 2 有
    但是到tab 3 全部显示出来 T T
    http://vesper3donat.blogspot.com

    回复删除
  42. San Yan
    图片url是指着图片right click你的mouse
    然后按copy image location

    回复删除
  43. 囧囧
    我想是你搞错哪里吧。
    因为我的不会这样啊~

    回复删除
  44. 怎么莪弄楽,,没东西出现?!
    可能莪卟明白 /..\"
    能教莪么?!

    回复删除
  45. 如果我要放
    Tab 1是我写的blog
    Tab 2是我的介绍
    Tab 3是like me

    Tab 1 要怎样弄?
    就一按进来我的blog就是这个了。
    明白?

    回复删除
  46. 不明白怎样弄。。。
    按了没东西的><
    然后下面会有一个空白的地方/.\

    回复删除
  47. 对不起啊,你不明白我也不懂怎么解释了...

    回复删除
  48. 下面Tab1- Tab3

    是在自己的页面元素那里copy进去的吗??

    回复删除
  49. 那个tab1的内容那些也要改吗
    如果我不是放link的而是要写字的话要写哪里

    回复删除
  50. tab 1的内容改成要写的字~

    回复删除
  51. 那个(a)在哪里? 代码是什么? O.O

    回复删除
  52. 怎样换背景和这个的字体??

    回复删除
  53. 背景我不会。
    你在代码中找font-family: "Arial"
    Arial换成你要换的字体咯~~

    回复删除
  54. 可不可以空行的啊?
    我要写东西
    要空行 不可以@@

    回复删除
  55. '多标签小工具'和你上面的

    ‘最新帖子
    苹果简介
    颜色代码
    苹果素材
    部落格教程’ 那一行是一样意思的吗?

    回复删除
  56. 苹果,请问下哦...
    我要把图片[那个baby的图片]换掉
    要怎样呢?

    回复删除
  57. 请问内容怎样放 ?

    回复删除
  58. 请问 Tab 里面的内容要放什么 ?

    回复删除
  59. 这个教程我进行了小小的修改,你再看看~

    回复删除
  60. 这样我就帮不到你了,非常抱歉T^T

    回复删除
  61. 把“第一格要写的字写在这 :)”换成你要写的字啊~

    回复删除
  62. 他的照片要怎么换?...哪里有网站啊..thx

    回复删除
  63. 内容要怎么放 ??
    就像 我在 '' 第一格要写的字写在这 '' 写了-心情日记~
    按进去的东西的怎样弄 @@ ??

    回复删除
  64. 链接那些你要写的话可以在帖子里写先,
    然后在帖子那边的修改html copy那些代码~
    paste进去就有了^^

    回复删除
  65. 请问那些字怎样移去中间啊? (:

    回复删除
  66. 如果我要全部把帖子放进里面呢?

    回复删除
  67. paste进去上面代码的“第一格要写的字写在这 :)”那边咯~

    回复删除
  68. 我還是看不懂你在說什麼...

    回复删除
  69. 可以,只是你要修改代码咯~

    回复删除
  70. 嗯...第4個步驟我就不知道你在說什麼了...

    回复删除
  71. 什麽叫第一格的字寫在這裡?
    第二格字寫在這裡?
    到底是哪一格哦...
    我都不知道第一個 第二格 第三格在哪裡...
    我哪裡知道要寫在哪裡...

    回复删除
  72. 第一格就是我的"me"那个哦~
    从左边到右边的~

    回复删除
  73. 呀!! T^T 我找不到你的Cbox
    所以就在这里打扰你了!
    麻烦你去我的部落格点击查看我最新的帖子
    我的问题都写在上面 T^T
    我找不到解决方法啊 T^T
    拜托拜托~如果知道方法麻烦在我的Cbox 告诉我!
    麻烦了 T^T

    http://jessica-ting.blogspot.com/

    回复删除
  74. 蘋果 ,
    能否提供粉色的 標題給我呢 :D

    回复删除
  75. Apple姐...你可以去我的部落格看一下吗 ?? 我的第三格的东西都跑到第二格了TT ~~~ 怎么办?TT

    回复删除
  76. 哎呀,对不起啊,不要紧了,我重做过了^^

    回复删除
  77. Gaqian
    你自己修改代码就行了啊~~

    回复删除
  78. 可以弄背景透明吗?
    可以的话教教我 xD

    回复删除
  79. 苹果:要怎样把子放在下一行??

    回复删除
  80. 放 < / b r > 的代码
    (不用空格)

    回复删除

你的留言将在审核后发布。谢谢 ♥