多年前曾寫過「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 搜尋
<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做的，想仿他的模板，不知有哪些注意的？？
回覆刪除