侧边栏小修改

/ 55评 / 0

现在已经凌晨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怎么用,可以看这里

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

  2. Dawnson说道:

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

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

  4. 杨董说道:

    我也用inove 挺简洁 漂亮的

  5. surda说道:

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

  6. 有点蓝说道:

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

  7. blueandhack说道:

    这个搜藏~

  8. 朵未说道:

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

  9. Ian说道:

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

  10. only博客说道:

    WordPress在于折腾~ :嘻:

  11. 小杰博客说道:

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

  12. 蛋卷说道:

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

    • hesiway说道:

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

  13. 小周博客说道:

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

  14. 3q博客说道:

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

    • hesiway说道:

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

  15. 严重浪漫说道:

    链接滑动很好玩~~~

  16. yu说道:

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

  17. 风小说道:

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

  18. 扯远了说道:

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

  19. 小劲说道:

    呵呵,挺不错的

  20. joyla说道:

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

  21. C度空间说道:

    足迹功能很特别哦

  22. freetstar说道:

    挺好看的

  23. 睿智小超人说道:

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

  24. 天天记事说道:

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

  25. 小松说道:

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

  26. Jethro说道:

    我还是喜欢足迹功能

  27. 阿修说道:

    标签云挺好看的

Comments have been closed.