今天逛博客,看到好多博客都在友情链接前面添加了favicon图标,让我好生羡慕。我这人就喜欢在链接前面加点小东西,不讲原理,狗屁原理我也不懂的,直接上教程。
效果见首页:http://www.52lpp.cn
jQuery(document).ready(function($){
$(".linkp 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;/>");
});
});
PS:其中的“.linkp”是css样式div class="linkp" ,请根据你的主题中的css样式进行修改,下面出现的“linkp”与此相同。
如果你对jQuery比我的水平还要低的话,那么你请认真阅读下面内容:
1、把以上代码储存为“js”文件,如“mylinkspage.js”(新建一个文本文档,把上面代码复制保存,然后把文本文档的后缀“txt”改为“js”就可以了);
2、在你正在使用的主题的<header></head>之间添加如下代码:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://www.xxx.com/js/mylinkspage.js"></script>
这个“jquery.min.js”jQuery文件包,是调用了google服务器上面,如果你网站服务器比google速度快且流量大,那么你可以下载放在你的网站服务器上,地址改成文件实际地址。
“mylinkspage.js”是存放jQuery代码的文件,请根据实际地址填写。
然后在链接管理--友情链接,将你的链接都放在<div class="linkp" > </div>里面
最后根据你的需要给你的链接添加CSS样式。。这个根据你自己的情况而定。。
因为用的模板不一样~~心诺老湿的模板友情链接是显示在侧栏的。。而链接放在一列里面总觉得不是那么顺。。索性就改成两列吧
方法:
将以下代码添加到链接管理--友情链接里面
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>第一列链接</td>
<td>第二列链接</td>
</tr>
</table>
上面是最简单的代码,你也可以自定义表格的宽度等等<table width="270" border="0" cellspacing="1" cellpadding="1">
<tr>
<td align="left" width="135" valign="top">
左侧友链代码
</td>
<td align="left" width="135" valign="top">
右侧友链代码
</td>
</tr>
</table>
好了,全部结束~~不是很麻烦吧 ~~