WordPress教程-知更鸟Begin主题七彩热门标签美化【WP系列教程之二十九】

我们经常看到一些人的博客标签云很整洁酷炫,今天小编就分享一个代码,css代码放主题样式表文(style.css)

或者主题选项自定义样式中。效果如下图:

WordPress教程-知更鸟Begin主题七彩热门标签美化
WordPress教程-知更鸟Begin主题七彩热门标签美化

css如下:

.tagcloud{
padding:14px 0 14px 12px;
}
.tagcloud a{
float:left;
margin:3px;
line-height:26px;
text-align:center;
border:1px solid #ddd;
border-radius:2px;
padding-top:0;
padding-right:5px;
padding-bottom:0;
padding-left:5px;
overflow:hidden;
display:block;
width:92px;
height:28px;
}
.tagcloud a{
color:#fff;
}

js自己调用或添加到页脚文件(</body>前)

js代码如下:

<script type="text/javascript">box_width = $("#cx_tag_cloud-5").width();
len = $(".tagcloud a").length - 1;
$(".tagcloud a").each(function(i) {
var let = new Array('3366FF', '31ac76', 'ea4563', '31a6a0', '8e7daa', '4fad7b', 'f99f13', 'f85200', '666666');
var random1 = Math.floor(Math.random() * 9) + 0;
var num = Math.floor(Math.random() * 6 + 9);
$(this).attr('style', 'background:#' + let[random1] + '');
if ($(this).next().length > 0) {
last = $(this).next().position().left
}
});</script>

古风网版权互动须知

本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

原文地址:https://www.vivst.com/5141.html WordPress教程-知更鸟Begin主题七彩热门标签美化【WP系列教程之二十九】

发表评论