[Blogger]如何加上數字分頁效果？

在Blogger的系統中，如果首頁文章超過指定數量，就會出現「較舊的文章」連結，方便使用者透閱覽比較早期的文章，可是這樣的連結卻無法了解這個網站到底有多少的文章？一直往舊文章慢慢爬，感覺像是跳進無底洞一樣。如果你有這種感覺，或許你可以考慮把連結數字化，就像閱讀論壇文章一樣，往下一頁都是數字顯示，讓人對此網站內容量一目了然。

修改的語法有很多款，只是語法大家都轉貼來轉貼去的，在轉貼的過程中有些可能有漏掉了，造成語法貼上後沒什麼效果。所以香腸就整理、測試一下看看哪一款可以用，目前發現有兩款可以用，安裝的難易度差不多，就看各位喜歡哪種方式囉！

說到了文章數字分頁效果(Page NavigationMenu)，在WordPress中，其實預設也是和Blogger一樣，只有上一頁和下一頁效果而已，如果想達成分頁按鈕數字化，則需要透過外掛來達成。同樣身為BSP的痞客邦，系統就有預設的數字化按鈕，使用者只要稍加調整樣式就可以變得很棒了。至於無名小站呢？系統既沒有提供上一頁下一頁按鈕，也沒有提供數字分頁按鈕，十分的簡陋陽春。

話說回來，儘管Blogger系統預設沒有數字化按鈕，也沒有像WordPress一樣的外掛可以安裝，不過倒是有網友透過一些Javascript去達成這樣的效果，讓功能陽春的分頁按鈕更添一些不一樣的感覺，看膩了「較舊的文章」連結嗎？那就來添加這個Blogger數字化的分頁按鈕吧！

如果尚未註冊Blogger，請參考這篇教學：按這裡。

第1步 首先讓我們看一下你的個人Blogger下方的分頁連結，是不是感覺很陽春呢？如果您沒有看到，那可能是您的Blogger文章數量沒有超過系統設定，所以不會出現切換頁面的連結。

[Blogger]如何加上數字分頁效果？

第2步 想要讓Blogger有數字分頁效果，首先讓我們來到Blogger後台，點擊﹝設定﹞→﹝格式﹞，進入後在「最多顯示」部分輸入您網誌一個頁面要顯示的文章數量，在此設定「5」篇當作本次測試範例。

[Blogger]如何加上數字分頁效果？

第3步 因為語法過長，所以請先下載語法檔案，請使用筆記本開啟，找到檔案內的變數設定，如下的語法，您可以做個人化的設定。其中要注意的是「pageCount」這個變數，他的設定值要和本教學第2步驟中所設定的數字是相同的，否則文章會漏掉顯示。

var pageCount=5;        //首頁顯示的數量，和系統設定要一樣  
var displayPageNum=3;        //按鈕數量
var upPageWord ='上一頁';    //上一頁按鈕  
var downPageWord ='下一頁';    //下一頁按鈕

[Blogger]如何加上數字分頁效果？

第4步 當語法修改完畢後，請來到Blogger後台，點擊﹝設定﹞→﹝網頁元素﹞，然後在側邊欄的區域中，點擊「新增小工具」。

[Blogger]如何加上數字分頁效果？

第5步 請選擇新增「HTML/JavaScript」的小工具。

[Blogger]如何加上數字分頁效果？

第6步 將編輯器切換到「修改HTML」模式，然後再把剛剛修改好的語法貼上內容區塊中，並點擊﹝儲存﹞即可。

[Blogger]如何加上數字分頁效果？

第7步 最後你就會在網誌的下方看見數字分頁按鈕了唷！至於樣式，可以自行修改下載下來檔案內的CSS囉！

範例網址：http://my.sofree.cc

[Blogger]如何加上數字分頁效果？

以上語法是參考「Adding Numbered Page Navigation Bar For Blogger」這篇文章中所提供的方式，至於按鈕的樣式有沒有覺得很熟悉？那就是本站的分頁按鈕樣式啦！其實我測試過幾種的語法，在綸太郎所提供的語法，該語法在blogsopt.com網域下的網站都可以正確使用，可是若是遇上Blogger是自訂網域，似乎就出了些問題。雖然這個修改方式可以解決，不過按鈕按下去沒有任何反應？所以最後我挑選了國外提供的那個方式。

懶人安裝法

如果你覺得前面的方法好複雜？好混亂，那這有個更簡單的方式可以讓您的Blogger有數字分頁按鈕。只要設定一個數字、把語法貼到部落格側邊欄就可以的，但唯一的缺點就是這個語法會帶有一個原始作者的連結，感覺不是很美觀。另外，按鈕的CSS設定您一樣可以自由調整。需要安裝者，請按這裡下載語法，修改裡面的設定後，再把語法貼到部落格側邊欄就可以了，出現的效果如下圖。

