v 新增數字分頁導覽列,讓瀏覽更方便 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...