作者barkleyc (嘎瓜)
看板Blog
標題[Blogger] 目前為止最完美的Blogger分頁功能!
時間Tue May 4 18:49:25 2010
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> ，在其
上方加入語法：
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=
X;
var numshowpage=
Y;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<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 + "?&max-results=X "' 取代
3. 一樣，上面那行的
X 請修改為「每一頁想出現的文章數」
4. 存檔收工！
--------------------------------------------------------------------
筆記
在這個外掛中，個人遇到一點小問題。
我在上方自行加入的導覽列，是直接使用標籤的網址編輯。
假如直接套用這個外掛，會造成文章分頁錯亂，進而導致許多文章會消失。但我又發現點
選標籤時卻又不會錯亂，原因何在呢？
仔細一看，標籤的網址是
http://barkleyc.blogspot.com/search/label/蘭嶼
?&max-results=5
而我自己在上方加入的導覽頁的網址卻是
http://barkleyc.blogspot.com/search/label/蘭嶼
少了
?&max-results=5 這幾個關鍵字！
因此，如果要跟我一樣在上方加入導覽列時，語法就不能單純只是把網址貼入，
必須加入?&max-results=5
才可以正確顯示。
例如：
<li>
<a href='
http://barkleyc.blogspot.com/search/label/蘭嶼?&max-results=X '>
蘭嶼
</a>
</li>
一樣，上面那行的 X 請修改為「每一頁想出現的文章數」
------------------------------------------------------------------------------
其實這方法還是有一點點小缺陷，如MKnight這篇文章所提到的：
a、 Firefox 內建的「回前一頁」無法重現之前閱讀的頁數
b、各瀏覽器裡對其他頁數另開視窗都無法成功翻頁。這是為突破文章數 500 並保持語碼
快速所須做的讓步。
不過我想這應該還是目前最好用的方法啦～只要不掉頁，這些小問題都不是問題XD
--
█ █ ███
█ █ █ ████ ████ ████ ████
█ █ █ █ █ █ █ █ █ █
█ █ █ █ █ ████ █ █ █ █
█ █ ██ █████ █ █████ █ █
█ Ｘ Japan THE LAST LIVE ▉▊▋▌▍▎▏ http://barkleyc.blogspot.com/
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.135.220.51
1F：推 Yenshing:火箭沒季後賽，所以把心思放在blog上嗎XD 05/04 19:30
2F：→ barkleyc:......被樓上發現了 冏 05/04 19:46
※ 編輯: barkleyc 來自: 114.24.157.201 (07/06 04:05)