程序员人生 网站导航

Z-blog友情链接添加favicon.ico和侧栏链接两列显示

栏目:WordPress时间:2014-06-18 11:49:28

今天逛博客,看到好多博客都在友情链接前面添加了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>

好了,全部结束~~不是很麻烦吧 ~~

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