现在位置:首页 » z-blog相关 »

zblog多彩tag的实现方法

心岛发布于2015年09月18日  分类: z-blog相关  浏览:1904 人次  评论:0 

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

QQ截图20150918223713.jpg


实现多彩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>

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

赞 (0次) 打赏
X
打赏方式:
  • 支付宝
  • 微信
  • QQ红包

打开支付宝扫一扫

本文由心岛原创或编辑,转载请保留链接【zblog多彩tag的实现方法】http://www.liangxin.name/?post=1052
本文百度已收录,点此查看详细信息
本文标签: js代码修改 代码修改 技巧 z-blog
上一篇: zblog php使用百度站内搜索代码的方法
下一篇:win7下C:\WINDOWS\Installer文件夹的乾坤大挪移
目前有 0 条评论