美化知更鸟标签云小工具

2018年1月24日12:44:23 发表评论 1,712

美化知更鸟标签云小工具,貌似网上也有好多这些个教程,我也就收集下,反正自己使用的感觉还不错,小伙伴们也可以使用下。

美化知更鸟标签云小工具

美化知更鸟标签云小工具代码部署

1、添加小工具,标签云、增强文本。

2、关闭3D标签云显示(之前的版本是在主题设置里的基本设置里面,新版的改到了标签云小工具中勾选)。

3、将以下代码添加到增强文本中。

  1. <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>

4、添加css。(可以放到style中、主题设置自定义中、上面增强文本中)

  1. <style type="text/css">
  2. .tagcloud a{color:#fff;}
  3. .tagcloud {padding10px 0 10px 10px;}.tagcloud a {padding-right:5px;
  4. padding-left:5px;
  5. overflow:hidden;
  6. display:block;
  7. width:92px;
  8. height:28px;}
  9. </style>

5、隐藏空白小工具。

完成以上4步操作后,小工具已经可以正常显示了,开始会发现,有一个空白的小工具,所以我们需要隐藏下。

F12找到小工具的css代码,然后在第四步中添加隐藏代码,例如本站是加在首页显示的:

  1. #php_text-7{display:none;}

F12寻找到空白小工具为 #php_text-7 ,所以,在css中加上以上隐藏代码就可以正常显示了。

以上代码可根据自己喜好更改,颜色在以上JS中更改。

美化知更鸟标签云小工具

效果图



版权声明:本文由江西SEOSEO原创或整理发布,欢迎分享! 更多优化知识请查看 SEO教程

本文链接:https://www.zhushuming.cn/4807.html

weinxin
博客之家
欢迎加入博客之家,本站的资源也都会上传到博客之家。当然,更多的是交流~

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: