wmSafe致力于互联网资源
道可道,非恒道,名可名,非恒名

【typecho】给你的博客加一个彩色3D标签栏?需要的小伙伴自拿,无需安装插件

本文最后更新于2022-6-28,已经有667 天没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

【typecho】给你的博客加一个彩色3D标签栏?需要的小伙伴自拿,无需安装插件

前言

需要给自己typecho博客添加3D标签的不需要额外装插件,自己手动加加就好了,适配任意主题

直接上代码

<?php
function random_color(){
    mt_srand((double)microtime()*1000000);
    $c = '';
    while(strlen($c)<6){
        $c .= sprintf("%02X", mt_rand(0, 255));
    }
    return '#'.$c;
}
?>
<style type="text/css">
        a {text-decoration: none;}
        div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
    (0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
        div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
        div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
        div.usercm ul li a{color:#666;padding:0 15px;display:block}
        div.usercm ul li a:hover{color:#fff;background:rgba(30,144,255,0.88)}
        div.usercm ul li a i{margin-right:10px}
        a.disabled{color:#c8c8c8!important;cursor:not-allowed}
        a.disabled:hover{background-color:rgba(255,11,11,0)!important}
        div.usercm{background:#fff !important;}
    </style>
    <div class="widget widget_ui_tags"><h3>3D标签云</h3>
        <div id="tag_cloud_widget">
        <script type="text/javascript" src="https://cdn.wm404.com/public_js/S3dtag.js"></script>?_upt=a962dda21713980368;
            <div class="items">
<?php $this->widget('Widget_Metas_Tag_Cloud', 'ignoreZeroCount=1&limit=24')->to($tags); ?>
<?php while($tags->next()): ?>
        <a class="s3dtag" href="<?php $tags->permalink(); ?>" title="1 篇文章" style="left: 64.7521px; top: 9.59126px; z-index: 101; opacity: 0.105937; color: rgb(255, 255, 255); background: <?php echo random_color();?>; padding: 5px; display: none;"><?php $tags->name(); ?>(<?php $tags->count(); ?>)</a>
<?php endwhile; ?>
            </div>
        </div>
    </div>

这个代码参考typecho默认主题放到侧边栏里就可以显示了,自动适配你的标签的,喜欢的可以试试
typecho默认主题侧边栏路径:
/usr/themes/default/sidebar.php

将代码复制到第4行下面即可
参考图片(别个主题可能不一样)总体换汤不换药
【typecho】给你的博客加一个彩色3D标签栏?需要的小伙伴自拿,无需安装插件

最后

如果还有别的需要的样式欢迎联系站长,另外如果有不会配置的小伙伴也欢迎咨询站长QQ,共同成长,共同进步!站长QQ:1845440070

本原创文章未经允许不得转载 | 若要转载请注明出处,否则将承担相应的法律责任!
本文链接: https://blog.wm404.com/2022/05/13/cc315efc.html
赞赏排名 赞赏支持

评论

  • captcha
暂无评论,要不来一发?

您的关注就是我们最大的支持

联系我们 关于我们