夕阳博客 - 专注优质网络资源分享的技术博客
夕阳博客 - 专注优质网络资源分享的技术博客
夕阳博客 - 专注优质网络资源分享的技术博客

给子比主题博客加个好看底部导航【更新】

3152.8W+14

前言

前面已经写过一遍教程了(在美化教程里->编号22)！发了一篇教程后，我又更新了下！本来我不打算更新教程的，因为在捣鼓那个打赏功能，想着写个打赏完之后支付成功的小伙伴可以在表里显示出来，可惜站长之前没有捣鼓过支付，只借鉴了烟雨那个要饭网站，写的不好也有bug，所以想着不分享出来了，可是有小伙伴想要，我就分享一下初始的打赏吧！

更新功能：

  • 加入了本篇文字的点赞、分享数量
  • 加入了一个简单的打赏功能
  • 修改了几个iconfont图标

效果图

给子比主题博客加个好看底部导航-夕阳博客

在functions.php加上下面这段代码

图片是站长放在自己腾讯云里的，这里我就删除了，请自行添加自己的图片(//弹窗提醒)

  此处内容已隐藏，请评论后刷新页面查看.

引入阿里巴巴矢量库的图标，也可以自行修改

因为前面搞错东西了，后面查了下才发现问题，把下面的js跟css引入到你的网站即可

<!--夕阳博客自用阿里图标库--> 
<script src="https://at.alicdn.com/t/font_2827587_k24if0ucns.js"></script>
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2827587_k24if0ucns.css">
<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>

在footer.php里加上下面这段代码，自行修改

  此处内容已隐藏，请评论后刷新页面查看.

CSS代码

这段css其实是文字的抖动跟适应手机屏幕隐藏底部导航栏(可用可不用，不过@media这段建议保留)

/* start */
 .my-face {
    animation: my-face 5s infinite ease-in-out;
    color: #00f1ff;
    display: inline-block;
    margin: 0 5px;
}
@-webkit-keyframes my-face {
    2%, 24%, 80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
        transform: translate(0, -1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translate(0, -.5px) rotate(1.5deg);
        transform: translate(0, -.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
        transform: translate(0, -.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translate(0, .5px) rotate(-1.5deg);
        transform: translate(0, .5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translate(0, .5px) rotate(.5deg);
        transform: translate(0, .5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translate(0, .5px) rotate(1.5deg);
        transform: translate(0, .5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translate(0, -.5px) rotate(2.5deg);
        transform: translate(0, -.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
        transform: translate(0, 1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translate(0, 1.5px) rotate(.5deg);
        transform: translate(0, 1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translate(0, -.5px) rotate(.5deg);
        transform: translate(0, -.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translate(0, .5px) rotate(2.5deg);
        transform: translate(0, .5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
        transform: translate(0, 2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translate(0, .5px) rotate(-.5deg);
        transform: translate(0, .5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translate(0, 2.5px) rotate(.5deg);
        transform: translate(0, 2.5px) rotate(.5deg)
    }
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}
@keyframes my-face {
    2%, 24%, 80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
        transform: translate(0, -1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translate(0, -.5px) rotate(1.5deg);
        transform: translate(0, -.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
        transform: translate(0, -.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translate(0, .5px) rotate(-1.5deg);
        transform: translate(0, .5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translate(0, .5px) rotate(.5deg);
        transform: translate(0, .5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translate(0, .5px) rotate(1.5deg);
        transform: translate(0, .5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translate(0, -.5px) rotate(2.5deg);
        transform: translate(0, -.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
        transform: translate(0, 1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translate(0, 1.5px) rotate(.5deg);
        transform: translate(0, 1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translate(0, -.5px) rotate(.5deg);
        transform: translate(0, -.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translate(0, .5px) rotate(2.5deg);
        transform: translate(0, .5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
        transform: translate(0, 2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translate(0, .5px) rotate(-.5deg);
        transform: translate(0, .5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translate(0, 2.5px) rotate(.5deg);
        transform: translate(0, 2.5px) rotate(.5deg)
    }
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}
/* end */
/*底部导航*/
@media (max-width: 800px){.footwaveline{display: none;}}

JS代码

这段js代码是用来触发滚动条显示百分比的

  <!--滚动进度条百分比-->
$(function(){var $this=$("#footgundong");var scrollTimer;$this.hover(function(){clearInterval(scrollTimer)},function(){scrollTimer=setInterval(function(){scrollNews($this)},2000)}).trigger("mouseleave");function scrollNews(obj){var $self=obj.find("ul");var lineHeight=$self.find("li:first").height();$self.animate({"marginTop":-lineHeight+"px"},500,function(){$self.css({marginTop:0}).find("li:first").appendTo($self)})}})
window.onscroll = function() {
	let scrollNow = window.pageYOffset;
	let pageClientHeight = document.documentElement.clientHeight;
	let scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight) - pageClientHeight;
	let fullWindowHeightInPercentage = Math.round((scrollNow / scrollHeight) * 100);
	let percentage = document.getElementById('percentage');
	percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg> ' + fullWindowHeightInPercentage + '%';
	if (fullWindowHeightInPercentage == 0) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-dingwei"></use></svg> 到顶啦';
	if (fullWindowHeightInPercentage == 100) percentage.innerHTML = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-jiasu1"></use></svg> 到底啦';
}
</script>

更新

元旦子比主题更新到了6.1版本，分享按钮代码发生了变动，这里我们也做一下修改：

<a class="share-btn poster" poster-share="<?php the_ID();?>" title="海报分享" href="javascript:;">
    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-fenxiang"></use></svg>分享
</a>

把这段A标签代码将原先的代码覆盖就完成了

结语

教程到这就结束了，如果发现有问题的话可以在下面评论留言一下。

👋 感谢您的观看 Xy PRO！

© 版权声明
版权声明
本站网络名称： 夕阳博客
本站永久网址： https://21lhz.cn
网站侵权说明： 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ1123133510删除处理。
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
技术教程网络技巧
# wp美化# 美化教程# 子比主题# 底部导航
喜欢本站内容，请点【分享】【赞】和【收藏】
点赞14赞赏 分享
XyPro的头像-夕阳博客代理会员
Zibll主题抽奖插件[v2.7.0]-夕阳博客
Zibll主题抽奖插件[v2.7.0]
Zibll主题抽奖插件[v2.7.0]
2年前 4.1W+
WordPress子比主题评论等级添加【更新】-夕阳博客
WordPress子比主题评论等级添加【更新】
WordPress子比主题评论等级添加【更新】
3年前 1.8W+
评论区添加个夸夸功能-夕阳博客
评论区添加个夸夸功能
评论区添加个夸夸功能
2年前 1.8W+
Zibll独立下载页面美化-夕阳博客
Zibll独立下载页面美化
Zibll独立下载页面美化
2年前 1.7W+
【4K动漫壁纸】超清4K动漫桌面壁纸-夕阳博客
【4K动漫壁纸】超清4K动漫桌面壁纸
【4K动漫壁纸】超清4K动漫桌面壁纸
3年前 1.6W+
添加一章每日早报的文章【API接口】-夕阳博客
添加一章每日早报的文章【API接口】
添加一章每日早报的文章【API接口】
3年前 1.5W+
相关推荐
Zibll主题抽奖插件[v2.7.0]-夕阳博客
Zibll主题抽奖插件[v2.7.0]
Zibll主题抽奖插件[v2.7.0]
2年前 4.1W+
给子比主题博客加个好看底部导航【更新】-夕阳博客
给子比主题博客加个好看底部导航【更新】
给子比主题博客加个好看底部导航【更新】
3年前 2.8W+
WordPress子比主题评论等级添加【更新】-夕阳博客
WordPress子比主题评论等级添加【更新】
WordPress子比主题评论等级添加【更新】
3年前 1.8W+
评论区添加个夸夸功能-夕阳博客
评论区添加个夸夸功能
评论区添加个夸夸功能
2年前 1.8W+
Zibll独立下载页面美化-夕阳博客
Zibll独立下载页面美化
Zibll独立下载页面美化
2年前 1.7W+
添加一章每日早报的文章【API接口】-夕阳博客
添加一章每日早报的文章【API接口】
添加一章每日早报的文章【API接口】
3年前 1.5W+
评论 共315条

请登录后发表评论

    只看作者
    • 头像飘狐0
      66666666666666666
      3年前上海市
    • 头像火喵0
      第三行的“返回顶部！';”那一行是可以不用加的表情[yangtuo]-夕阳博客
      3年前天津市
      • XyPro的头像-夕阳博客代理会员XyPro徽章-22年国民爱豆-夕阳博客评论：Lv.7等级-活跃：Lv.6-夕阳博客作者0
        火喵大大怎么来啦，都快把你网站扒个精光了表情[xieyanxiao]-夕阳博客表情[xieyanxiao]-夕阳博客
        3年前@火喵广东省
    • 头像牛不不不0
      66666666666666666666666666666666666666
      3年前天津市
    7. 1…293031
用户封面
XyPro的头像-夕阳博客代理会员
Zibll子比小黑屋-夕阳博客
Zibll子比小黑屋
Zibll子比小黑屋
1年前 9501
友情链接检测-夕阳博客
友情链接检测
友情链接检测
2年前 1.1W+
WordPress获取评论用户的IP属地-夕阳博客
WordPress获取评论用户的IP属地
WordPress获取评论用户的IP属地
2年前 6751
Zibll主题抽奖插件[v2.7.0]-夕阳博客
Zibll主题抽奖插件[v2.7.0]
Zibll主题抽奖插件[v2.7.0]
2年前 4.1W+
Zibll主题V6.5签到任务奖励-夕阳博客
Zibll主题V6.5签到任务奖励
Zibll主题V6.5签到任务奖励
2年前 1.2W+
Zibll独立下载页面美化-夕阳博客
Zibll独立下载页面美化
Zibll独立下载页面美化
2年前 1.7W+

博客信息

网站倒计时

2024年 – 新年倒计时
0 天 0 时 0 分 0 秒

  • 146篇 文章数目
  • 1829位 注册用户
  • 1189天 运行天数
  • 979句 评论数目
  • 7937.39万次 总访问量

子比主题
简约优雅的设计风格、模块化组件、商城支付系统全面的前端功能、深度SEO优化、专注阅读体验
￥599限时
￥699

Zibll主题抽奖插件-夕阳博客
4.1W+人已阅读
Zibll主题抽奖插件[v2.7.0]
TOP1
给子比主题博客加个好看底部导航-夕阳博客
给子比主题博客加个好看底部导航【更新】
3年前2.8W+人已阅读
TOP2
Wordpress子比主题评论等级添加-夕阳博客
WordPress子比主题评论等级添加【更新】
3年前1.8W+人已阅读
TOP3
评论区添加个夸夸功能-夕阳博客
评论区添加个夸夸功能
2年前1.8W+人已阅读
TOP4
Zibll独立下载页面美化-夕阳博客
Zibll独立下载页面美化
2年前1.7W+人已阅读
TOP5
【4K动漫壁纸】超清4K动漫桌面壁纸-夕阳博客
【4K动漫壁纸】超清4K动漫桌面壁纸
3年前1.6W+人已阅读
TOP6
热门标签
魔众SCRM音乐网站音乐平台音乐APP音乐集赞随机图片阿里巴巴矢量图阿里防红钢管采集资源网采集线报采集邮箱邮件通知邀请码运营平台跳转页面跨域超级外链