zblog多彩tag的实现方法 js+css

很多朋友喜欢在博客的右侧安排一个区块放置网站的热门tag标签，可以起到很好的聚合作用和seo作用。但是想要更漂亮怎么办呢？一般就是用多彩tag或者球形滚动tag来美化下。本文为大家介绍下zblog里多彩tag的做法。

事先说明下：zblogphp有多彩tag插件，不会html和css的朋友建议直接用插件实现。动手能力较强而又想要自定义的朋友可以尝试按照本文方法修改。

实现多彩tag一共有3个部分。

js部分，代码如下：

<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>

需要注意是：var tags_a = $("#tags a");这一行，#tags为你网站放置tag区块的id属性，zblog一般都是tags不需要另外修改。此js代码放置的header头部模板的</head>之前即可。

css部分：

#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;}

css部分比较好理解，js控制了tag区块的a属性随机显示为tags1、tags2之类的，我们只需要修改tags1、tags2...等为自己想要的样式即可。

html代码部分

html代码部分如果模板支持自定义侧栏的话直接在zblog后台--模块管理，找到“tags列表”拖到右侧栏即可。如果你的模板不支持自定义侧栏，那么就需要自己加代码了，把以下代码加入到自己想放置的位置：

<dl id="tags"><dt>热门标签</dt>
<dd><ul>
zblogphp为“{module:tags}”/zblogasp为“<#CACHE_INCLUDE_TAGS#>”<div class="clear"></div>
</ul></dd>
</dl>

文件重建或者更新缓存，ok大功告成，多彩tag就是这么神气。