Blog

给EMLOG友情链接添加Favicon图标

   实现原理是这样子的:

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

废话少说,下面就说这么解决方法的啦:

1.检查你的EMLOG4模板文件中的header.php文件中的 <head>…</head>之间是否加载了jQuery库,没有的话就把下面的这段代码加到<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。

(ps: $(“.blogroll a”).each(function(e){  其中的blogroll 要修改为你css中友情链接的class,例如我的 <ul class=”linksTxt”>,那就把blogrool改为linkstxt,我当时就是不明白这里是神马意思,所以走了一些弯路,如果你还是不明白的话给我留言。)

3.保存看看,是否是显示了了图标了呢,嘎嘎成功了吧~~

呵呵,你可能会发现你搞出来的链接可能是一列下来的,而这里的效果是两列的,主要是因为样式表中进行了设置

没有评论

Leave a Reply