天兴工作室

主题演示站

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就是这么神气。

<< 1 >>
«    2025年5月    »
1234
567891011
12131415161718
19202122232425
262728293031
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
搜索
最新留言
文章归档
网站收藏
友情链接

Powered By Z-BlogPHP 1.7.4

天兴工作室主题演示站点,如遇到问题请联系我们的在线qq:207649916咨询