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

發表時間： 2010-12-12

在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 ='下一頁';    //下一頁按鈕

第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」這篇文章，只是將它簡化，直接貼在側邊欄模組即可。如果你安裝後有遇到問題，可以參考這篇文章看看是否有相關的解決方法喔！