2010年6月3日 星期四

新增數字分頁導覽列,讓瀏覽更方便


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也有寫出另一種可跳頁的數字分頁的效果,有跳頁功能的分頁效果,喜歡的朋友也可以利用。

參考文章:
Adding 10 Styles Numbered Page Navigation for Blogger

18 則留言:

  1. 嗯.. 各有優缺點 不知道能不能合體

    回覆刪除
  2. 請問我要怎麼增加bloggerㄉ空間,配額滿ㄌ沒法上傳圖片,對不起題外話,謝謝!

    回覆刪除
  3. 外連到其他圖床空間,或是申請新的google帳號,圖片外連,blogger空間目前是無法增加的。

    回覆刪除
  4. 您好,

    照您的去修改可是做出來都怪怪的.

    回覆刪除
  5. 每個Hacks對每種模版都不一定適用,這篇有提到三種,可以都試看看,看哪種你最合適吧。

    回覆刪除
  6. 最近剛玩blogger,第一次接觸語法,從你這理學到很多,你教的很仔細很容易懂。太感激了!不知道怎麼感謝你順手點了廣告,希望也能幫到你!

    回覆刪除
  7. http://barkleyc.blogspot.com/2010/04/blogger.html

    我這方法可以在文章分類及索引用數字分頁,你參考看看囉XD

    回覆刪除
  8. 請問要如何向你文章那樣,舊文章也有圖片顯示呢??
    http://kaylinbaby.blogspot.com/
    這是我部落格!可是我舊文章都沒有像你那樣有圖片!我只有首頁有而已!!可以交我一下嗎??

    回覆刪除
  9. 你再安裝一次看看,我改了.showpagePoint { 的圖片連結,你現在採用的另種分頁工具也很好用。

    回覆刪除
  10. 紅色可以改嗎???當滑鼠移過去的藍色也可以改????

    回覆刪除
  11. To BiApp,他是利用圖片的,你可以製作你需要顏色的圖片替代即可。

    回覆刪除
  12. 今天回自己的部落格
    被google瀏覽器警告說http://files.bloggerwidgets.cz.cc/的東西會植入惡意程式...

    回覆刪除
  13. 而且該元件好像已經失效了???

    都沒出現呢

    回覆刪除
  14. 這是有可能的,可能js不存在,或是作者更新等等,謝謝你的分享,我再註明。

    回覆刪除
  15. 請問...Blogger有辦法做單篇文章分頁嗎?我野些文章很長,但又不想因此分成好幾篇。

    回覆刪除
  16. 目前不能,一般BSP業者都沒提供這功能,除非你使用Wordpress吧。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能