教你给zblog右边侧栏实现彩色标签云

全屏阅读

2015-07-29 10:07:10 作者: 所属分类:dedecms教程 阅读:1495 评论:0

标签:

一般博客都是zblog和wordpress,晶晶前一个网站就是zblog做的,因为zblog不能做二级下拉列表,所以新站换成了wordpress,还有就是zblog是asp的,wordpress是php的,现在wordpress熟悉了之后,发现zblog程序真不是一般次啊。不过zblog教程还是要写的,这篇文章主要是给用zblog建站的孩纸们写的,如果会的人请忽略哈。

可能大家在访问别人网站的时候会发现他们的标签云是彩色的也很漂亮,总想把自己的网站也弄上,然而在网上搜索出来的都是wordpress实现彩色标签云的教程。晶晶这个网站的标签云是主题自带的工具,完全省了一个插件,哈哈。其实在zblog插件中也有一个叫多彩tags的插件,不过调用了那个插件之后,不管你标签有多少个,只能显示前几个标签。不过话说回来,能少用插件就少用插件吧。

zblog实现彩色标签元的方法

首先复制下面这串js代码,把它放到</head>的前面。

<script type="text/javascript">

$(document).ready(function() {

var tags_a = $("#tags a");

tags_a.each(function(){

var x = 9;

var y = 0;

var rand = parseInt(Math.random() * (x - y + 1) + y);

$(this).addClass("tags"+rand);

});
})
</script>

然后复制下面这串css代码,把他放到相应的css文件里。这里的background-color:#FFFFFF;可以改成自己想要的颜色。

#tag a{height:20px;line-height:20px;padding-right:9px;font-size: 14px;padding-top: 3px;padding-bottom: 3px;padding-left: 9px;background-color: #66CCFF;color: #FFFFFF;}
#tag .tags0{background-color: #CC3300;}
#tag .tags1{background-color: #CC3300;}
#tag .tags2{background-color: #339900;}
#tag .tags3{background-color: #FF9933;}
#tag .tags4{background-color: #0099CC;}
#tag .tags5{background-color: #00CCCC;}
#tag .tags6{background-color: #99CC66;}
#tag .tags7{background-color: #339999;}
#tag .tags8{background-color: #FF6699;}
#tag a:hover{color:#FFFFFF;text-decoration:none;background-color: #18c1a0;}

再然后回到模块管理,找到tags列表,把它拖拽到右侧边栏就可以了。实现的效果可以自己看看自己的网站哦~

» 郑重声明:本文由上海SEO发布,所有内容仅代表个人观点。版权归上海SEO优化-SEO技术-荣晶SEO博客上海SEO共有,欢迎转载, 但未经作者同意必须保留此段声明,并给出文章连接,否则保留追究法律责任的权利! 如果本文侵犯了您的权益,请留言。

目前有 0 条留言 其中:访客:0 条, 博主:0 条

给我留言