目前為止最完美的Blogger分頁功能! - 部落格

http://barkleyc.blogspot.com/2010/04/blogger.html

這是目前我用過許多blogger分頁功能中，
bug最少的
分享給大家用看看


原文如下：

相信很多人都跟我一樣，厭倦了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;
}




ps. 上方的語法是修改分頁的樣式，可以隨自己喜好調整

ps. 也可以直接到Abu Farhan的網頁，裡頭有其他的格式。
http://www.abu-farhan.com/2009/12/six-style-page-navigation-for-blogger/




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'&gt;&lt;/script&gt;


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




Step 3 : Customize Label

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

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

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

4. 存檔收工！



--------------------------------------------------------------------

筆記

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

假如直接套用這個外掛，會造成文章分頁錯亂，進而導致許多文章會消失。但我又發現點
選標籤時卻又不會錯亂，原因何在呢？

仔細一看，標籤的網址是
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 請修改為「每一頁想出現的文章數」



------------------------------------------------------------------------------



其實這方法還是有一點點小缺陷，如MKnight這篇文章所提到的：

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


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

--
█ █ ███
█ █ █ ████ ████ ████ ████
█ █ █ █ █ █ █ █ █ █
█ █ █ █ █ ████ █ █ █ █
█ █ ██ █████ █ █████ █ █
█ Ｘ Japan THE LAST LIVE ▉▊▋▌▍▎▏ http://barkleyc.blogspot.com/

--