程式碼來自於「Numbered Page Navigation For Blogger New Script」這篇文章，只是將它簡化，直接貼在側邊欄模組即可。如果你安裝後有遇到問題，可以參考這篇文章看看是否有相關的解決方法喔！

[Blogger]如何加上數字分頁效果？

在Google News上追蹤我們最新文章
標籤
香腸
香腸

喜歡在網路上透過文字與圖片分文章教學，默默地用鍵盤烤了9年的香腸。另外還身兼阿腸接案餬口飯吃。對了，別叫我阿腸，請叫我香腸，這樣我才知道你看我部落格長大的。

文章: 1781

相關文章

22 則留言

  1. 可是为何安装了第一个版本的就是HTML/Javascript的那个之后
    在首页无法显示页数
    只有点击了older post就是去到了第二页才有页数跑出来？
    如要首页也有页数显示，那么该怎么做？

  3. 請問這個功能要如何也在按下某個標籤之後也適用?

    我安裝好後，在首頁有效果，但是按進標籤裡的文章，底下的分頁就變回預設的了。

  4. 話說，
    經營的其中一個部落格中，
    不知道設定到什麼，
    原本應該是
    第1頁 有 ABCDE 這幾篇文章
    第2頁 有 FGHIJ 這幾篇文章

    最近變成

    第1頁 有ABCDE 這幾篇文章
    第2頁 有HIJKL 這幾篇文章

    中間的幾篇文章就沒辦法在分頁中顯示，
    是什麼樣的狀況造成的呢？

  9. 請問有那種側邊欄的地方，有一個小框架裡面是最新文章、最新回應…等等的分頁功能嗎？？？
    在有些部落格有看過，但好像都WordPress的！！請問有blogger的嗎？？

    香腸回應：
    Blogger 你要找找，利用「Blogger 最新文章」之類的搜尋關鍵字找。
    不過我記得你提到的在後台中都可找到

  12. 你好喔香腸大我有照用你所說的方式去增加但是變得很奇怪而且我把語法撤掉首頁的顯示文章跟第二頁的顯示文章不知道為什麼不一樣我的文章全部顯示12個文章但是第一頁就怪怪的換到第二頁也只有顯示9個請問一下哪裡出問題了??

    香腸回應：
    這語法我測試過很多次，OK我才放上的…
    突然有問題我也不知道該怎解決@@
    你有按照上方的要求設定嗎…那樣基本上是可以的

  13. 很方便安裝又很實用的小工具，感謝分享,但是我在使用的過程中發現一個問題，就是點”標籤”所連結出來的文章似乎就沒辦法秀出分頁按鈕了，而且標籤分類中假設有10篇大於我預設所要一頁顯示6篇文章的設定時，就會一次全秀在同一個頁面上了，這點不曉得有沒有解決辦法。

    香腸回應：
    標籤頁面的話，我就沒有去實測過了耶..這我可能沒辦法協助你@@

  14. 非常謝謝您的教學,很容易懂^^,
    但是我依照步驟完成後,
    竟然還是沒有顯示出分頁0rz|||

    香腸回應：

    應該是不會捏~ 我測試了兩個Blogger都OK耶~

  16. 哈，這篇很實用，謝謝。不過我發現，在新增這個小工具時，標題一定不能打任何東西，不然好像會失效，因為我原本有打標題，結果怎樣就是出不來，後來把標題拿掉就成功了，不過我還有另一個疑問，可以在上一頁、下一頁裡，再加一個回首頁或到最後一頁的功能嗎？要怎麼加咧？

    香腸回應：
    對，他不能打任何標題喔XD
    至於新增的話，可能要去改程式碼~ 只是我沒去多做測試，可能要請您自己玩玩看囉~ :)

  18. 我覺得，這很實用喲

    ♪♫•.•°*°•.¸¸♥. ♡ ℒℴve ♡ .•°*° ♪♫•*¨*•.¸¸♥
    ┏┯┓┏┯┓┏┯┓┏┯┓┏┯┓祝
    ┠新┠┨年┠┨★┨┠快┨┠樂┨福
    ┗┷┛┗┷┛┗┷┛┗┷┛┗┷┛您
    ♪♫•.•°*°•.¸¸♥. ♡ ℒℴve ♡ .•°*° ♪♫•*¨*•.¸¸♥

    香腸回應：
    謝謝~~

  20. 老大可不可以試一下~
    他有沒有 內文中”下一頁”的按鈕?

    最近又在用blogger了
    (因為我要讓電腦G化….^^)

    香腸回應：
    沒有耶～　我有找過，不過沒看到

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。