[Blogger]如何加上数字分页效果? !

在Blogger的系统中,如果首页文章超过指定数量,就会出现「较旧的文章」连结,方便使用者透阅览比较早期的文章,可是这样的连结却无法了解这个网站到底有多少的文章?一直往旧文章慢慢爬,感觉像是跳进无底洞一样。如果你有这种感觉,或许你可以考虑把连结数字化,就像阅读论坛文章一样,往下一页都是数字显示,让人对此网站内容量一目了然。

修改的语法有很多款,只是语法大家都转贴来转贴去的,在转贴的过程中有些可能有漏掉了,造成语法贴上后没什幺效果。所以香肠就整理、测试一下看看哪一款可以用,目前发现有两款可以用,安装的难易度差不多,就看各位喜欢哪种方式啰!

说到了文章数字分页效果(Page NavigationMenu),在WordPress中,其实预设也是和Blogger一样,只有上一页和下一页效果而已,如果想达成分页按钮数字化,则需要透过外挂来达成。同样身为BSP的痞客邦,系统就有预设的数字化按钮,使用者只要稍加调整样式就可以变得很棒了。至于无名小站呢?系统既没有提供上一页下一页按钮,也没有提供数字分页按钮,十分的简陋阳春。

话说回来,儘管Blogger系统预设没有数字化按钮,也没有像WordPress一样的外挂可以安装,不过倒是有网友透过一些Javascript去达成这样的效果,让功能阳春的分页按钮更添一些不一样的感觉,看腻了「较旧的文章」连结吗?那就来添加这个Blogger数字化的分页按钮吧!

如果尚未注册Blogger,请参考这篇教学:按这里。

第1步 首先让我们看一下你的个人Blogger下方的分页连结,是不是感觉很阳春呢?如果您没有看到,那可能是您的Blogger文章数量没有超过系统设定,所以不会出现切换页面的连结。

[Blogger]如何加上数字分页效果?

第2步 想要让Blogger有数字分页效果,首先让我们来到Blogger后台,点击﹝设定﹞→﹝格式﹞,进入后在「最多显示」部分输入您网誌一个页面要显示的文章数量,在此设定「5」篇当作本次测试範例。

[Blogger]如何加上数字分页效果?

第3步 因为语法过长,所以请先下载语法档案,请使用笔记本开启,找到档案内的变数设定,如下的语法,您可以做个人化的设定。其中要注意的是「pageCount」这个变数,他的设定值要和本教学第2步骤中所设定的数字是相同的,否则文章会漏掉显示。

var pageCount=5;        //首页显示的数量,和系统设定要一样 var displayPageNum=3;        //按钮数量var upPageWord ='上一页';    //上一页按钮 var downPageWord ='下一页';    //下一页按钮

[Blogger]如何加上数字分页效果?

第4步 当语法修改完毕后,请来到Blogger后台,点击﹝设定﹞→﹝网页元素﹞,然后在侧边栏的区域中,点击「新增小工具」。

[Blogger]如何加上数字分页效果?

第5步 请选择新增「HTML/JavaScript」的小工具。

[Blogger]如何加上数字分页效果?

第6步 将编辑器切换到「修改HTML」模式,然后再把刚刚修改好的语法贴上内容区块中,并点击﹝储存﹞即可。

[Blogger]如何加上数字分页效果?

第7步 最后你就会在网誌的下方看见数字分页按钮了唷!至于样式,可以自行修改下载下来档案内的CSS啰!

範例网址:http://my.sofree.cc

[Blogger]如何加上数字分页效果?

以上语法是参考「Adding Numbered Page Navigation Bar For Blogger」这篇文章中所提供的方式,至于按钮的样式有没有觉得很熟悉?那就是本站的分页按钮样式啦!其实我测试过几种的语法,在纶太郎所提供的语法,该语法在blogsopt.com网域下的网站都可以正确使用,可是若是遇上Blogger是自订网域,似乎就出了些问题。虽然这个修改方式可以解决,不过按钮按下去没有任何反应?所以最后我挑选了国外提供的那个方式。

懒人安装法

如果你觉得前面的方法好複杂?好混乱,那这有个更简单的方式可以让您的Blogger有数字分页按钮。只要设定一个数字、把语法贴到部落格侧边栏就可以的,但唯一的缺点就是这个语法会带有一个原始作者的连结,感觉不是很美观。另外,按钮的CSS设定您一样可以自由调整。需要安装者,请按这里下载语法,修改里面的设定后,再把语法贴到部落格侧边栏就可以了,出现的效果如下图。

程式码来自于「Numbered Page Navigation For Blogger New Script」这篇文章,只是将它简化,直接贴在侧边栏模组即可。如果你安装后有遇到问题,可以参考这篇文章看看是否有相关的解决方法喔!

[Blogger]如何加上数字分页效果?

上一篇: 下一篇: