為Blogger加入分頁導覽列

 
Blogger主頁面中，若是文章超過了設定的數量，則會自動切頁，但很奇怪的是竟然不是用我們一般用數字分頁的方式來處理，而是用「首頁」「較舊的文章」「較新的文章」呈現(在gmail中也是用這個方式)，還好有人寫了一些數字分頁的hack提供給大家使用，dnowba參考Adding 10 Styles Numbered Page Navigation for Blogger這篇文章(上圖來源也是此站)修改了一下教學方式，提供給大家參考。

&前備工作：了解blogger將文章切頁的設定

blogger在後台→設定→格式中有「最多顯示」的選項，我們可以用文章數/天數來設定，通常dnowba是用文章數，配合著另個工具「繼續閱讀」，可以把版面切割的較整齊，而若是用天數來切頁，那麼在每天發表的文章數不一的情況下版面有時會拉得太長不美觀，再來loading的時間也會變長，若執意設定天數，那麼它也有最多一頁顯示500篇文章的限制來保證頻寬。如果你是使用天數來作主頁顯示的話，那麼底下的分頁對你來說就沒有意義了，要使用數字分頁功能，前提就是我們是利用文章篇數來設定。

&開始設定：將程式碼加入blogger中

STEP ①： 後台開啟html編輯器，找到程式碼   ]]></b:skin> ，在標籤前貼上以下語法

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px; 
  margin:10px;
  }
  
.showpageArea a {
  color: #000;
  text-shadow:0 1px 2px #fff;
    font-weight: 700;
  }
  
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd url(http://按鈕圖位置) 0 -50px repeat-x;
  }
  
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc url(http://按鈕圖位置) 0 -25px repeat-x;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666 url(http://按鈕圖位置) 0 0 repeat-x;
  text-decoration: none;
  }

這部分語法是在設定按鈕的樣式，分別有滑鼠移入、滑鼠移出、按下後的效果，如果了解css的人可以修改
STEP ②： 自製按鈕圖，我們在設計這種無法確切知道分頁數量的平台，一般來說不會設計死的按鈕(圖1)，而改用設計一顆按鈕的背景圖，然後前面的字則是用真正的字元來做。在處理上可以先搞好一顆按鈕的樣式，但大部分的製作方式都是用一小小張的圖來無限延伸(如圖2)

一般來說我們會開一張2*75的底，填滿上下漸層的圖(為什麼不是左至右漸層…你可以想像延伸後圖變成什麼樣子)，設計好一顆按鈕後，也就只有這一顆就夠了，其他滑鼠移入、移出等按鈕變化效果我們交給css來做透明度、反相色、和位移的變化。記得是做第二張圖，做完後一樣存在圖床。 當然若是你要大搞特搞，可以在上面程式碼中設計三張不同的按鈕圖。
STEP ③：在blogger後台修改html畫面中，找</body>標籤，把程式碼修改成以下

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='程式碼位置' type='text/javascript'></script>
</body>

這個程式碼可以自已修改的部分有

．var postperpage=7;
   可以修改你要顯示每頁的文章數，當然我們要配合後台的設定。
．var numshowpage=4;
   當前頁前後兩邊要放置的按鈕數，比方說若是我們已經切到第46頁，若是設定是4，那麼顯示會如下
   42  43  44  45  46   47   48   49   50

最後把程式碼下載放到你的空間裡，修改程式碼位置

&後記：

感覺上是大工告成，不過這個數字分頁做到這裡只能在主頁面呈現，若是還想實現在其他索引的話，那還要做一點修改，這裡dnowba就暫時打住了…想一想部落格真的不大需要用這麼足的分頁功能，因為部落格精神重在現在進行式，除非至親至故，否則誰會有閒暇往前看你的舊文…有點明白blogger在設計分頁用往前往後的思維了。