1.看到别人的标签云那么好看,当然想自己搞搞看咯。
2.废话不多说,我们直接开整。
首先呢,点击外观–>小工具 –>拖拉标签云至文章页侧栏目
推动完成之后,记得一定点保存(我在这个地方被坑过!)
3.点击ripro主题设置–>底部设置 –> 网站底部自定义JS代码
将一下代码
追加
到文本框中
<!-- start 标签美化--> <style type="text/css"> .tagcloud a{ position: relative; padding: 1px 4px 2px 4px; margin: 0px 4px 0px 3px; border: 1px solid #e6e7e8; border-radius: 18px; text-decoration: none; white-space: nowrap; -o-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34); -ms-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34); -moz-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34); -webkit-box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34); box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34); -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=20,Direction=335, Color='#000000')";/*兼容ie7/8*/filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=125, Strength=1); /*strength是阴影大小,direction是阴影方位,单位为度,可以为负数,color是阴影颜色 (尽量使用数字)使用IE滤镜实现盒子阴影的盒子必须是行元素或以行元素显示(block或inline-block;)*/ } .tagcloud a:nth-child(7n+1):hover{color:#ffffff;background-color:rgba(255,78,106,.8)} .tagcloud a:nth-child(7n+2):hover{color:#ffffff;background-color:#ffaa73} .tagcloud a:nth-child(7n+3):hover{color:#ffffff;background-color:#fed466} .tagcloud a:nth-child(7n+4):hover{color:#ffffff;background-color:#3cdc82} .tagcloud a:nth-child(7n+5):hover{color:#ffffff;background-color:#64dcf0} .tagcloud a:nth-child(7n+6):hover{color:#ffffff;background-color:#64b9ff} .tagcloud a:nth-child(7n+7):hover{color:#ffffff;background-color:#b4b4ff} .tagcloud a:nth-child(7n+1){background-color:rgba(255,78,106,.15);color:rgba(255,78,106,.8)} .tagcloud a:nth-child(7n+2){background-color:rgba(255,170,115,.15);color:#ffaa73} .tagcloud a:nth-child(7n+3){background-color:rgba(254,212,102,.15);color:#fed466} .tagcloud a:nth-child(7n+4){background-color:rgba(60,220,130,.15);color:#3cdc82} .tagcloud a:nth-child(7n+5){background-color:rgba(100,220,240,.15);color:#64dcf0} .tagcloud a:nth-child(7n+6){background-color:rgba(100,185,255,.15);color:#64b9ff} .tagcloud a:nth-child(7n+7){background-color:rgba(180,180,255,.15);color:#b4b4ff} .widget .tagcloud { font-size: 0 } .widget .tagcloud a { display: inline-block; width: 32.39%; margin: 0 .7% 1.4%; padding: 5px 2px; font-size: 12px!important; line-height: 1.2; text-align: center; border: 1px solid hsla(0,0%,39%,.2); border-radius: 2px; text-decoration: none; background: hsla(0,0%,100%,.2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .widget .tagcloud a:nth-child(1) { color: #3385fc; } .widget .tagcloud a:nth-child(2n) { color: #ffc12b; } .widget .tagcloud a:nth-child(3n) { color: #4CAF50; } .widget .tagcloud a:nth-child(4n) { color: #555; } .widget .tagcloud a:before { content: "#"; padding-right: 2px; } .widget .tagcloud a:nth-child(3n+1) { margin-left: 0 } .widget .tagcloud a:nth-child(3n+3) { margin-right: 0 } .widget .tagcloud a:hover { color: #fff; background: #007bff; border-color: #007bff } </style> <!-- end 标签美化-->
点击保存。就可以看到页内变化咯~
如果给您带来帮助,希望您能在本站注册登录一下。
祝好~~~~~~~~~~~~~~
1. 本站所有资源来源于用户上传和网络,如有侵权请及时联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"mababa.xin",如遇到无法解压的请联系管理员!
码巴巴-优质代码创造者 » wp,ripro主题优化文章页内–分类设置标签云展示方式
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 一个高级程序员模板开发平台