2012年7月1日 星期日

[教學]讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(1) 安裝 HTML 小工具

[教學]讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能__(1) 安裝 HTML 小工具

Wayne Fu 0 A+

(Pic from: jQuery TOOLS)
當側邊欄的 HTML 小工具(例如最新文章、最新留言)越來越多時,如果能有個分頁功能將數個小工具合併為一欄,那麼不但側邊欄看起來清爽很多,訪客也不會覺得滑鼠滾輪好像滾不完似的。

最近想幫側邊欄裝個簡單的分頁功能,原本考慮這個簡潔無外掛不耗系統資源的「陽春模式」,後來看多了「jQuery Tab」的外掛又覺得陽春版有點單薄,應該要有個頁籤的圖案比較美觀些。結果這些外掛實際安裝起來才發現,有的是安裝方式繁雜,又要下載外掛、又要上傳到自己的空間、程式碼還得分批在範本中的不同區塊安裝;不然就是把「最新文章」等 HTML 小工具加進去之後,結果不知道哪裡的程式碼互相衝突而無法執行。所以弄了半天回到原點,決定動手把陽春版加工,自己用 CSS 刻出頁籤的圖案。如果你安裝側邊欄分頁功能時,也不喜歡太複雜的步驟,那麼以下是我加工後的簡易安裝程式碼與心得。





一、安裝方式

1. 請到 Blogger 後台 →「版面配置」→「新增小工具」→選擇「HTML/Javascript」

2. 標題請自填,內容請複製以下的程式碼:


2012.10.24 補充

如果安裝完發現小工具區塊的位置,似乎跟上方有一點距離,很可能是「最新回應+留言者頭像更新版」→「二、安裝程式碼」→ 第 4 點所提的現象,可以試著把 A~AI 行的 CSS 區搬到 BB 行(也就是 HTML 與 javascript 的中間),應該可以改善這個現象。


3. 接著填入自訂的 HTML 小工具內容──

  A. 如果跟預設一樣要塞入三個小工具,那麼依序在 AR、AV、AZ 這三個地方把小工具的程式碼貼上即可。

  B. AL~AN 紅色的文字敘述請改為自訂文字。

  C. 如果要增減小工具的數目,例如塞入 "4" 個小工具,那麼除了 AK~BA 的程式碼請按照他的邏輯來增加新的小工具內容,另外 AL~AN 紅色的參數 "3" 都要改成 "4"AL~AY 所有藍色的參數也請改為對應的數字

最後存檔即可,想先看效果可參考下圖──




4. 不過怎麼沒有出現標題呢?因為我覺得加上標題有點醜,如果你也不想把標題顯示出來,請按照以下步驟:

  A. 到 Blogger 後台 → 範本 → 編輯 HTML

  B. 找到剛剛新增的小工具區塊,比較快的方法是搜尋剛剛自己設定的標題名稱。

  C. 搜尋到標題名稱後,往下個三行左右,會看到下面這行程式碼──

<h2 class='title'><data:title/></h2>
可以把這一行刪除,不過建議把這一行改成以下程式碼──

<!--<h2 class='title'><data:title/></h2>-->
這樣標題名稱就不會顯示了,而且以後還是可以藉由搜尋標題名稱來找到這個區塊。或許你覺得直接把標題名稱留空白即可,但這麼做的話,除了以後很難搜尋到這個區塊,而且在側邊欄還是會顯示這一行空白喔,導致這個頁籤小工具的上方空了一行。因此為了版面好看,最好還是照以上步驟進行。

另外一點小提醒,本篇的程式碼測試環境為新版的範本,在 Chrome、FireFox、IE 下可顯示正常,如果安裝在舊範本那麼 CSS 的效果可能會不同,需要另外調整;如果你也是舊版本的範本,剛好我這個網站也是用舊範本,已經調整過參數,可看我的網頁原始碼參考 CSS 配置;如果舊範本還是不知怎麼改,再請另外提問了。

而由於每個網站的版面配置、顏色不盡相同,要調整到滿意的效果請繼續往下看細項調整這部分。



二、細項調整

刻 CSS 雖然不輕鬆,但實際上最辛酸的是做到兼容瀏覽器的過程...IE 與 FF 系不相容是一定的,但 FF 與 Chrome 也是會存在小小的差異。我已經做最大的努力讓 FF 與 Chrome 的效果差別不要太大,而 IE 不相容的部分就交給語法來處理了。以下請參照上一段的程式碼──

B:這一段是預設顯示頁籤標題的 CSS。

C~D:設定頁籤文字的顏色、字體等等。

E~G:頁籤的上、左、右框線,框線的色碼請改為自訂顏色,也就是 "#" 後面的參數。

H:頁籤的下框線,色碼請改為跟此區塊背景色 (background-color) 一模一樣的色碼,用來覆蓋掉原本的底線,造成頁籤的效果。

I:此行是 IE 專用,CSS 參數加上 "\9" 的話只有 IE 能讀。

J~K:設定頁籤左上角與右上角的圓角功能,此語法效果在 Chrome、FF 可顯示,但 IE8(含)以下跟這個圓角語法沒有緣份。

L:設定 padding 值,四個值的順序分別為上、右、下、左,其中 "下" 的值最好不要改。

N:設定顯示頁籤的背景色,最好跟這整個小工具區塊的背景色是一模一樣的,才不會有違和感。因篇幅的關係,如果不清楚怎麼找到背景色的色碼請再另外提問了。

Q~AG:這一段是預設不顯示的頁籤標題 CSS,細項可參考上述的說明。

AK:這一行設定頁籤底部那條框線的顏色。上面的 CSS 區框線顏色有改的話,這裡也要改。

AL:
  a. 綠色的 "&#12288;" 代表兩格空格、"&nbsp;" 代表一格空格,用來排版面寬度之用,可自行更改。
  b. class="Menubox_over" 代表這是預設顯示的頁籤。如果想要把第二個小工具預設為顯示的頁籤,請把這個參數給第二個小工具。

AM~AN:這兩行的參數都是 class="Menubox_out",預設不顯示的所有頁籤都要加上此參數。

AQ、AU、AY:這三行的 id 編號是有規律的;而 AQ 是預設顯示頁籤的區塊,因此 style 不需要設為隱藏;而 AU 與 AY 是預設隱藏的頁籤,所以這兩行都必須設定 style='display:none'


三、結語

這個頁籤功能雖然一樣很陽春,不過安裝簡單、該有的功能已經具備,要隨個人喜好擴充功能也是不難,例如滑鼠經過非預設的頁籤時改變背景色,或是系統有裝 jQuery 的話也可在切換頁籤時加一些特效等等,就請依照需求來修改了。


以選項卡方式顯示最近留言和文章
讓 Blogger 側邊欄有個簡易安裝的分頁(TAB)功能」系列標題:
一、安裝 HTML 小工具
二、安裝 Blogger 官方小工具
三、隨機分頁功能
四、各種疑難雜症

➢➢ 快速選單:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP