在Blogger加上標籤分頁欄

此教學來自凱特打結結該該叫。


最近才申請了這個部落格，Blogger的自由度的確遠比 無名小站、痞客邦、天空部落 來的大！
但想要好好發揮這份隨心所欲，恐怕得多做功課了！


一開始什麼東西都想放上側邊欄，
我的Flickr啦、還有Facebook啦、還有Purlk啦，甚至還想弄個留言板放上來，
不過真的什麼東西都放上來，卻又顯得雜亂，Load也重，網頁跑起來很慢！
還好發現了這個 標籤分類欄 ，把我想放的東西都收納起來，卻又一目暸然，真是便利～


只要按照以下步驟，就可以輕鬆為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> <br /> <script type="text/javascript">tabtampil_inisial('TabTampil');</script>

6. 按下「儲存」後，可獲得如下圖一塊空白的標籤分頁欄

我是TAB
我也是TAB → 這三個標籤處，只需打上分類的「項目名稱」
我還是TAB


這裡填[我是TAB]要顯示的內容
這裡填[我也是TAB]要顯示的內容 → 這三個分頁欄，可支援大部份外掛貼紙
這裡填[我還是TAB]要顯示的內容  



width: 100px → 上面三個小標籤欄的寬度 （此處寬度px值乘以三不得大於下面分頁欄的寬度）
width: 330px; height: 300px → 下面分頁欄裡內容的寬度、高度

其他的文字應填入區等等細項，都標明在原始碼裡囉！

方便大家直接編輯，當然也可以修改成符合自己版型的配色。

zj