logo of Shuibaco

给 Blogger 做个页码导航(二)(突破500篇限制)

2013. / 926字 / 1,262阅 / 0评

早年在 Blogger 摸爬滚打的时候,曾经介绍过给 Blogger 做个页码导航。这个方法现在仍然有效,但无法显示超过500篇以后的文章。于是在 Numbered Page Navigation For Blogger New ScriptNumbered Page Navigation For Blogger New Script 这两篇教程的帮助下,不仅实现了此功能,首页/尾页的直接链接也提高了用户体验。那么今天就来分享一下。

实际效果

突破500篇限制的页码导航
突破500篇限制的页码导航

安装方法

步骤一:添加以下 css

/* Page Navi
----------------------------------------------- */
.showpageOf {
    margin-right: 10px;
}
.showpageNum a {
    padding: 15px 10px;
}
.showpageNum a:hover {
    background: #fefefe;
    border-bottom: 1px solid #eee;
}
.showpagePoint {
    color: #444;
    padding: 15px 10px;
    background: #fefefe;
    text-decoration: none;
}

.showpageOf 控制 Page 10 of 61
.showpageNum 控制每个页码数字
.showpagePoint 控制当前页面

步骤二:在 </body> 前放入以下代码

<!--Page Navigation Starts-->
<script style='text/javascript'>
var postperpage=10;
var numshowpage=10;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script src='http://pagenavi-ccyann.googlecode.com/files/page-navi-blogger.js' type='text/javascript'/>
<!--Page Navigation Ends-->

postperpage=10 表示每页显示10篇文章(标签页亦如此);
numshowpage=10 表示页码导航中当前页面前后的页码数的和是10,简单点可以大概理解为显示的页码数;
http://pagenavi-ccyann.googlecode.com/files/page-navi-blogger.js 说起来都是泪,请听我娓娓道来。

背后故事

刚开始我用的是我当年记录的方法,但是500篇的限制确实挺不爽的。于是在找到 Abu Farhan 的可以突破500篇限制的教程时别提多高兴了。速速安装好却没有效果,检查之下才发现他给出的 js 文件已经失效。幸运的是我在评论里找到 24work 的网站,可以选择样式然后生成小工具添加到 blogger。对于不太懂这方面知识的人来说确实很方便,所见即所得嘛。但我总归都要修改 css,所以我迫切需要的只是 Abu 那可以突破限制的 js 代码。于是我在添加小工具的时候,直接把内容中的 js 部分复制了出来,替换了失效的 js 文件。

这小工具里的内容啊,不看不知道,一看吓一跳。除了必要的 css 和 js,还有 24work 的广告链接。有人可能会说人家辛勤劳动打个广告无可厚非,但问题是代码是 Abu 写的啊。那么就算 24work “救助” js 文件有功吧,我倒也没有什么太多想法,反正广告我是不会放在自己的博客上的,我也不会跑到人家页面下面留言告状。

调整好 css,一切顺利,24work 的 js 好好工作着,我很欣慰……咦?查看源代码的时候发现页面导航底下又是四行链接。查看了 js 文件,果然问题出在这里。于是我只好把广告代码去除干净,上传到 Google Code 了。可是,开开心心新建了一个项目,结果发现没有上传文件的地方。谷歌之下才知道,Google Code 已经取消新项目的上传下载服务了,而旧项目到明年1月15日之前还能上传,于是我干脆把修改过的干净版 js 文件上传到旧的 pagenavi-ccyann 项目页面,这么一来算是解决了所有问题。

1,044°
Blogger 高亮当前菜单选项
Comments
Write a Comment
点击加载Disqus