目前為止最完美的Blogger分頁功能!

image

  相信很多人都跟我一樣,厭倦了blogger下方的「較舊的文章」、「較新的文章」,這一直是blogger的小缺點之一。試過各種分頁、跳頁的外掛總是會遇到小問題,造成讀取速度過慢,或是點下去後會掉文等等。找了一整晚總算找到一個近乎完美的方法!

  我的方法主要是參考Abu Farhan的「NUMBERED PAGE NAVIGATION FOR BLOGGER NEW SCRIPT」。(題外話,為了搜尋這功能,發現到原來blogger的分頁外掛還有個小故事勒~)方法如下:



Step 1 : Apply Style

  1. 登入到 Blogger設定頁,點選「版面配置」 > 「修改HTML」
  2. 點選「展開小裝置範本」
  3. 找到: ]]></b:skin> 上方加入下列語法
.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;
}

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
}

.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;
text-decoration: none;
}




Step 2 : Aplly Javascript

  1. 找到 </body> ,在其上方加入語法:
&lt;script type='text/javascript'&gt;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=X;
var numshowpage=Y;
var upPageWord ='Prev';
var downPageWord ='Next';
&lt;/script&gt;
&lt;script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>

注意:
  • X 請修改為「每一頁想出現的文章數
  • Y 請修改為「想要出現的分頁按鈕數
 

Step 3 : Customize Label

  1. 找到所有的  'data:label.url'    (應該會有三個左右)

  2. 通通'data:label.url + &quot;?&amp;max-results=X &quot;' 取代

  3. 一樣,上面那行的 X 請修改為「每一頁想出現的文章數

  4. 存檔收工!


筆記

在這個外掛中,個人遇到一點小問題。
  1. 我在上方自行加入的導覽列,是直接使用標籤的網址編輯。
    image











       假如直接套用這個外掛,會造成文章分頁錯亂,進而導致許多文章會消失。但我又發現點選標籤時卻又不會錯亂,原因何在呢?仔細一看,標籤的網址是http://barkleyc.blogspot.com/search/label/蘭嶼?&max-results=5,而我自己在上方加入的導覽頁的網址卻是http://barkleyc.blogspot.com/search/label/蘭嶼
    少了?&max-results=5 這幾個關鍵字!

      因此,如果要跟我一樣在上方加入導覽列時,語法就不能單純只是把網址貼入,必須加入?&amp;max-results=5
    才可以正確顯示。

    例如:

    <li>
    <a href='http://barkleyc.blogspot.com/search/label/蘭嶼?&amp;max-results=X '>蘭嶼
    </a>
    </li>

    一樣,上面那行的 X 請修改為「每一頁想出現的文章數







  2. 其實這方法還是有一點點小缺陷,如MKnight這篇文章所提到的:

    a、 Firefox 內建的「回前一頁」無法重現之前閱讀的頁數
    b、各瀏覽器裡對其他頁數另開視窗都無法成功翻頁。這是為突破文章數 500 並保持語碼快速所須做的讓步。


    不過我想這應該還是目前最好用的方法啦~只要不掉頁,這些小問題都不是問題XD
19 留言

留言

  1. 请问,你的部落格上面那排能够[下拉的选单]是怎么弄得?能不能教我呢?@@我好想在我的部落格也方同样的,弄了很久还是弄不到哦...
    能不能教我呢?><我的msn:kenchy710@hotmail.com
    你也可以在这里教我,我回时常上来看看^^

    回覆刪除
  2. hi~
    我是利用ul和li這兩個東西寫的
    你可以google看看

    回覆刪除
  3. 不好意思,請問我照作之後,系統卻出現以下訊息:

    我們無法儲存您的範本
    請修正下列錯誤,再重新提交您的範本。
    我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。
    XML 錯誤訊息: The element type "body" must be terminated by the matching end-tag "".

    請問該如何修改呢?非常感謝!

    回覆刪除
  4. 你是不是</body>取代掉了呢?

    回覆刪除
  5. 我也遇到了跟 applespoon一樣的問題!

    回覆刪除
  6. 我把:

    1. <改成"<"(不含前後的"號)。
    2. >改成">"(不含前後的"號)。
    3. &quot改成"""(不含前後的"號)。

    之後,就可以用了,請參考,多謝喔。

    回覆刪除
  7. 我想問一下,你的那個顯示分頁功能也是用的這個嗎?
    如果是的話,我想知道怎麼去掉頁碼右下邊的那個連接"Widget by Abu-farha"?
    還有,這個方法可以克服只能顯示500文章的小問題嗎?
    謝謝!

    回覆刪除
  8. to赵博:

    不建議你這麼做耶,因為那幾個字是作者要求放上的。
    如果你真的一定要把它去掉,可以用代碼讓那幾個字變成白色,這樣就看不到了。

    這方法可以完美的克服500篇文章的問題,請放心

    回覆刪除
  9. 作者已經移除這則留言。

    回覆刪除
  10. 不好意思想請教陽光達人誌,可能是我太笨,因為我看不懂不懂你的第一二點前後有什麼差別耶,因為把<改成"<"(不含前後分號),不就是一模一樣嗎?Orz..實在不好意思問這個蠢問題,但因為我始終改不成功只好再來問一下,感激不盡!

    回覆刪除
  11. 你好
    不好意思..因我也不知該留言於那,所以在此篇發問
    之前到這就很想向你請教...
    我之前Tabbed widget boxes 是用此
    http://www.abu-farhan.com/2009/10/easiest-way-to-make-tabber-sidebar-for-blogger/
    但,後來覺得每次開啟網頁都會重新讀取tabbed,影養開"頁"的速度,
    後來又換另種,也是現在這個..是較快,但還是重新讀取
    所以...看到版主的..tabnav
    快,感覺也不會重新讀取..
    請問可有參考教學或是指點?

    感謝

    回覆刪除
  12. to st:
    我也是用abu-farhan那個方法,至於影響讀取速度我覺得還好耶。通常會影響速度的兩個原因是javascript太多,或是圖片太多

    回覆刪除
  13. 因我的每次開起部落格,三個tabs就會先展開讀取之後才會自動收合
    看到傲嘎抓Dr.的,似乎就直接跳到自動收合
    嗯~了解...謝謝你的回覆
    新年快樂 :)

    回覆刪除
  14. 我要做分页功能
    可是找不到 'data:label.url'

    回覆刪除
  15. 謝謝分享 我也一直想改BLOG語法 >< 終於找到囉

    回覆刪除
  16. 這是我研究出來的,解決側欄標籤連結無法按照設定的頁數顯示
    http://forest0sea.blogspot.tw/2013/09/blogger.html

    我用的側欄文章分類語法可能跟你的不同
    還是希望能給妳當參考:D

    回覆刪除
  17. 作者已經移除這則留言。

    回覆刪除