不用插件让WordPress博客友情链接横向排列

我的喻名堂网络技术博客上线也有半个月了,居然还没被百度收录,唉。。。。

费话不多说,大家也可以看到现在我的博客只有两个友情链接,其中一个还是我公司的连接,嘿嘿。。现在我的链接是向下竖着排成一列的,前面还有列表符号,不太好看也比较占地方,于是希望看能不能通过调整CSS来让友情链接在页面最下面以横排显示,这样既好看,又不占空间而且也比较符合一般网站的习惯,也是一种优化的小技巧。

通过百度搜索了一下,这方面的资料比较少,最后终于找到了一个比较详细的,里面的代码不能通用,所以我还在研究调整,没有应用到我的网站上来。分享出来备忘也方便给跟我一样基础不强又想调整自己网站的友情链接的朋友一点启发。

下面的代码是根据wordpress 3.0.1版本的默认主题twentyten进行调整演示的

1、备份并下载网站根目录wp-content/themes/twentyten目录下的footer.php、style.css文件

2、用Editplus、Dreamweaver或其他编辑工具,在footer.php的适当位置加入如下内容,用于放置友情链接。

  1. <div id=“blog-roll”>   
  2. <?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘west_sidebar’) ) :   
  3.          wp_list_bookmarks(‘category_before=&category_after=&categorize=1’);   
  4. endif; ?>   
  5. </div><!– #blog-roll –>  

3、用Editplus、Dreamweaver或其他编辑工具,在style.css底部加入如下CSS代码,定义blog-roll样式。

  1. #blog-roll {   
  2.     
  3.         width908px;   
  4.     
  5.         padding:15px;   
  6.     
  7.         background:#f6f6f6;   
  8.     
  9.         border:1px solid #cccccc;   
  10.     
  11.         margin:0 auto;   
  12.     
  13. }   
  14.     
  15. #blog-roll  h2 {   
  16.     
  17.         width:100px;   
  18.     
  19.         line-height:30px;   
  20.     
  21.         font-size:16px;   
  22.     
  23. }   
  24.     
  25. #blog-roll  ul {   
  26.     
  27.         float:left;   
  28.     
  29.         margin:0px;   
  30.     
  31. }   
  32.     
  33. #blog-roll  li {   
  34.     
  35.         list-style:none;   
  36.     
  37.         width:128px;   
  38.     
  39.         margin:0px 10px 10px 10px;   
  40.     
  41.         background:#f3f3f3;   
  42.     
  43.         float:left;   
  44.     
  45. }  

以上代码并不适合所有主题,只是提供一种思路,想要设计出适合自己主题的样式还需要一些html方面的知识,我也还在学习中,大家一起加油!

发表评论

电子邮件地址不会被公开。 必填项已用*标注