ZBLOG PHP代码实现侧栏彩色标签TAG关键字样式方法

肯定不少网友和老蒋一样，在看到一些网友博客的时候界面细节元素做的还是相当不错的，比如在博客的侧栏TAG关键字标签采用的彩色样式，这个比我们使用的默认黑白样式或者单调的底层颜色样式会好看一些。当然，这个是可以用程序自带的插件实现的，有些也是主题自带的。如果我们主题没有自带那可以通过代码或者插件实现。

老蒋有在昨天的"ZBLOG标签调用的常见用法"文章中有记录到常用的标签调用，其中也有包括提到标签页面专题用到字母分类方法。由于时间问题我没有整理到侧栏标签TAG用彩色实现，在这里我今天单独寻找到可以用代码实现ZBLOG PHP彩色标签TAG关键字样式方法。

实现方法参考自天兴博客（https://www.txcstx.cn/post/666.html），这里摘录下来以后需要的时候老蒋调试看看。这里需要修改啊三处的页面实现。

1、CSS样式部分

我们主要的方向也是希望给予TAG标签设定随机的多彩样式，无论是代码还是插件都是基于这个办法的。所以，我们要先设定样式。

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

这个我们根据系统，有的时候是主题特定的标签样式设定TAG样式。

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

其中我们可以看到#tags是对应网站的样式的，如果有不一样要调整。当然要配合上面的CSS。

3、标签调用部分

dl id="tags">
    dt>
    多彩标签/dt>
    dd>
    ul>
{
module:tags}
    div class="clear">
    /div>
    /ul>
    /dd>
    /dl>
    

这里我们再在需要的地方调用标签。

这里是用代码实现的，后面老蒋看看有没有zblog彩色标签插件来实现这样的效果，毕竟对于大部分网友来说修改这么多代码确实比较麻烦。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！