[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]如何加上數字分頁效果?