当前位置:首页 > 经验交流 > 北京SEO文章摘要前的小图标的实现方法(ZBlog)
Dec21th

北京SEO文章摘要前的小图标的实现方法(ZBlog)

阿呆 经验交流 31 Comments 人阅读了此文 我来说两句!

  观察仔细的朋友应该发现了北京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
版权所有 © 转载时必须以链接形式注明作者和原始出处!

to "北京SEO文章摘要前的小图标的实现方法(ZBlog)"

  1. 广州SEO
    #1 广州SEO 回复该留言 2010-12-21 14:06:25

    沙发别被占了

    阿呆 于 2010-12-21 14:14:04 回复
    真速度啊!~~~

  2. 广州SEO
    #2 广州SEO 回复该留言 2010-12-21 14:08:25

    小功能大智慧 真不错。

    阿呆 于 2010-12-21 14:14:31 回复
    细节,阿呆注重的是细节,呵呵!

  3. 雪雁
    #3 雪雁 回复该留言 2010-12-21 14:10:16

    坐个板凳

    阿呆 于 2010-12-25 18:53:46 回复
    天冷了,坐板凳,小心着凉!

  4. 武汉seo
    #4 武汉seo 回复该留言 2010-12-21 14:11:13

    你们速度太快了,这个小功能在用户体验上来很不错。

    阿呆 于 2010-12-25 18:55:31 回复
    呵呵,阿呆也是这么觉得的

  5. 李学朋
    #5 李学朋 回复该留言 2010-12-21 14:11:20

    俺研究研究能不能放Z-BLOG

    阿呆 于 2010-12-21 14:13:42 回复
    我这就是Zblog的啊!~~~
    肖俊 于 2010-12-21 14:22:04 回复
    学朋进这个博客肯定没有弄清楚这是ZBLOG还是WP,哈哈。
    李学朋 于 2010-12-21 14:39:16 回复
    仔细一看 原来是Z-BLOG

  6. 摩尔
    #6 摩尔 回复该留言 2010-12-21 14:12:06

    回头试试去。

    阿呆 于 2010-12-25 18:57:14 回复
    试之前记得做好备份!

  7. 李学朋
    #7 李学朋 回复该留言 2010-12-21 14:12:53

    貌似就是Z-BLOG的,强烈顶·~

    阿呆 于 2010-12-25 18:57:49 回复
    终于发觉是ZBlog了啊,呵呵!

  8. 4tradingfans
    #8 4tradingfans 回复该留言 2010-12-21 14:14:55

    顶一下先,。。。

    阿呆 于 2010-12-25 18:59:51 回复
    呵呵,谢谢了,貌似你的评论都很短- -!

  9. 疯子
    #9 疯子 回复该留言 2010-12-21 14:44:31

    知道注重用户体验的网站会走的更远。

    阿呆 于 2010-12-25 19:00:36 回复
    恩,阿呆也坚信这一点!

  10. 咯吱
    #10 咯吱 回复该留言 2010-12-21 15:51:05

    沙发被抢,囧

    阿呆 于 2010-12-25 19:01:39 回复
    呵呵,下次早点来咯,呵呵!

  11. 螃蟹
    #11 螃蟹 回复该留言 2010-12-21 15:54:06

    -,-怎么也没人教教wp的博客这些呢

    阿呆 于 2010-12-25 19:02:14 回复
    呵呵,阿呆不会WP。。。。

  12. 东莞网站推广
    #12 东莞网站推广 回复该留言 2010-12-21 16:09:14

    很不错的小玩意儿,对访客能起到不错的引导作用。

    阿呆 于 2010-12-25 19:02:48 回复
    呵呵,不错吧!

  13. Firm
    #13 Firm 回复该留言 2010-12-21 16:10:54

    这个对于综合性的资讯站效果比较好。

    阿呆 于 2010-12-25 19:03:16 回复
    呵呵,那肯定的!

  14. 卢松松
    #14 卢松松 回复该留言 2010-12-21 16:33:04

    不错 很有创意

    阿呆 于 2010-12-25 19:03:57 回复
    松松啥时候考虑把这功能弄成插件吧!呵呵!不过估计松松现在也比较忙!

  15. 苏州妇科医院
    #15 苏州妇科医院 回复该留言 2010-12-21 18:43:39

    很喜欢,这几个图标看起来就漂亮!

    阿呆 于 2010-12-25 19:06:06 回复
    呵呵,谢谢支持!

  16. 兰州网站建设
    #16 兰州网站建设 回复该留言 2010-12-21 22:13:09

    额 不错,阿呆就是喜欢研究啊

    阿呆 于 2010-12-25 19:07:34 回复
    研究的方向都是为用户着想,呵呵!

  17. 知无涯安康SEO
    #17 知无涯安康SEO 回复该留言 2010-12-21 23:29:41

    这个细节很不错。应该有一定的促进作用~

    阿呆 于 2010-12-25 19:08:37 回复
    但是实际效果貌似不是这样!呵呵!

  18. 丁桥人
    #18 丁桥人 回复该留言 2010-12-22 10:39:09

    博主加油!

    阿呆 于 2010-12-25 19:09:21 回复
    一定,一定!

  19. 妇宝宁
    #19 妇宝宁 回复该留言 2010-12-22 10:58:54

    呵呵!我也用wp

    阿呆 于 2010-12-25 19:10:13 回复
    呵呵,抱歉,阿呆这个是ZBlog

  20. 网络赚钱
    #20 网络赚钱 回复该留言 2010-12-22 11:21:30

    不错的文章啊 呵呵!

    阿呆 于 2010-12-25 19:10:33 回复
    呵呵,谢谢支持!

  21. 广州SEO
    #21 广州SEO 回复该留言 2010-12-22 11:45:10

    支持下

    阿呆 于 2010-12-25 19:11:26 回复
    呵呵,谢谢啦!

  22. 东莞SEO
    #22 东莞SEO 回复该留言 2010-12-22 11:45:35

    看看博主~

    阿呆 于 2010-12-25 19:12:59 回复
    呵呵,欢迎来访!

  23. 不错的 学习下!

    阿呆 于 2010-12-25 19:13:43 回复
    呵呵,学会了不?

  24. 临沂seo
    #24 临沂seo 回复该留言 2010-12-22 13:48:15

    恩 学习了 支持下

    阿呆 于 2010-12-25 19:14:27 回复
    呵呵,谢谢啦!

  25. 小宇博客
    #25 小宇博客 回复该留言 2010-12-22 13:48:46

    现在的文章还太少了,先收藏下,等以后用

    阿呆 于 2010-12-25 19:15:17 回复
    额,我博客的文章应该不少吧!

  26. 花脸猴
    #26 花脸猴 回复该留言 2010-12-22 13:57:19

    学习了,以后留用

    阿呆 于 2010-12-25 19:16:36 回复
    呵呵,谢谢支持!

  27. www.0757136.com
    #27 www.0757136.com 回复该留言 2010-12-22 21:45:04

    学习了

    阿呆 于 2010-12-25 19:17:06 回复
    呵呵,欢迎来访!

  28. oogps
    #28 oogps 回复该留言 2010-12-24 22:37:17

    这方法真不错。

    阿呆 于 2010-12-25 19:18:18 回复
    呵呵,oogps兄,有没有兴趣把这个功能做成插件啊!?

  29. 郑州SEO
    #29 郑州SEO 回复该留言 2010-12-30 23:37:30

    第四步说的不是很清楚,是粘贴到那一页的那个代码前啊,还是随便粘贴啊,随意说讲的没有前面几步细

    阿呆 于 2011-1-2 0:22:00 回复
    第四步很清楚吧!
    修改CSS样式,打开相应文件,在文件最后添加就可以了啊!

  30. 祁多多
    #30 祁多多 回复该留言 2011-1-6 16:19:12

    楼主很仔细的一个人、、
    弄上这些小图标给用户的感觉非常好、、、

    很喜欢,等我站基本弄好了就实验一下

    谢谢分享

  31. 学习咯

此楼已盖到第31层了,目前尚未封顶!

(友情提示:本博支持Ctrl+Enter提交评论)