例如今天要介紹的文章分頁,原始沒有修改過的版本,頁尾永遠是顯示較舊的文章、首頁、較新的文章,
經過美化後,如下
那麼這個效果要怎麼加上去呢? 其實很簡單,四個步驟就搞定了。
方法如下:
1.登入 Blogger後台,點選「設計」-「修改HTML」-「展開小裝置範本」
2.找到
</body>
上方貼上
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5; //每頁文章數目
var numshowpage=10; //要顯示的分頁數目 1 2 3 ....19
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
3.找到所有的(約三個左右)
'data:label.url'
全部都用
'data:label.url + "?&max-results=5 "'
取代,上面的數字5代表每頁的文章數目。
4.找到
]]></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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwjVzz4YT_Tw5_9TpD0czZbfD-H-fL0EGWj06ym-1psi6QibBDv1IJRc1iSPaBLoD5VmumoA18yGLkG7jUmwQA7M4S3ClEQiYvN04mfP-Dymx4FqQS888xjw0_DmnIP899muduImKtgA4/s1600/wp3.jpgg) 0 -25px repeat-x;
}
.showpageNum a:hover {
background: #044697 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwjVzz4YT_Tw5_9TpD0czZbfD-H-fL0EGWj06ym-1psi6QibBDv1IJRc1iSPaBLoD5VmumoA18yGLkG7jUmwQA7M4S3ClEQiYvN04mfP-Dymx4FqQS888xjw0_DmnIP899muduImKtgA4/s1600/wp3.jpg) 0 -50px repeat-x;
}
.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #e30000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwjVzz4YT_Tw5_9TpD0czZbfD-H-fL0EGWj06ym-1psi6QibBDv1IJRc1iSPaBLoD5VmumoA18yGLkG7jUmwQA7M4S3ClEQiYvN04mfP-Dymx4FqQS888xjw0_DmnIP899muduImKtgA4/s1600/wp3.jpg) 0 0 repeat-x;
text-decoration: none;
}
.showpageOf{
margin:0 8px 0 0;
}
這裡示範的效果主要是參考了Numbered Page Navigation For Blogger New Script, 大家可以自行修改成自己喜歡的樣式,或是到這裡找找總共六種樣式的CSS語法。
依照作者開釋,本Script特點如下(http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js)
1.沒有文章數目限制
2.讀取加快
3.計算加快
實際執行起來是真的蠻快的,希望大家使用愉快。
1 意見:
謝謝分享,對我很受用,特來向您致謝.
張貼留言
留言........