• 文章区打赏功能集成

1. 先引入CSS样式代码

<style type="text/css">
    .reward {
        padding: 5px 0
    }

    .reward .reward-notice {
        font-size: 14px;
        line-height: 14px;
        margin: 15px auto;
        text-align: center
    }

    .reward .reward-button {
        font-size: 28px;
        line-height: 58px;
        position: relative;
        display: block;
        width: 60px;
        height: 60px;
        margin: 0 auto;
        padding: 0;
        -webkit-user-select: none;
        text-align: center;
        vertical-align: middle;
        color: #fff;
        border: 1px solid #f1b60e;
        border-radius: 50%;
        background: #fccd60;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fccd60), color-stop(100%, #fbae12), color-stop(100%, #2989d8), color-stop(100%, #207cca));
        background: -webkit-linear-gradient(top, #fccd60 0, #fbae12 100%, #2989d8 100%, #207cca 100%);
        background: linear-gradient(to bottom, #fccd60 0, #fbae12 100%, #2989d8 100%, #207cca 100%)
    }

    .reward .reward-code {
        position: absolute;
        top: -220px;
        left: 50%;
        display: none;
        width: 350px;
        height: 200px;
        margin-left: -175px;
        padding: 15px;
        border: 1px solid #e6e6e6;
        background: #fff;
        box-shadow: 0 1px 1px 1px #efefef
    }

    .reward .reward-button:hover .reward-code {
        display: block
    }

    .reward .reward-code span {
        display: inline-block;
        width: 150px;
        height: 150px
    }

    .reward .reward-code span.alipay-code {
        float: left
    }

    .reward .reward-code span.alipay-code a {
        padding: 0
    }

    .reward .reward-code span.wechat-code {
        float: right
    }

    .reward .reward-code img {
        display: inline-block;
        float: left;
        width: 150px;
        height: 150px;
        margin: 0 auto;
        border: 0
    }

    .reward .reward-code b {
        font-size: 14px;
        line-height: 26px;
        display: block;
        margin: 0;
        text-align: center;
        color: #666
    }

    .reward .reward-code b.notice {
        line-height: 2rem;
        margin-top: -1rem;
        color: #999
    }

    .reward .reward-code:after, .reward .reward-code:before {
        position: absolute;
        content: '';
        border: 10px solid transparent
    }

    .reward .reward-code:after {
        bottom: -19px;
        left: 50%;
        margin-left: -10px;
        border-top-color: #fff
    }

    .reward .reward-code:before {
        bottom: -20px;
        left: 50%;
        margin-left: -10px;
        border-top-color: #e6e6e6
    }
</style>

       2. 引用html代码

<!--自定义代码 打赏功能 start-->
<div class="reward">
     <div class="reward-button">赏 <span class="reward-code">
          <span class="alipay-code"><img class="alipay-img" src="/attachment/20191021/cc5e9994696946be8d9b8c0b58253629.png"><b>支付宝扫码打赏</b> </span>
          <span class="wechat-code"> <img class="wechat-img" src="/attachment/20191021/7328a3c4f62d4d18b17c8ecc82630d1e.png"><b>微信打赏</b> </span> </span>
      </div>
      <p class="reward-notice">如果文章对您有帮助，欢迎移至上方按钮打赏，非常感谢你的支持！</p>
</div>
<!--自定义代码 打赏功能 end-->

      3.效果图

       4.参考链接 ： https://www.wn789.com/13323.html

• 主页打赏功能

       1.引入js

<!--直接引入以下代码-->
<script>
window.tctipConfig = {
 staticPrefix: "http://static.tctip.com",
 cssPrefix: "http://static.tctip.com",
 buttonImageId: 2,
 buttonTip: "dashang",
 list:{
   alipay: {qrimg: "http://mfshi.com/attachment/20191021/cc5e9994696946be8d9b8c0b58253629.png"},
   weixin:{qrimg: "http://mfshi.com/attachment/20191021/7328a3c4f62d4d18b17c8ecc82630d1e.png"},
 }
};
</script>
<script src="http://static.tctip.com/js/tctip.min.js"></script>

      2.效果图