【即将关站通知●已关闭注册功能】,倒计时剩余:计算中...

Typecho 友情链接获取Favicon图标


对于 Favicon 大家都不陌生,它就是网址前的那个小图标,演示可看浏览器地址栏博客吧网址前的小图标。刚才在我的Typecho博客的每个友情链接前面都显示各自的Favicon图标,该方法我是在木木木木木博客上找到的,其是给WordPress博客写的JS,但JS是通用的,所以也可以用在Typecho上面。

获取Favicon图标实现原理:

获得每个友情链接的地址,提取出域名部分,提交给 Google,Google 返回的就是一个16×16的 PNG 图片,对于没有被 Google 缓存 Favicon 的网站,会得到一个小地球的蓝色图标。

Typecho 友情链接获取Favico图标的方法:

  1. 先检查自己的Typecho博客主题是否有加载jQuery库,通常是在header.php文件的<head></head>之间,如果没有就把下面代码添加到<head></head>之间
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
  2. 加载jQuery库后,再在</head>之前添加下面的JS代码,下面的代码便是获取Favicon图标的代码
    <script type="text/javascript">
    ///友情链接图标favicon
    jQuery(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>

    具体含义就是:命令jQuery游历所有class=“blogroll”(修改为自己的class)下的a标签,然后在相对应a标签内添加img,src是GG服务器加对应a标签内的href主网址,并添加样式左浮动(即显示在左边)填充5px。

  3. 保存文件,刷新友情链接的页面,是显示了友情链接网站的Favicon图标吧!!

演示地址:http://www.xiy.in(右下角)

提示:在WordPress上实现的方法和上面一样,按同样步骤操作就可以了。

收藏 邀请

路过

雷人

握手

鲜花

鸡蛋


最新评论

在线支持
关闭
欢迎来到魔趣吧
如果你有建站技术问题、仿站需求、模板插件修改需求,请联系我们的技术支持!高效率,低价格的帮你搞定!
请认准魔趣吧唯一官网:www.moqu8.com,谨防假冒网站!

一般问题请到【求助区】发帖咨询(免费)!

邮箱咨询:
winkill2012@qq.com

邮箱咨询需注明:资源地址+本站用户名+具体问题,三者缺一不做处理。非本站资源不处理!
在线支持

关于魔趣吧|魔趣建站

魔趣吧,志在打造全国最大的建站资源共享平台。 本站提供海量免费的建站资源,包括WordPress模板、Discuz精仿模板、PHPWind模板、phpcms模板、Discuz精仿插件、帝国cms模板、织梦模板等上万精品模板!同时,提供各种建站素材、JS特效、整站程序源码!
服务中文站长,传播分享精神!建站,就来魔趣吧!!
2015-2024 魔趣吧 ( 豫ICP备2021024354号 )   豫公网安备41030402000182号 百度统计
HTTPS安全认证
|网站地图 | 已运行:天 
温馨提示:本站所有资源、教程、源码,不得用于非法站点及用途,否则,本站将终止提供任何服务! Powered by Discuz! Licensed