为友情链接添加Favicon|iNove主题

Posted by Harid九月 - 20 - 2010 Leave comments

iNove主题自带有友情链接的模板页,直接在后台添加该类型页面即可。该模板对应到主题的具体文件就是links.php。因此要为每个友链名字前添加Favicon,只要修改该文件并添加合适的CSS样式即可。

在该文件里,关键是下面这一段代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="box linkcat">
	<ul>
	<?php
		$bookmarks = get_bookmarks('orderby=rand&category_name=' . $linkcat->name);
		if ( !empty($bookmarks) ) {
			foreach ($bookmarks as $bookmark) {
				echo '<li><a href="' . $bookmark->link_url . '" title="' . $bookmark->link_description . '" target="_blank">' . $bookmark->link_name . '</a></li>';
			}
		}
	?>
	</ul>
	<div class="fixed"></div>
</div>

找到症结所在了,开始动刀!

首先在 style.css 里找出上面class中的“linkcat”部分,将其改为适合你自己主题的样式,我的是:

1
2
.post .content .linkcat ul li{list-style:none;float:left;width:100px;padding:2px 0;overflow:hidden;border: 1px solid #dadada;margin: 3px 5px;background-color:#E3F6CE;}
.post .content .linkcat ul li a{padding-left:15px;height:16px;line-height:16px;}

然后,在该文件的头部加载jQuery库:

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

并在该文件的最后面加上下面这一段:

1
2
3
4
5
6
7
8
<script type="text/javascript">
jQuery(document).ready(function($){
	$(".linkcat 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:0px;>");
		}
	);
});
</script>

好了,我的是搞定了,差强人意!效果见“网上邻居”。如果GG没有缓存有你的网站的Favicon,则会显示一个小球的图标,检测有没有你网站的缓存:http://www.google.com/s2/favicons?domain=yourdomainname。下载我的这个文件:

   声明:本文采用 BY-NC-SA 协议进行授权 | 星期九
   原创文章转载请注明:转自《为友情链接添加Favicon|iNove主题


分享按钮