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

A+
多年前曾寫過「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


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


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

2 則留言:

  1. 博主你好,看到一个很好的网站用blogger做的,想仿他的模板,不知有哪些注意的??

    回覆刪除
    回覆
    1. 你好,可能要描述的更確切一點,光這一句話我不確定要回答什麼喔,目前就想到版權而已。
      然後,因主題跟文章無關,再麻煩留言到這裡:http://www.wfublog.com/2014/01/guestbook-2.html 謝謝! ^^

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP