新年
快乐
最新公告
  • 欢迎您光临码巴巴,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • wp,ripro主题优化文章页内–分类设置标签云展示方式

    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介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    一个高级程序员模板开发平台
    问问管理员?

    发表评论

    • 13会员总数(位)
    • 37资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 573稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    升级SVIP尊享更多特权立即升级