燕山网络科技

首页 网站教程zblog教程正文

美化 Z-Blog 友情链接 调用Favicon图标

燕山网络科技2017-09-30503

前面介绍了《Typecho 友情链接获取Favicon图标》,在教程里面博客吧也说过JS这玩意现在基本是通用的,所以在Typecho可以使用JS实现的东西,在Z-Blog博客也是可以实现,只是由于Z-Blog的主题模板构造有点点不同,要给多个模板添加代码,考虑到新手可能会有点困难,所以河南网站建设在此特别介绍下。

Z-Blog 博客友情链接调用Favicon图标的方法:

  1. 由于Z-Blog 博客的顶部并没有像WordPress或Typecho一样,用header.php文件实现,而是与index、sidebar、footer连在一起,所以要在default.html、single.htm、catalog.html、tags.html、gestbook.html、search.html模板中的<head>和</head>之间添加加载jquery库的JS代码:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
  2. 然后再在default.html、single.htm、catalog.html、tags.html、gestbook.html、search.html模板中的jQuery库JS代码之后添加以下代码:

    <script type="text/javascript">///友情链接图标faviconjQuery(document).ready(function($){ $(".blogroll a").each(function(e){
    	$(this).prepend("<img src=http://www.google.com/s2/favicons?domain="+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+" style=float:left;padding:5px;>");}); });</script>
  3. 保存文件后,重建文件,刷新首页即可。
    美化 Z Blog 友情链接 调用Favicon图标  zblog教程  第1张

提示:如果只有首页显示友情链接,除了default.html文件外,其它文件不用添加相关JS代码。


燕山网络科技 https://www.hnysnet.com/zblogcn/1445.html 转载需授权!

上一篇:实现 Z-Blog 博客评论分页显示效果的方法

下一篇:JS调用 Z-Blog 博客文章列表的方法

(¬_¬) 还不快点抢沙发!!!

服务热线

15639981097

qrcode

扫一扫二维码,访问手机版

扫一扫二维码,添加客服微信