[Typecho]为你的博客添加打赏功能

oncedreame
2021-04-08 / 0 评论 / 56 阅读 / 正在检测是否收录...

成果展示

打赏

教程如下

其实这个功能很简单,其实就是CSS的 :hover 来实现的

我使用的是Joe主题,所以我直接添加在点赞旁边,让它看看起来跟整个主题更协调

首先找到Joe主题目录中的点赞文件 public/handle.php 再在点赞按钮后添加以下代码

<style>
    .ewm-left{float: left; text-align: center; padding-left: 10px}
    .ewm-right{float: right; text-align: center; padding-right: 10px}
    /*弹出*/
    .footer_flex:hover span { display: block; }
    .footer_flex span { display: none; color: #fff; font-size: 15px; line-height: 45px; }
    .footer_flex .shang { padding-top: 10px; font-size: 16px; color: #fff;}
    .footer_flex { width: 42px; height: 42px; background-color: #f56c6c; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin: 0 0 21px 50px; float: left; text-align: center; cursor: pointer; position: relative; z-index: 10; }
    .footer_flex:hover { background-color: #409eff; }
    /*top*/
    .footer_flex:hover .flex-footer { display: block; }
    .footer_flex .flex-footer { border-radius: 8px; width: 260px; height: 150px; position: absolute; left: -105px; top: -160px; text-align: center; padding-top: 10px; background: #fff; display: none; }
    </style>
    <div class="footer_flex">
          <p class='shang'>赏</p>
          <p style="margin-top:16px; color:#909399; font-size:12px">打赏</p>
          <div class="flex-footer">
              <div class="ewm-left">
              <img src="https://oncedream.cn/file/img/wx.jpg" width='108' height='108'>
              <p>微信打赏</p>
              </div>
              <div class="ewm-right">
              <img src="https://oncedream.cn/file/img/zfb.jpg" width='108' height='108'>
              <p>支付宝打赏</p>
              </div>
          </div>
          <span>赏</span>
    </div>

保存后,刷新网站,打赏按钮就出现了,试着把鼠标移上去看看效果吧!

5

评论 (0)

取消