夏吱吱: 新增數字分頁導覽列，讓瀏覽更方便

2011.3.30更新
此功能已失效，js檔的網頁已被回報是有害網站，謝謝Lonyice的回報。

先前有寫一篇一分鐘讓你的部落格也有數字分頁效果，感覺不是很好用，載入時間較久，最近在網路上看到有人寫出Adding 10 Styles Numbered Page Navigation for Blogger，試用過後覺得速度還可以，但是在文章分類及索引部分還是無法數字分頁，兩者各有其優缺點，跟大家分享。

後台→版面配置→修改 HTML，然後，
找到</body>，在前面加上以下語法，這段是數字分頁出現的部份，

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=3;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://files.bloggerwidgets.cz.cc/js/page-navi2.0.js' type='text/javascript'/>
</b:if>
</b:if>

var pageCount=5;
每頁顯示幾篇文章，請配合後台設定→格式，最多顯示，主頁欄的數字。
var displayPageNum=3;
頁數欄位前後顯示的頁數，譬如設3，如果現在在第四頁，
顯示則為123 4 567

以下則是數字分頁的顯示格式，格式可參考該篇文章，例如我利用的是第3種，語法為，
在]]></b:skin>前面加上

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:11px;
  margin:10px;
  }
 
.showpageArea a {
  color: #fff;
  }
  
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  background: #363636 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 -25px repeat-x;
  }
 
.showpageNum a:hover {
  background: #044697 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 -50px repeat-x;
  }

.showpagePoint {
  color:#fff;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  background: #e30000 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 0 repeat-x;
  text-decoration: none;
  }

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

記得原先.showpageArea a {
color: #fff;
}
我改成.showpageArea a {
color: #999;
}
這是顯示數字頁、previous及next字樣的顏色，因為我的底為白色，所以previous及next也為白色會看不到，所以改成#999的灰色。

其他的樣式，則參考該頁的說明，自行加入即可。

另外Xavier's Note也有寫出另一種可跳頁的數字分頁的效果，有跳頁功能的分頁效果，喜歡的朋友也可以利用。

加入書籤 :