北京SEO文章摘要前的小图标的实现方法(ZBlog)
观察仔细的朋友应该发现了北京SEO的又一个细节优化,那就是每篇文章之前阿呆给出了相应的导读图标,目前阿呆制作的导读图标总共只有5个,分别入下图所示:
1、
2、
3、
4、
5、
该5中图标的意思,按照图片顺序依次为:精华文章、站长推荐文章、精华推荐文章、普通文章和案例分析文章
可能经过阿呆上面的说明,有些朋友已经发现了本雷博的改动,同时大家心中可能也会产生这样的疑问——“加这个东西有什么用啊?既不能提高流量,对SEO也没多大好处。加他干嘛啊?”,阿呆的目的其实很简单,阿呆仅仅是想从站点的细节优化入手从而整体提高站点的用户体验,以达到提高站点粘度的目的。
闲话说多了,下面阿呆就来说说想要完成这种效果,我们应该如何来做。在开始说之前阿呆想提醒大家一句,下面说到的方法,除了可以用来进行导读图标的设置之外,还可以进行文章摘要的图文混排效果。
步骤一:进入ZBlog管理后台,然后点击[Tags管理],将所有的tag摘要全部改为“pu”
步骤二:新建4个tag标签“名称 | 摘”要分别为:“精华 | jing”、“推荐 | jian”、“精华推荐 | jingjian”、“案例分析 | an”
步骤三:找到./THEMES/模板名/TEMPLATE/b_article-multi.html文件,然后查找<#article/intro#>,在其前方添加如下代码:
<img src="<#ZC_BLOG_HOST#>img/<#article/firsttagintro#>.gif" class="thumb" />
如果不明白请看下图:
需要说明的是,根据模板的不同标签<div class="intro">所属于的类可能不同,所以该行代码不作为此步骤的参考依据。
步骤四:添加CSS代码,相关文件位置./THEMES/模板名/STYLE/default.css,添加代码如下:
div.intro img.thumb {float:left;margin:4px;padding:2px;border: 1px solid #CCC;}
需要说明的是,该段代码中intro是与步骤三中的标签<div class="intro">的类名称相同,意思就是说,如果步骤三标签中属于<div class="aaa">,那么CSS代码就对应的修改为div.aaa img.thumb后面内容不变。
步骤五:在站点根目录新建文件夹命名为[img],然后将文章开头的5个图标上传到该文件夹即可。
步骤六:文件重建。
按照上面5个步骤做完,效果应该就能够显现出来了,阿呆需要提醒大家的是该方法其实就是将文章摘要的图文混排的灵活应用,如果你能够找到足够多的图片,然后将图片名称改成与tag标签的摘要名称一样,那么实现图文混排的效果就非常简单了。
以上方法是在首页及文章分类页面中才会显示,如果有朋友需要在文章内页也显示这些导读图标,请在./THEMES/模板名/TEMPLATE/b_article-single.html内找到合适位置,加入步骤三的代码即可。
OK,方法是阿呆前天想出来的,今天就公布出来了,不知道大家觉得如何,如果大家觉得还不错,呵呵,阿呆不需要多说什么,你们懂的!
使用方法:想要上面哪个图标出现,在文章的TAG里面,将对应的TAG排在第一个即可!
补充:阿呆突然想起来还有细节没有交代清楚,特二次编辑给大家说明一下。该功能的实现必须是未使用图文混排的博客才可以,如果你的博客使用了图文混排,那么将无法完成该功能,如果你的博客用了该功能,那么就不能再进行图文混排了。
阿呆友情提供图标文件打包下载:导读图标下载
文章作者:北京SEO— 阿呆
本文地址:http://www.365lab.com.cn/SEO/article_details_seo.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

2、
3、
4、
5、






沙发别被占了
小功能大智慧 真不错。
坐个板凳
你们速度太快了,这个小功能在用户体验上来很不错。
俺研究研究能不能放Z-BLOG
回头试试去。
貌似就是Z-BLOG的,强烈顶·~
顶一下先,。。。
知道注重用户体验的网站会走的更远。
沙发被抢,囧
-,-怎么也没人教教wp的博客这些呢
很不错的小玩意儿,对访客能起到不错的引导作用。
这个对于综合性的资讯站效果比较好。
不错 很有创意
很喜欢,这几个图标看起来就漂亮!
额 不错,阿呆就是喜欢研究啊
这个细节很不错。应该有一定的促进作用~
博主加油!
呵呵!我也用wp
不错的文章啊 呵呵!
支持下
看看博主~
不错的 学习下!
恩 学习了 支持下
现在的文章还太少了,先收藏下,等以后用
学习了,以后留用
学习了
这方法真不错。
第四步说的不是很清楚,是粘贴到那一页的那个代码前啊,还是随便粘贴啊,随意说讲的没有前面几步细
楼主很仔细的一个人、、
弄上这些小图标给用户的感觉非常好、、、
很喜欢,等我站基本弄好了就实验一下
谢谢分享
学习咯