WordPress网站美化:网站顶部添加彩色阅读进度条

Every body,这个代码是可以在网站顶部增加一个进度条的效果,挺好看的哦,感兴趣的可以继续往下看哦~

效果

4eecb6dcfa174321.png-WordPress网站美化:网站顶部添加彩色阅读进度条--小T爱分享网-WP美化

教程开始

代码都已经在下面,如果是子比主题的话,CSS代码和Javascript代码可以分别放到子比的主题设置-自定义代码里的自定义CSS样式自定义Javascript代码里,最后的代码按照说明放就好~

CSS代码

/*进度条加载显示*/
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}

Javascript代码

在主题目录header.php中,把以下代码,放在body标签下(最后一行)

<div id="percentageCounter"></div>

大功告成



微信扫描下方的二维码阅读本文

miniappcode.jpg-WordPress网站美化:网站顶部添加彩色阅读进度条-4-小T爱分享网-WP美化

小T爱分享网温馨提示:本文最后更新于2022-07-20 17:05:15,某些文章具有时效性,若内容有错误或已失效,欢迎在下方评论区留言向我们反馈。
👋 本文已结束,感谢您访问小T爱分享网。喜欢请分享,让更多朋友看到,欢迎浏览本站其他内容~

公众号微信搜一搜-小T爱分享网(小T博客)-WWW.TYHGUAN.COM
© 版权声明
THE END
喜欢本文就赞赏一下吧~
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容