Sunday, June 13, 2010

教你如何添加翻页功能(页数)

Share



添加这项功能很简单,只要你是依照步骤就不会有错哦~
到Design-->Add Gadget-->HTML/JavaScript
然后将以下的代码放进去,按Save之后就完成了

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=3;
var firstPageWord = '首页';
var endPageWord = '末页';
var upPageWord ='上一页';
var downPageWord ='下一页';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">第'+thisNum+'页,共'+(postNum-1)+'页: </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'">'+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>



抱歉,弄不到的大家,因为刚才少了一些步骤哦,现在可以了。

by:kenchy

27 comments:

天空软件站 said... 回复此评论

不能哦

=梦小茶= said... 回复此评论

放了~可是没有变化><

wen.wen said... 回复此评论

是咯~不能哦

o0xinmin0o said... 回复此评论

真得弄不到嘞,可是好像是因为之前调了一页可以放很多篇文章,所以才没有用到翻页的功能 xD (不知道楼上的几位也是因为这个原因xD,我很sampat XDDD 哈哈)

Kenchy:我发现你还有给到pointer effect,"+++++"的代码嘞,哈哈 (我喜欢那个+++++ 的pointer effect 叻 xD )

Kenchy said... 回复此评论

大家抱歉....在下失误浪费了你们时间
刚改了,现在你们可以再尝试哦=)
o0xinmin0o,不好意思,是我失误了

o0xinmin0o said... 回复此评论

Kenchy :哈哈,不用不好意思拉 xD 还有厚,问你一下,可不可以给我那个pointer effect 的代码 xD (如果你得空的话拉xDD)

Kenchy said... 回复此评论

那个代码不是有了吗?@@
按我

o0xinmin0o said... 回复此评论

i'm sorry to inform that,我重新试过了,还是不可以叻 xDD
加油阿xDD

Kenchy said... 回复此评论

我要跪墙了................
你现在尝试这个...

o0xinmin0o said... 回复此评论

哈哈,有了有了!!!! ^^

wen.wen said... 回复此评论

哈哈~行了!刚才吓到我=,="还以为我理解能力差~弄不到·~谢谢你哦~现在可以了~

=梦小茶= said... 回复此评论

嗯~可以了..谢你呀x)
那想问下..之前我们放进那个【修改HTML】里的代码..
那些东西...没去改回的话..应该不会有什么变化的吧?!

Kenchy said... 回复此评论

如果能的话,就去把之前的删除比较好@@
不好意思了大家><

ι'м ❤ вαвє 静的部落格&日记 said... 回复此评论

有了~

KUMIKO said... 回复此评论

没有东西的~

LinG▶ said... 回复此评论

弄到了~
开心XD
谢谢

Kenchy said... 回复此评论

回复KUMIKO:
你是放在Add Gadget-->HTML/JavaScript吗?@@

【새로운 아이】 said... 回复此评论

有东西么?

麗之館 said... 回复此评论

不好意思,可能我比较笨,但我做好多次还是不能。

KUMIKO said... 回复此评论

對哦~
不是么?

Kenchy said... 回复此评论

看来还是有好多人弄不到呢@@
我迟些有时间了才开另一个教程给大家哦
请大家有耐心等等=)

LinG▶ said... 回复此评论

我之前还弄到的~
换了这个新版本后~
有点不准确了~@@

Kenchy said... 回复此评论

@LinG▶
嗯,我之后会重新开教程的=)

Jeisley said... 回复此评论

我现在用design里的模板,可是放了这个代码也没显示出来的?

Kenchy said... 回复此评论

@Jeisley
我明天还是待会儿有时间就开多一个出来哦@@

orange princess boutique said... 回复此评论

你好,我想请问下为什么第2页看不到,而直接跳到第3页呢?

Kenchy said... 回复此评论

@orange princess boutique
我没有这个问题哦@@
你有更改代码吗?

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment