闲来无事,发了发牢骚,看着侧栏连接越来越多,把管理都撑到最底下去了,看着也影响侧栏的美观,所以就想了点办法将侧栏变为双列显示,然后最多随即显示20个,也就是侧栏最多显示20个,但是这20个都是在所有的连接中随机选择的。其余的都放在连接页面,参考了几位博友的连接协议,自己再发挥了一下,搞了一个连接页面,链接页面会全部显示所有连接,但排名是随机的。这样没有排名,也是比较好的。其中连接页面的随机排名是iNove主题自带的连接模板的功能,直接新建页面就可以了,这里主要说下将单列边栏改为双列边栏的方法和代码。效果见效果图。

事先声明下,因为本人不懂CSS,所以改的话,里面很可能有很多不符合规范的地方,但是在IE6,火狐,chrome,IE7还有IE8都显示正常,所以应该不用担心,如果担心的话,那还是不用的好吧。


其中参考了William Hua的Blog的一篇相关的日志,但是他用的是Hot Friends这款插件,也是在这款插件的基础上修改的。但是我觉着自己博客速度已经很够呛了,所以不敢再用更多的插件了。所以自己捣鼓捣鼓出来这个东西,希望对大家有帮助。

首先声明一下,此方法对于iNove 1.3版本,如果是其他的主题或者版本不保证可用。

打开你主题的style.css文件,找到sidebar样式表的相关定义项目,比如:

1
2
3
#tag_cloud a {
	line-height:130%;
}

这些代码之后,添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#linkcat {
	background:#F7F7F7;
	width:300px;
	float:right;
	font-size:95%;
	line-height:145%;
	overflow:hidden;
}
#linkcat li {
	background:url(img/icons.gif) 0 -320px no-repeat;
	padding-left:22px;
	list-style:none;
	margin-top:5px;
	/*font-size:95%;*/
}
#linkcat .content, 
#linkcat li {
	font-size:12px;
}
 
#linkcat-2 li {
        background:transparent none repeat scroll 0 50%;
        float:left;
        padding-left:0;
        width:50%;
}
#linkcat-2 li a{
        background:transparent url(img/icons.gif) no-repeat scroll 0 -320px;
        padding-left:22px;
}
#morelink a
{
  float:right;
}

当然你可能会问,此css文件中已经定义了一个linkcat了,这里怎么还可以再用,因为我不懂,所以也解答不上来,但是其可以正常工作,也可能是一个是class另一个是id所以不冲突可以用,但是这样应该不和规范。
做好之后保存,下一步,打开你的sidebar.php文件,找到

1
<!-- sidebar south START -->

紧跟其后添加

1
2
3
4
5
6
7
<div id="southsidebar" class="sidebar">
<div class="widget">
<ul><?php wp_list_bookmarks('orderby=rand&limit=20'); ?></ul>
<div id="morelink"><a href="你的博客链接页面连接">全部&raquo;</a></div>
<div class="fixed"></div>
</div>
</div>

说明:wp_list_bookmarks('orderby=rand&limit=20');为调用博客链接的函数,orderby=rand&limit=20意思为随机显示,最多显示20个。之后去你的后台新建页面,模板选择links,将上文中"你的博客链接页面连接"该为你新建这个页面的网址,OK,上传吧,看看效果。如果你看到有两个连接了,那么请去掉你之前添加的链接,或者去主题--小工具--取消你的连接小工具。

14 评论

  • :arrow:
  • :grin:
  • :???:
  • :cool:
  • :cry:
  • :shock:
  • :evil:
  • :!:
  • :idea:
  • :lol:
  • :mad:
  • :mrgreen:
  • :neutral:
  • :?:
  • :razz:
  • :oops:
  • :roll:
  • :sad:
  • :smile:
  • :eek:
  • :twisted:
  • :wink: