2012年7月11日

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

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 官方小工具
三、隨機分頁功能
四、各種疑難雜症

➢➢ 快速選單:

38 則留言:

  1. <9169436028825969570>(以上內容請勿刪除,從括號之後開始留言)
    能得到原作者的稱讚,實在感到十分的榮幸~ ^ ^

    回覆刪除
  2. 感謝您分享這個tab,但我不知道到底要怎麼才能複製正確的小工具原始碼貼在每個tab裡,如果以站內搜尋這個小工具的話,請問站長能否提示一下,原始碼的範要從哪裡到哪裡呢?懇請提點,感恩!

    回覆刪除
  3. <3156286252589004595>(以上內容請勿刪除,從括號之後開始留言)基本上本篇文章的程式碼,適用於每個分頁都是以 HTML 或 Javascript 構成的區塊,例如我側邊欄的「最新回應」、「最新推文」,這兩個都是用 Javascript 寫出來的區塊。

    從你的敘述,我猜測你是不是想要把 Blogger 官方提供的"多個"小工具
    做成分頁效果?例如把官方的搜尋小工具、官方的熱門文章合併到同一個區塊?

    如果你的意思是這樣的話,由於官方提供的小工具是使用 Blogger 自己的語法,並非是純粹以 HTML 或 Javascript 構成的區塊,多個官方工具將無法套用本文程式碼。

    但如果你要用一個官方小工具搭配兩、三個「HTML/Javascript」工具做成分頁效果,那麼這是做得到的。

    請先釐清一下你想將哪些小工具放在同一個區塊作成分頁效果,或許你可以拿我的側邊欄來舉例比較好理解,我再看看能否做得到。

    回覆刪除
  4. <8003196358139118080>(以上內容請勿刪除,從括號之後開始留言)
    感謝WFU的快速回應,我的意思就是想在每個頁籤呈現一個Blogger小工具,但試了半天都好像沒辦法,最後想先從您的側邊欄的搜尋追蹤與訂閱三項功能開始,不過光是搜尋就卡住了,如果可以的話,能否請您指導一下該怎麼做出搜尋追蹤與訂閱三項功能的分頁效果呢?感謝您!

    回覆刪除
  5. <4637796975352170970>(以上內容請勿刪除,從括號之後開始留言)
    好的,不過這是一個有點難度的講解,因為如果只是 HTML/Javascript 的話,只需要套用我本文的程式碼就好了;但想要改 Blogger 提供的小工具,這個等級的 hack 除了要懂 HTML/Javascript 語言,也得具備 Blogger 語法的知識。

    這個任務需要一點時間整理程式碼,以及看看如何歸納比較容易理解,可能沒那麼快,等我幾天囉~

    回覆刪除
  6. <4637796975352170970>(以上內容請勿刪除,從括號之後開始留言)
    突然想到了非常簡單的好法子,可以用變通的方法把 Blogger 官方小工具裝到分頁裡面,所以我就直接寫安裝三個 Blogger 官方小工具的方法了,請見「第二篇」。

    回覆刪除
  7. 不好意思想請教一下,如果想要在部落格中加入超過一個tab分頁功能的小工具時,是否要將id的部份也換掉?我發現加入第二組tab的時候,點選後還是回到第一組去,不過剛剛試半天找不出個規則,可否請版主指教呢?感謝!

    回覆刪除
  8. <9009182578387235150>(以上內容請勿刪除,從括號之後開始留言)
    hi Hudson, 是的,id 在整個網頁中是獨一無二的,所以如果要裝第二組時,第二組所有相關的 id 都必須置換過。

    因為原本就打算寫第三篇系列文,剛好你問了相關問題,這一兩天就來提前寫,順便整理一下第二個分頁以後的 id 命名表,因為自己當初也是命名的頭昏眼花(看我有幾個分頁就知道了)。

    P.S. 如果急的話,可以看我的網頁原始碼參考設定的 id。

    回覆刪除
  9. 感謝版主回應!我先自行研究,不行的話再等待板主的好文囉!

    回覆刪除
  10. <7913481180088447742>(以上內容請勿刪除,從括號之後開始留言)
    第二個分頁群組以後的 id 及 參數命名表,我整理在系列文「第四篇」了,有相關的 FAQ 之後我也會整理在第四篇的。

    BTW,你的格可能是我看過最特殊的主題之一,很有意思呢,想必你一定是全台走透透了,真是羨慕啊!

    另外,由於你的格有左右兩個側邊欄,所以寬度比較窄,我用 1024 x 768 的螢幕看,分頁群組塞三個分頁,都會被擠到第二行而影響版面喔!除了可能要調整字數、字型大小,右下角那個分頁群組有點奇怪,無法使用到側邊欄全部的寬度。

    回覆刪除
  11. <8079000073911725826>(以上內容請勿刪除,從括號之後開始留言)真的很感謝板主這麼善心教導給予建議!我語法不太熟,看都要看老半天慢慢摸索 XD...

    版面原本也是搜尋到貴板才興起要修改的念頭,未來可能整併一些小工具,調整版面為2欄式的再拉寬吧,但我目前用chrome和fx看都沒問題(ie無視..XD),很感謝板主幫忙抓問題,我會努力學習的 :)


    回覆刪除
  12. <7982280056907746979>(以上內容請勿刪除,從括號之後開始留言)
    don't worry, 語法看著看著就熟了, 不過一開始的生疏感需要忍耐一陣子。
    [quote]版面原本也是搜尋到貴板才興起要修改的念頭[/quote]
    你這麼說我還滿高興的啊,我寫的文章都是我修改部落格的筆記與心得,能夠成為別人修改部落格的參考是再好不過了~~
    [quote]未來可能整併一些小工具,調整版面為2欄式的再拉寬吧[/quote]
    BTW,我用寬螢幕 1920x1200 看你的版面是沒問題的,昨天用 1024x768 看會斷成兩行,主要是提醒當訪客的螢幕非寬螢幕時,可能會有版面的問題。所以有時搞網頁就是麻煩在這裡,除了測試不同瀏覽器的效果,還要測試不同解析度的效果,因為不知道訪客的配備為何。因此我對於你決定把分頁功能放在2欄式版面,持正面肯定的看法 ^^

    回覆刪除
  13. <2853529401648090176>(以上內容請勿刪除,從括號之後開始留言)真的太謝謝你了!今天修改後終於成功!不過看起來跟這裡好像 >< 我還需要作些變化才是 囧rz

    總之除了感謝還是感謝!

    回覆刪除
  14. <2020332632460080703>(以上內容請勿刪除,從括號之後開始留言)
    不客氣啊, 看了你家的新裝潢, 還真的是 deja vu..原來我們用同一個範本啊 ^ ^ 都是 Awesome 出品, 至少色系不一樣, 哈哈, 這個範本還真熱門~~

    回覆刪除
  15. <3878422656839067959>(以上內容請勿刪除,從括號之後開始留言)
    歡迎常來啊~ ^^

    回覆刪除
  16. Tab的Idea不賴, 但是目前遇到不知將熱門文章放進tab中, 請您指導一下

    回覆刪除
  17. <1370096154633917239>(以上內容請勿刪除,從括號之後開始留言)
    你的問題請參考文末的系列文章第二篇「安裝 Blogger 官方小工具」

    回覆刪除
  18. 您的分頁圓角在IE10能正常顯示,我的不行。想請問一下該如何讓IE也顯示圓角呢?

    回覆刪除
  19. <2292279506921760516>(以上內容請勿刪除,從括號之後開始留言)sorry 我沒有 IE10 可以測試,如果是 IE8 以下的瀏覽器,不支援圓角效果,可參考「建議避免使用 IE8(含)以下瀏覽器」這篇文章,並建議使用 Chrome,畢竟 blogger 也是 google 產品,用 Chrome 才會有最佳顯示效果。

    回覆刪除
  20. 嗯,已加上建議。

    雞婆截了張您這裡在IE 10的顯示效果圖,請笑納。

    回覆刪除
  21. 我把 E 到 H 行,也都另加一行後面多了\9,且刪除暫存檔+重開IE才看到圓角效果。我多加的那幾行是需要的嗎?還是單純為刪除暫存檔的結果?晚點再來試試看...。

    回覆刪除
  22. <2019163772865618196>(以上內容請勿刪除,從括號之後開始留言)圓角效果在「二、細項調整」有說明,是J~K行,你提到的E~H行與圓角無關。

    回覆刪除
  23. <7618826442753481745>(以上內容請勿刪除,從括號之後開始留言)呵呵,看起來還過得去~

    回覆刪除
  24. 抱歉~行數部分我弄錯了。
    看來我的blog分頁圓角是因為刪除暫存檔才正常出現。
    (上面一整個烏龍留言,sorry~來瓶蠻牛)

    回覆刪除
  25. 您好,不好意思想麻煩你幫我看一下我的部落格bedfordth.blogspot.tw,我在右欄設了最新文章與熱門文章的tab,但在最新文章的tab下方出現了很長的空白區域,可否請您幫我看一下是不是有那裡設錯了。謝謝!!

    回覆刪除
  26. <684405381683722111>(以上內容請勿刪除,從括號之後開始留言)看了你的網站,最新文章那部分的程式碼很亂,參雜了很多別的區塊的程式碼,妳可能放錯區塊了.建議妳這部分重新安裝,一個動作一個動作慢慢來,比較能找出原因. 最新文章妳也可以直接用我的版本,應該不會有問題.

    回覆刪除
  27. wayne謝謝你! 最近發現到自己網站側欄有越來越長的趨勢
    就像你文章裡說得好像滑鼠會捲不完的感覺!
    所以看到這篇就立馬來裝了!

    很美~預設效果我就很喜歡了! 推~~

    回覆刪除
  28. <3824496869699905047>(以上內容請勿刪除,從括號之後開始留言)不客氣 ^^ 只是你的側邊欄太窄了,建議弄寬一點,否則在不同螢幕解析度下,分頁效果會變形(例如從我的電腦看就會變形了)

    回覆刪除
  29. <5288660535827838888>(以上內容請勿刪除,從括號之後開始留言) 你的看我網站側欄會變形喔!? 我下午有加寬過側欄了說~現在看還是會嗎??@@

    回覆刪除
  30. <7309873719542502754>(以上內容請勿刪除,從括號之後開始留言)ok, 現在正常了 :D

    回覆刪除
  31. 昨晚為了這個分頁功能堅持要搞到好一不小心用到凌晨三點! 完成度95%了!

    差的那5%在我安裝的第二組分頁小工具裡面"即時留言版"分頁點選無反映無法切換過去!!

    獨立安裝即時留言版測試過會正常顯示呢QQ

    請問能幫我看看問題出在哪嗎??

    回覆刪除
  32. <4080913713600689803>(以上內容請勿刪除,從括號之後開始留言) 來自問自答了!!

    我真是粗心大意!! 第二組分頁小工具裡面包含兩個分頁~我改了第一個的函數(三個紅色部分)
    然後第二個分頁的三函數只改了一個難怪無法切換過去!! 現在終於可以安心了!

    回覆刪除
  33. 另外有個問題想再請教一下

    那就是我站上的側欄第一組分頁標題有點不對稱耶!
    我想把他調整兩個分頁標題大小一致要改哪邊的數值呢?

    看到右邊多出的水平線就覺得怪怪的(美感有點不夠所以想改XD)

    回覆刪除
  34. <6941173683675377862>(以上內容請勿刪除,從括號之後開始留言)不錯~自己 debug 出來了 :)

    回覆刪除
  35. <3485258314300347658>(以上內容請勿刪除,從括號之後開始留言)想要改版面配置的話,那麼要做的功課更多了:
    1. 找 CSS 的書來看
    2. 詳讀這篇「Google Chrome 開發人員工具__調整部落格版面實作

    先告訴你這題的答案,AK 行的 style 裡面加入以下 CSS:

    margin-left: -15px;
    margin-right: -15px;

    頁簽之間的間距可以再自行微調了~

    回覆刪除
  36. 小工具的程式碼是指語法中的 這部分貼上呢還是哪裡呢?

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。