2009/4/16

一分鐘在Blogger加上Tab View分類欄

如大家所見,我小修了一下我的部落格版型,以前的模樣實在是讓我覺得有點擁擠、紛亂,所以動了一下邊欄的位置,改了一下整體的色調。說實話CSS有時是很煩人工程,想說趁此機會分享一些小心得或收穫給廣大bloggers,大家不用像我一樣研究到腦筋打結眼睛脫窗的地步。


話說在好久好久以前,我就肖想在邊欄有個像這樣的Tab View分類欄

凱特打結tabs

本想偷懶找個教學,卻遍尋不著......只能參考國外的文章,大部分居然都要扯到jQuery;我只不過是想加個有Tab讓我點來點去自爽的欄位啊!於是乎,是的。為了研究它,本身現在似乎有點鬥雞眼的症狀,畢竟哀家唸的是法律,程式語言不是我的母語(javascript、jQuery一類的語言),年紀又有一小把了學習能力衰退得緊,學得來真可謂孝感動天了。 結果就在我的側欄,歡迎大家參觀;為了方便大家取用,少傷點腦細胞,把它整理成這段原始碼。只要按照以下步驟就可將它放進blogger部落格里囉!
1.到Blogger的控制頁面(後台)
2.選擇「版面配置」->「網頁元素」
3.點選「新增小工具」,會跳出可選用的小工具清單
4.點選「 HTML/JavaScript」,按下滑鼠左鍵,進入設定畫面
5.複製以下程式碼貼入


<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: #669933; } div.TabTampil div.katedajay { clear: both; border: 1px solid #7a5; overflow: hidden; background-color: #ffffff;} div.TabTampil div.katedajay div.dajay { height: 100%; padding: 0px; overflow: hidden; } div.TabTampil div.katedajay div.dajay div.gaigai { padding: 3px 5px; } div.TabTampil div.TTs a { border-left:1px solid #669933; border-right:1px solid #669933; border-top:1px solid #669933; border-bottom:0px solid #669933; float: left; display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif; font-size: 12px; font-weight: 900; color: #fff; } </style> <form action="tabtampil.html" method="get"> <div id="TabTampil" class="TabTampil"> <div style="width: 350px;" class="TTs"> <a>我是Tab</a> <a>我也是Tab</a> <a>我還是Tab</a></div> <div style="width: 330px; height: 300px;" class="katedajay"> <div class="dajay"> <div class="gaigai"> 這裡填[我是Tab]要顯示的內容 </div> </div> <div class="dajay"> <div class="gaigai"> 這裡填[我也是Tab]要顯示的內容 </div> </div> <div class="dajay"> <div class="gaigai"> 這裡填[我還是Tab]要顯示的內容 </div> </div> </div> </div></form> <script style="text/javascript" src="http://katejane12.googlepages.com/katejscriptab.js"></script>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>



夠簡單吧! 其他的文字應填入區等等細項,都標明在原始碼裡囉!方便大家直接編輯,當然也可以修改成符合自己版型的配色。 最後,容我發個小牢騷,本部落格歡迎各種不同想法的言論;因為本人以為,真理會越辯越明。但是,嚴禁匿名攻訐,光明點、磊落點,好嗎?

