Blogger 側邊欄自製分頁(Tab)小工具﹍Bootstrap 應用

多年前曾寫過「Blogger 側邊欄簡易分頁功能」系列文章，當時做的 Tab 分頁樣式比較簡單，沒有使用任何外掛，效果算是堪用。

從當年的版面樣式也可看到歲月的痕跡，頁簽形狀用 CSS 刻得很辛苦，還有瀏覽器相容度問題。現在網頁技術太進步，有各種處理 CSS 版面的框架(framework)，例如最知名的 Bootstrap，預設效果就有各種好看的按鈕、頁簽形狀等，還可讓我們不必煩惱瀏覽器相容性問題。

本篇會利用 Bootstrap 重新製作 Blogger 側邊欄分頁工具，優點有這些：

• 安裝方式比舊版簡便許多
• 安裝多個分頁工具時不會打架
• 不用注意小工具的擺放位置

有了這樣的分頁工具，不但可讓側邊的版面簡潔，也可減少讀者的滑鼠捲動時間。

點此看範例網頁

(圖片出處: peakpx.com)

本文索引

• 一、準備動作
• 二、安裝 Bootstrap
• 三、安裝主程式
• 四、常見 FAQ

一、準備動作

1. HTML/JS 工具

這個分頁工具比較建議，放入可以用「HTML/Javascript」工具執行的內容。

也就是說，原本側邊欄「HTML/Javascript」工具的程式碼，可以直接塞在這個工具裡面來執行，沒有問題。


2. 官方工具

如果希望在這個分頁工具，塞入 Blogger 官方工具的話，有些可能無法執行。

因為有的官方工具是用 JS 動態執行的，複製到這個分頁工具後就有可能失效，請注意這點。

如果你放了官方工具在分頁，有的可以正常運作、有的不行，那麼不能執行的就建議不要使用，這是沒有辦法的事。


3. 找出側邊欄小工具 ID

如果還是要使用官方工具的話，需要找出小工具的 ID，方法如下──

Blogger 後台 → 主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋小工具的標題字串，以下是範例程式碼：

<b:widget id='CustomSearch1' locked='false' title='搜尋' type='CustomSearch'>

<b:widget id='Label1' locked='false' title='標籤' type='Label'>
以上兩段程式碼藍色字串就是該區塊的 ID，請記下自己範本裡面的 ID 字串，不一定跟以上長得一樣。

二、安裝 Bootstrap

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

請到後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'/>
<style>
#CustomSearch1, #Label1{display:none;}
ul.tabMenu>li{margin:0 10px -1px 0;padding:0}
ul.tabMenu>li>a{cursor:pointer}
.tab-content{padding-top:10px}
</style>

• 第 1 行綠字可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。
• 第 2 行載入 Bootstrap 的 CSS 檔案。
• 如果分頁沒有使用官方工具，可刪除藍色字串那一行；如果有使用官方工具，藍色字串請改為自己的小工具 ID，記得前面都要有 "#"，每個 ID 用小寫逗號 "," 隔開，最後一個 ID 後面不要有逗號。
• 如果熟悉 CSS，可自行修改其他 CSS 參數。

完成後儲存範本。

三、安裝主程式

到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、及以下程式碼：

1. <ul class="tabMenu nav nav-tabs">
2. <li class="active"><a data-toggle="tab">分頁 1</a></li>
3. <li><a data-toggle="tab">分頁 2</a></li>
4. <li><a data-toggle="tab">分頁 3</a></li>
5. </ul>
6.  
7. <div class="tab-content">
8. <div class="tab-pane active" data-id="">這裡填入第 1 個分頁的 HTML/Javascript 小工具的內容</div>
9. <div class="tab-pane" data-id="Label1">這裡填入第 2 個分頁的 HTML/Javascript 小工具的內容</div>
10. <div class="tab-pane" data-id="HTML4">這裡填入第 3 個分頁的 HTML/Javascript 小工具的內容</div>
11. </div>
12.  
13. <script>
14. (function($) {
15. var hideTitle = true; // 如要顯示分頁工具的標題, 請改成 false
17. if(hideTitle){var scripts=document.getElementsByTagName("script"),thisScript=scripts[scripts.length-1];$(thisScript).parent().siblings("h2").remove()};var _0xa4f2=["\x24\x28\x22\x2E\x72\x20\x41\x22\x29\x2E\x42\x28\x33\x28\x29\x7B\x36\x20\x63\x3D\x24\x28\x37\x29\x2C\x61\x3D\x63\x2E\x74\x28\x29\x2C\x62\x3D\x63\x2E\x46\x28\x29\x2E\x39\x28\x22\x2E\x31\x2D\x35\x22\x29\x3B\x63\x2E\x39\x28\x29\x2E\x66\x28\x22\x34\x22\x29\x3B\x63\x2E\x38\x28\x22\x34\x22\x29\x3B\x62\x2E\x75\x28\x29\x2E\x66\x28\x22\x34\x22\x29\x2E\x78\x28\x61\x29\x2E\x38\x28\x22\x34\x22\x29\x7D\x29\x3B\x24\x28\x33\x28\x29\x7B\x24\x28\x22\x2E\x31\x2D\x79\x22\x29\x2E\x65\x28\x33\x28\x29\x7B\x36\x20\x63\x3D\x24\x28\x37\x29\x2C\x64\x3D\x63\x2E\x59\x28\x22\x31\x37\x2D\x71\x22\x29\x2C\x62\x2C\x61\x3B\x67\x28\x64\x29\x7B\x61\x3D\x24\x28\x22\x23\x22\x2B\x64\x29\x3B\x62\x3D\x61\x2E\x73\x28\x22\x2E\x68\x2D\x35\x22\x29\x2E\x32\x28\x29\x3B\x63\x2E\x32\x28\x62\x29\x3B\x61\x2E\x76\x28\x29\x7D\x7D\x29\x3B\x24\x28\x22\x2E\x31\x2D\x35\x22\x29\x2E\x65\x28\x33\x28\x29\x7B\x36\x20\x61\x3D\x24\x28\x37\x29\x3B\x67\x28\x61\x2E\x32\x28\x29\x2E\x77\x28\x22\x6A\x20\x6B\x22\x29\x3C\x30\x29\x7B\x61\x2E\x7A\x28\x22\x3C\x69\x20\x6C\x3D\x27\x43\x2D\x44\x3A\x20\x45\x3B\x20\x6D\x2D\x47\x3A\x48\x3B\x27\x3E\x3C\x61\x20\x49\x3D\x27\x4A\x3A\x2F\x2F\x4B\x2E\x4C\x2E\x4D\x2F\x4E\x2F\x4F\x2F\x50\x2D\x51\x2D\x31\x2D\x68\x2D\x52\x2E\x32\x27\x20\x53\x3D\x27\x54\x27\x20\x6C\x3D\x27\x6D\x2D\x55\x3A\x20\x56\x3B\x20\x57\x3A\x20\x23\x58\x3B\x20\x6F\x2D\x5A\x3A\x20\x31\x30\x2C\x20\x31\x31\x2C\x20\x31\x32\x2D\x31\x33\x3B\x20\x6F\x2D\x31\x34\x3A\x20\x31\x35\x3B\x27\x20\x31\x36\x3D\x27\x70\x20\u5074\u908A\u6B04\u5206\u9801\u5DE5\u5177\x5C\x6E\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x6A\x20\x6B\x27\x3E\u24E6\x20\x70\x20\x31\x38\x3C\x2F\x61\x3E\x3C\x2F\x69\x3E\x22\x29\x7D\x7D\x29\x7D\x29\x3B","\x7C","\x73\x70\x6C\x69\x74","\x7C\x74\x61\x62\x7C\x68\x74\x6D\x6C\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x61\x63\x74\x69\x76\x65\x7C\x63\x6F\x6E\x74\x65\x6E\x74\x7C\x76\x61\x72\x7C\x74\x68\x69\x73\x7C\x61\x64\x64\x43\x6C\x61\x73\x73\x7C\x73\x69\x62\x6C\x69\x6E\x67\x73\x7C\x7C\x7C\x7C\x7C\x65\x61\x63\x68\x7C\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73\x7C\x69\x66\x7C\x77\x69\x64\x67\x65\x74\x7C\x64\x69\x76\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x73\x74\x79\x6C\x65\x7C\x74\x65\x78\x74\x7C\x7C\x66\x6F\x6E\x74\x7C\x42\x6C\x6F\x67\x67\x65\x72\x7C\x69\x64\x7C\x74\x61\x62\x4D\x65\x6E\x75\x7C\x66\x69\x6E\x64\x7C\x69\x6E\x64\x65\x78\x7C\x63\x68\x69\x6C\x64\x72\x65\x6E\x7C\x72\x65\x6D\x6F\x76\x65\x7C\x69\x6E\x64\x65\x78\x4F\x66\x7C\x65\x71\x7C\x70\x61\x6E\x65\x7C\x61\x66\x74\x65\x72\x7C\x6C\x69\x7C\x63\x6C\x69\x63\x6B\x7C\x6D\x61\x72\x67\x69\x6E\x7C\x74\x6F\x70\x7C\x35\x70\x78\x7C\x70\x61\x72\x65\x6E\x74\x7C\x61\x6C\x69\x67\x6E\x7C\x72\x69\x67\x68\x74\x7C\x68\x72\x65\x66\x7C\x68\x74\x74\x70\x7C\x77\x77\x77\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x63\x6F\x6D\x7C\x32\x30\x31\x37\x7C\x30\x37\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x73\x69\x64\x65\x62\x61\x72\x7C\x62\x6F\x6F\x74\x73\x74\x72\x61\x70\x7C\x74\x61\x72\x67\x65\x74\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x7C\x6E\x6F\x6E\x65\x7C\x63\x6F\x6C\x6F\x72\x7C\x63\x63\x63\x7C\x61\x74\x74\x72\x7C\x66\x61\x6D\x69\x6C\x79\x7C\x68\x65\x6C\x76\x65\x74\x69\x63\x61\x7C\x61\x72\x69\x61\x6C\x7C\x73\x61\x6E\x73\x7C\x73\x65\x72\x69\x66\x7C\x73\x69\x7A\x65\x7C\x31\x31\x70\x78\x7C\x74\x69\x74\x6C\x65\x7C\x64\x61\x74\x61\x7C\x54\x61\x62\x73","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0xede9x1,_0xede9x2,_0xede9x3,_0xede9x4,_0xede9x5,_0xede9x6){_0xede9x5= function(_0xede9x3){return (_0xede9x3< _0xede9x2?_0xa4f2[4]:_0xede9x5(parseInt(_0xede9x3/ _0xede9x2)))+ ((_0xede9x3= _0xede9x3% _0xede9x2)> 35?String[_0xa4f2[5]](_0xede9x3+ 29):_0xede9x3.toString(36))};if(!_0xa4f2[4][_0xa4f2[6]](/^/,String)){while(_0xede9x3--){_0xede9x6[_0xede9x5(_0xede9x3)]= _0xede9x4[_0xede9x3]|| _0xede9x5(_0xede9x3)};_0xede9x4= [function(_0xede9x5){return _0xede9x6[_0xede9x5]}];_0xede9x5= function(){return _0xa4f2[7]};_0xede9x3= 1};while(_0xede9x3--){if(_0xede9x4[_0xede9x3]){_0xede9x1= _0xede9x1[_0xa4f2[6]]( new RegExp(_0xa4f2[8]+ _0xede9x5(_0xede9x3)+ _0xa4f2[8],_0xa4f2[9]),_0xede9x4[_0xede9x3])}};return _0xede9x1}(_0xa4f2[0],62,71,_0xa4f2[3][_0xa4f2[2]](_0xa4f2[1]),0,{}))
18. })(jQuery);
19. </script>

以下修改請參照以上程式碼行號：

B~D：藍色字串可改為自訂的分頁名稱

H~J：如果第 1 ~ 3 個分頁，都是放「HTML/JS」程式碼的話，這 3 行的綠色字串請依序置換為對應的「HTML/JS」內容。

I~J：假設第 2 ~ 3 這兩個分頁，要放官方工具的內容，可刪除綠色字串，並將紅色字串改為自己的官方工具 ID 字串。但如果都沒有要放官方工具的內容，請刪除紅色字串，保持像 H 行 data-id 後面的狀態。

O：預設會隱藏這個分頁工具的標題。如果要顯示標題的話，請將 true 改為 false。

儲存後即可，想要先看效果可前往展示頁面：

點此看範例網頁

四、常見 FAQ

日後若有常見問題，會持續補充在此。


延伸閱讀：
更多實用工具：

• 本站使用的 Blogger hack 及工具整理