子比主题底部统计背景渐变色教程

热帖

子比主题底部统计背景渐变色教程,主题更新后也不会影响代码的部署。

先看效果图:

图片[1]-子比主题底部统计背景渐变色教程

1、进入子比主题目录,这个目录下创建func.PHP文件,然后把下面的代码添加进去。

 

把31行的(“2022-5-28”)修改成你网站的创建时间就可以。
2.进入后台—>ZiBll主题设置—>全局功能—>自定义代码—>自定义CSS样式(把下面的代码添加进去).

/*底部统计开始*/
/*背景图*/#caired{
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            font-family: "montserrat";
            background-image: -webkit-linear-gradient(45deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
            background-size: 400%;
            animation: bganimation 15s infinite;
        }
 
        @keyframes bganimation {
            0%{
                background-position: 0% 50%;
            }
            50%{
                background-position: 100% 50%;
            }
            100%{
                background-position: 0% 50%;
            }
        }
#caired{border-radius: 10px;}
#caired .cai ul{display: flex;}
#caired .cai ul li{width: 20%; color: #fff; text-align: center;}
#caired .cai ul li span{font-size: 24px; font-family: Arial;}@media screen and (max-width: 768px){#caired .cai ul li span{font-size: 20px; font-family: Arial;}}
 #caired .cai{font-weight:700;padding:20px 0 20px 0;}
 /*底部统计结束*/

3.进入后台—>ZiBll主题设置—>全局功能—>自定义代码—>自定义javascript代码(把下面的代码添加进去).

//底部统计开始
document.getElementById("caired").parentNode.parentNode.style.padding=0
//底部统计结束

4.进入后台—>外观—>小工具—>首页底部全宽—>添加文本小工具

图片[2]-子比主题底部统计背景渐变色教程

5.在文本编辑器下填入下面代码:

<?php echo dbtj()?>

6.进入网站首页,刷新即可。

如果你喜欢我们的文章,欢迎您分享或收藏路人粉的文章! 我们网站的目标是帮助每一个有求知欲的人,无论他们的水平和经验如何。我们相信,只要有热情和毅力,无论从什么时候开始学习都不晚。
© 版权声明
THE END
喜欢就支持一下吧
点赞8赞赏 分享
评论 共18条

请登录后发表评论