50 則留言:

  1. 因可以內嵌了,所以我又換回Blogger內建的意comment囉^^y

    回覆刪除
  2. 多謝凱特分享
    我也來試試看

    回覆刪除
  3. 只有blogger可以用厚~~真是一失足成千古恨,早知道就跳凱特這個站了

    回覆刪除
  4. @阿森
    我去痞客試過囉!
    痞客okok:)

    回覆刪除
  5. @小笠

    不客氣:)

    回覆刪除
  6. 原本企鵝是想自己弄 可踹了很久一直搞不定
    恰巧在貴格看到完全符合需求的掛件
    所以就順手拿來使用囉~
    最後…大大滴感謝您的無私分享喔~~ ^^

    回覆刪除
  7. 我在Google搜尋也都是英文版的教學文
    不過語法都差不多
    話說我也寫了一篇湊熱鬧教學文 XD
    有引用的貴站語法~~如有不妥還請告知喔:)

    最後謝謝您無私的分享 ^^

    回覆刪除
  8. @菲菲 OK沒問題低^^

    回覆刪除
  9. 感謝分享, 真的很讚, 可以省掉不少空間 ^__^

    回覆刪除
  10. 謝謝分享^^,我也將語法註明出處記錄在我的BLOG裡~

    回覆刪除
  11. @dllee @閒閒 不要客氣:)

    回覆刪除
  12. 請問寬度若為230但還是需要3個分頁該修改哪裡?

    回覆刪除
  13. @kimhu width: 350px改成230px,330px也改到比230小這樣了嗎?

    回覆刪除
  14. 真的很簡單

    回覆刪除
  15. 你好 :) 又來叨擾 XD
    想請問凱特一個笨問題
    如果在痞客使用,想跟您的一樣以滑鼠觸碰方式而不是點擊按鈕才開啟表單內容的語法onmouseover="javascript:hidexx();dis(2)" onmouseout="javascript:hidexx();該寫入您提供的語法中哪個部分才會有效果呢?

    抱歉~~我是初學者 ^^"

    回覆刪除
  16. @菲菲

    我去試試怎樣可以在痞客用
    然後會寫篇教學^^

    回覆刪除
  17. 谢谢你,我正需要这个,终于找到了。
    请问,如果我要加多几个同样的分类栏,要怎么做?
    (因为放第2个分类栏在blogspot,就卡在第一个Tab不能移动了。)问题出在那里呢?
    请替我看看http://sbwthk.blogspot.com.了解情况。
    谢谢你。

    回覆刪除
  18. 我找这个找很久了。所以粉感谢你~

    另外我修改了宽度。
    呵呵。希望您不会介意~

    另外我还有问题(真烦~
    为什么我的只是显示到2个栏位不是3个?
    请教下~ 谢谢哟^^

    查看-> http://kwanx.pixnet.net/blog

    回覆刪除
  19. 謝謝凱特提供的方法^^
    真的簡單多囉~

    我在痞客實裝ok了^^

    回覆刪除
  20. @kwanx 因為你的寬度不夠阿~
    所以只能顯示兩個:)

    回覆刪除
  21. @豬拔 很高興有幫到你的忙:)

    回覆刪除
  22. 不知道怎麼回事,今天突然無法換頁了!!

    可以麻煩幫我看一下嗎!?
    還是提點一下

    回覆刪除
  23. @豬拔 你今天有改噗浪的寬度嗎?
    應該是你內層的寬度"200"太寬了:)

    回覆刪除
  24. @翠羽 因為你tab裡頭放的東西
    寬度太寬囉:)

    回覆刪除
  25. 哈~原來是別的欄位的語法出問題~
    已經解決囉^^

    感謝^^

    回覆刪除
  26. 謝謝你提供的工具,真的有助版面的簡潔,感恩。

    回覆刪除
  27. 我共放了3个分类栏,宽度都是一样的。如果把它们的次序对调,排在第一就能正常运作,后面的2个就不能。请问我要怎样修改?

    谢谢你。http://sbwthk.blogspot.com

    回覆刪除
  28. ya ya ya 我是第100個按推薦的 haha : )

    回覆刪除
  29. 我也有試了一下~~ XD
    Tab View分類欄~真的很棒!!



    但..想請問一下~凱特網頁右邊的分類欄是怎麼用的?

    我想跟你一樣...一碰到按鈕就跳那一頁...不需再按...

    要從哪裡改呢?? 感謝 @ @"

    回覆刪除
  30. 你好~請教唷
    因為header-wrapper裡面還包含了navigation-center及navigation-wrapper兩個元件及背景調整,
    我想在標題右邊加入網頁元素,一直無法成功,可請你幫忙看看嗎?謝啦
    http://weimemo.blogspot.com/

    回覆刪除
  31. @簡介 那比較複雜一點,改天我再來寫一篇好了 :)

    回覆刪除
  32. @peter 標題的位置不能加,所以我才會做成大圖的^^

    回覆刪除
  33. 凱特問妳問題~我將語法完整貼上了,可是移過去都沒動作耶?
    我的部落格:http://blog.chiawei.org/
    請問這是什麼問題

    回覆刪除
  34. 自訂網域突然掛掉= =
    改回來了~http://rahuashura.blogspot.com/
    不過突然就可以用了…好奇怪(搔頭)

    另外上面網友提出的問題我也很想問,怎樣才能讓Tab View隨指標指向標籤變換頁面?
    好像沒下文捏~

    回覆刪除
  35. Kate姐接,您好~

    想請教一下您那排tab的頁面怎麼製作的?

    就是profile, album, link, feedback四頁

    我看連結好像跟一般 blogger 產生的不太一樣?

    回覆刪除
  36. 哎喲,
    太忙整個忘了寫咩...
    這禮拜一定完成^^

    回覆刪除
  37. 大家,
    這篇好像就是耶XDD
    http://katejane12.blogspot.com/2010/06/blog-post_15.html

    回覆刪除
  38. >///<
    阿~阿~凱特姐接.... 小的表達能力不好,
    其實我原本是打算問連結(URL)的部份。

    我看您Tab的連結都是類似:
    http://katejane12.blogspot.com/p/xxx.html

    可是我一般產生blogger的網誌連結應該都是類似:
    http://i-dpi.blogspot.com/2011/03/yyy.html

    我其實是想問為什麼您的不是以年月當資料夾,而是p?

    不過,您回覆的那邊網誌也相當有參考價值,太感謝了!!

    真希望我的網誌也能做的像您這麼舒適~~~

    回覆刪除
  39. @d p i ok,這個我今天就寫一篇吧:)

    回覆刪除
  40. @d p i 這部分我今天會寫一篇文章說明:)

    回覆刪除
  41. >///<

    謝謝凱特大姐

    回覆刪除
  42. 感謝凱特大姐的語法,可以直接套用很方便~~

    另外,您的很多hack滿實用的喔

    回覆刪除
  43. 想要放个tab在自己的部落格, 结果发现到你很可爱的文章 >"<

    回覆刪除
  44. 這裡填[我是Tab]要顯示的內容←怎样填囧

    回覆刪除
  45. @Ika Suigetsu把[我是Tab]改成你要顯示的內容阿 :)

    回覆刪除