zblog分类页和文章页导航优化

admin5年前 (2016-10-26)SEO优化179

珠海SEO技术博客立足于珠海,服务于全国各地,笔者使用的这套博客程序zblog也在逐步修改完善中,一直想调整Zblog分类页和文章页导航,这里就把笔者自己调整Zblog程序的过程分享给大家。

栏目导航的优化栏目分类的伪静态设计已经实现,现在要实现的是栏目页左右导航到栏目列表,找到栏目列表模板,默认的是catalog.html模板,在模板中找到<#TEMPLATE_FOOTER#>替换成下面的代码

<#TEMPLATE_FOOTER#>
<a class="prev" href="http://yangchongyuan.com/" title="珠海SEO和你讲述建站与SEO优化的故事!"></a>
<a class="next" href="http://yangchongyuan.com/sem/" title="SEM优化!"></a>

Css样式添加

/* -----------------------------上下篇,上下列表部分----------------------------- */
a.prev,a.next{display:block;width:108px;height:282px;position:fixed;left:50%;top:50%;margin-top:-141px;background:url(images/arrow.png) no-repeat;}
a.prev{margin-left:-591px;background-position:0 0;}
a.next{margin-left:483px;background-position:0 -300px;}
a.prev:hover,a.next:hover{background-color:#F7F3ED;}


至此,Zblog的列表页导航修改完成。

文章页导航的优化,文章页与列表页的样式共用,不同的是要将导航代码添加到文章模板,以Single.html模板为例,single模板调用的是b_article_single.html,而b_article_single.html调用的是<#template:article_navbar_l#><#template:article_navbar_r#>,也就是b_article_navbar_l.html和b_article_navbar_r.html,实际上就是调整这里的代码

b_article_navbar_l.html中的代码替换为

<a class="prev" href="<#article/nav_l/url#>" title="<#article/nav_l/name#>"><#article/nav_l/name#></a>

b_article_navbar_r.html中的代码替换为

<a class="next" href="<#article/nav_r/url#>" title="<#article/nav_r/name#>"><#article/nav_r/name#></a>

至此文章页面导航修改完成。

导航栏体验的优化,文章列表页有一个很不好的用户体验,就是导航到栏目列表后,没有明确的标志指示用户所在的列表模块。看了Zblog的模板代码,发现能定制的东西很少,除了调用系统模板文件和模板标签,就只能自定义标签了,Zblog中自定义标签是比较复杂的活,这里提供大家一个简单的方法,就是用Jquery去动态适应当前的栏目导航。

$(document).ready(function(){//控制导航
		var curUrl = window.location.href;
		$("#menu a").each(function(i,item){
			if(curUrl.indexOf($(item).attr("href")) >= 0){
				$("#menu a").removeAttr("id");
				$(item).attr("id","menuON");
			}
		})
	});

看seo珠海博客调整后的效果如下图

相关文章

正确使用JavaScript防止被搜索引擎惩罚

正确使用JavaScript防止被搜索引擎惩罚

在使用javascript进行网页样式的控制时,会出现两个缺点,一是对用户有要求,有可以用户的浏览器禁用或者不支持javascript,导致想给用户展现的内容不能体现出来;二是可以会引起搜索引擎的误判...

SEO需要坚持

SEO需要坚持

SEO优化需要持续进行。这2年来随着服务客户的增多,主要精力都是为客户网站做SEO和技术开发了,再没有时间维护和更新我的SEO博客了,自然的,网站的SEO数据也有所下滑,这是正常现象,客户是上帝,优先...

2016要过去了,珠海SEO为你整理百度SEO算法规则

2016要过去了,珠海SEO为你整理百度SEO算法规则

国内基本上都是在做百度优化,近期百度调整很快,很多新人站长表示头痛。越来越多的站长已经离开了这个舞台。2016年,百度优化又有哪些调整呢?盘点最新优化方式,让您如鱼得水。百度进一步提高了自身产物的排名...

网站优化过度的处理

网站优化过度的处理

这几天发现博客有被惩罚的迹象,似乎是优化过度,冷静下来想了一下可能引起的原因。因为我平时比较忙,并不能每天都去照看网站,所以网站更新频率比较低,要查找优化过度的原因也较容易。相信自己是找到了症结所在,...

2013年终百度算法调整后,珠海SEO网站上第一位后的感想

2013年终百度算法调整后,珠海SEO网站上第一位后的感想

珠海SEO网站一直在百度的审核期中,前几天,也就是2013年的最后几天,经过百度算法动荡后,珠海SEO网站浮出水面,一举排上百度首页第一位,其实在很早之前,珠海SEO就一直在谷歌搜索中排第一位。这个结...

SEO如何赚钱——致刚步入SEO行业的SEOer们

SEO如何赚钱——致刚步入SEO行业的SEOer们

我的SEO之路,在珠海,十余年的SEO工作经历,从简单的的搜索规则,到如何应对频繁更新的SEO算法,从懵b到熟练运用,这期间的过程,花了多少时间,熬了多少个夜晚,个中辛酸相信做SEO的同行们都能想像。...

评论列表

爱站库
5年前 (2016-10-30)

这个不错啊

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。