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

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

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

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

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

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

點此看範例網頁

(圖片出處: peakpx.com)

一、準備動作

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」→ 填入標題、及以下程式碼：


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

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 及工具整理