首页 > 网站建设 > z-blog相关 > zblog多彩tag的实现方法
2015
09-18

zblog多彩tag的实现方法

很多朋友喜欢在博客的右侧安排一个区块放置网站的热门tag标签,可以起到很好的聚合作用和seo作用。但是想要更漂亮怎么办呢?一般就是用多彩tag或者球形滚动tag来美化下。当然zblog应用中心已有此插件,个人一直认为插件过多会影响程序的执行效率,所以尽量还是手写代码比较好,本文为大家介绍下zblog里多彩tag的做法。

zblog多彩tag的实现方法 - 第1张  | 心岛博客

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

1、 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头部模板的之前,但是如果大家网站模版中自定义了side.php文件,建议此代码就放在该文件的起始位置或者最底部也可。

2、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…等为自己想要的样式即可。

3、Html代码部分(一般放在side.php文件中,当然如果没有此文件就按如下所示放置):

如果模板支持自定义侧栏的话直接在zblog后台–模块管理,找到“tags列表”拖到右侧栏即可。

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

本教程主要参考天兴工作室所示方法改编,请大家灵活使用。

最后编辑:
作者:xindao
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。