网站美化:右侧边栏添加彩色标签

网站美化:右侧边栏添加彩色标签

一、前言

虽然知更鸟主题自带的3D标签很酷炫,但是加载起来比较耗时,所以准备换个静态彩色标签。

彩色标签效果如下:

网站美化:右侧边栏添加彩色标签

二、代码部署

1、首先之前开启了3D标签的,先去后台→外观→主题选项→基本设置,取消3D标签。

2、后台→外观→小工具→选择正文侧边栏,然后从左边拖拽:热门标签(小工具)放到正文侧边栏下面,显示数量33(建议是3的倍数,多少自己看着舒服就OK)

3、再从左边拖拽:增强文本(小工具)放到刚刚的“热门标签”下方。复制下方代码,放到“增强文本”(小工具)的内容框里面OK。

<script type="text/javascript">box_width=$("#cx_tag_cloud-4").width();len=$(".tagcloud a").length-1;$(".tagcloud a").each(function(i){var let=new Array('c3010a','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>
<style type="text/css">
.tagcloud a{color:#fff;}
#php_text-3{display:none;}
.tagcloud {padding: 10px 0 10px 10px;}.tagcloud a {padding-right:5px;
padding-left:5px;
overflow:hidden;
display:block;
width:92px;
height:28px;}
</style>

有细心的朋友可能会发现,使用后在热门标签下方会有个细长的白色框框(就是刚刚的“增强文本”小工具),怎么隐藏呢?

网站美化:右侧边栏添加彩色标签

在白色框框位置右键审查元素,找到这个div的id。

网站美化:右侧边栏添加彩色标签

比如我的这个id为php_text-2。将这个id复制下来,换掉上述代码中的php-text-3就可以啦!

三、总结

我的做法是,主页不放3D标签,在其他小页面放上,例如将3D标签放在网页收藏侧边栏中。

 

本站整理自:

http://www.ixianzong.com/388.html

来源:

https://cuijiahua.com/blog/2018/01/website_10.html

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?