侧边栏小修改

现在已经凌晨2点了,还是忍不住修改了主题的侧边栏,这次的修改是我早就想好的,现在看着舒服多了。主要改了彩色标签云足迹功能以及jQuery实现链接的平移效果。

首先,将标签云移至侧边栏顶部,不再从后台的主题添加小工具的方式调用,直接在边栏模板 (sidebar.php)添加了调用代码,并将颜色修改为一定的范围内,变的更加亮丽了哈,而且各个标签之间也不再出现重叠在一起的现象,清爽了许多。

然后,将足迹功能的显示内容做了适当修改,将评论者名字从每条评论中移至标题,并在前面加了大小为16px的头像。这样看起来又变得简洁了些。

最后,借助jQuery实现了侧边栏中链接的平移效果,和其他jQuery使用方法一致:
1.加载 JQuery 库
2.加入以下 JS代码:

jQuery(document).ready(function($){
$('.sidebar li a,h2 a').hover(function() {
$(this).stop().animate({'left': '5px'}, 'fast');
}, function() {
$(this).stop().animate({'left': '0px'}, 'fast');
});});

3.加入以下 CSS:

.sidebar li a {position:relative;}

顺便也给h2标签加了效果,最终为:

.sidebar li a,h2 a {position:relative;}

如果不知道jQuery怎么用,可以看这里

评论

《 “侧边栏小修改” 》 有 55 条评论

  1. 阿修 的头像

    标签云挺好看的

    1. hesiway 的头像

      @阿修, 恩,现在的颜色比较亮丽~

  2. Jethro 的头像

    我还是喜欢足迹功能

    1. hesiway 的头像

      @Jethro, 喜欢那给自己也加一个吧~

  3. 小松 的头像

    呵呵,这个我也有,哈哈~

    1. hesiway 的头像

      @小松, 早已发现,呵呵~

  4. 天天记事 的头像

    我又想换主题了,悲剧……

    1. hesiway 的头像

      @天天记事, 这么频繁可不好~

  5. 睿智小超人 的头像

    很多人喜欢用彩色标签,但我不喜欢,嘿嘿

    1. hesiway 的头像

      @睿智小超人, 各有所爱嘛,看是否适合主题~

    1. hesiway 的头像

      @freetstar, 得到肯定了~ :偷笑:

  6. C度空间 的头像

    足迹功能很特别哦

    1. hesiway 的头像

      @C度空间, 呵呵,看来我是拷贝成功了~

  7. joyla 的头像

    修改后的效果感觉有点花!

    1. hesiway 的头像

      @joyla, 呵呵,就是要这种效果~

      1. joyla 的头像

        @hesiway, 呵呵 花花的感觉啊??呵呵

  8. 小劲 的头像

    呵呵,挺不错的

    1. hesiway 的头像
      hesiway

      @小劲, :微笑:

  9. 扯远了 的头像

    经常折腾有益身体……哈哈

    1. hesiway 的头像
      hesiway

      @扯远了, 对撒~有益身心~

  10. 风小 的头像

    :嘻: 活跃童靴里有2个我

    1. hesiway 的头像
      hesiway

      @风小, 用两个邮箱还说~

      1. hesiway 的头像
        hesiway

        @hesiway, 是俩名字啊~

        1. 风小 的头像

          @hesiway, 主页那来自QQ的是虾米?

          1. hesiway 的头像
            hesiway

            @风小, 腾讯微博~不是有标志纳~

  11. yu 的头像

    我JQ搞不好..放弃了..

    1. hesiway 的头像
      hesiway

      @yu, 我是一点一点地学~

  12. 严重浪漫 的头像

    链接滑动很好玩~~~

    1. hesiway 的头像
      hesiway

      @严重浪漫, 恩~增加了不少动感~

  13. 3q博客 的头像

    侧边栏中链接的平移效果,是指什么来这的呢》?麻烦解释下的呢? :嘻:

    1. hesiway 的头像
      hesiway

      @3q博客, 呵呵,就是鼠标移到链接上面整条链接会向右移动一点形成动态的效果~

  14. 小周博客 的头像

    效果不错。放到头像上有反映。。

    1. hesiway 的头像
      hesiway

      @小周博客, 恩恩~呵呵,晃来晃去蛮好玩的~

  15. 蛋卷 的头像

    你说我哪标签云用彩色如何?

    1. hesiway 的头像
      hesiway

      @蛋卷, 个人观点会好看很多,呵呵,要不加上试试~让大家建议下~

  16. 小杰博客 的头像

    链接滑动挺有意思的,标签云也很漂亮

    1. hesiway 的头像
      hesiway

      @小杰博客, 都是一点点拷过来弄的,看来有收获了~呵呵~

  17. only博客 的头像

    WordPress在于折腾~ :嘻:

    1. hesiway 的头像
      hesiway

      @only博客, 在理,哈哈,这东西真够折腾~

  18. Ian 的头像

    凌晨2点还在弄博客哈 :强: :强:

    1. hesiway 的头像
      hesiway

      @Ian, 哈哈,一时兴起~

  19. 朵未 的头像

    这个效果我喜欢,我也喜欢半夜折腾,到学校后继续搞搞。 :嘻:

    1. hesiway 的头像
      hesiway

      @朵未, 哈哈,是啊,到学校有更多时间折腾了~

    1. hesiway 的头像
      hesiway

      @blueandhack, 很好用的几条代码~

  20. 有点蓝 的头像

    好想用下链接平移的效果,可惜工程太大。。。

    1. 有点蓝 的头像

      @有点蓝,
      唉 试了 还是不成功
      可能就是查一个步骤的事
      博主还能讲得再详细些么?

  21. surda 的头像

    来了就留个脚印 iNove主题折腾的不错

    1. hesiway 的头像
      hesiway

      @surda, 小小折腾下,加点自己的东西~

  22. 杨董 的头像

    我也用inove 挺简洁 漂亮的

  23. 双赢助考中心 的头像

    文章写的不错,特来顶一下!感谢楼主分享的好文章!!!

  24. Dawnson 的头像

    我也是iNove呢,被我改了好多。

  25. 深圳摄影工作室 的头像

    凌晨2点了,还是忍不住修改了主题的侧边栏,楼主看来很耐心呀