零基础学做网站培训介绍

当前位置:

如何在网站文章底部添加打赏功能

现在很多自媒体都有一种打赏功能,就是你觉得某篇文章写的不错或者对自己有帮助,可以在线打赏文章作者。在我们自己做网站时也可以给网站文章添加打赏功能。如下图:

打赏功能按钮:

网站打赏功能按钮

打赏二唯码

网站打赏二唯码

在之前的建站教程中,我们介绍了通过添加百度打赏来制作这样的打赏功能,但现在貌似百度打赏功能已经下架了,所以今天学做网站论坛介绍一下如何使用代码的方式给自己的网站添加这种打赏功能。

方法/步骤

  1. 第一步:添加打赏功能按钮;
    
    
    <div class="shang-p">
    <span id="shang" class="fadeInDown animated">
    <span class="shang-main">
    <h4><i class="be be-favorite" aria-hidden="true"></i> 您可以选择一种方式打赏小编</h4>
    <span class="shang-img fleft">
    <img src="https://www.xuewangzhan.net/wp-content/themes/xwz/images/shang_zfb.png" alt="alipay"/>
    <h5 class="shang-qr">支付宝扫一扫打赏</h4>
    </span>

    <span class="shang-img fright">
    <img src="https://www.xuewangzhan.net/wp-content/themes/xwz/images/shang_wx.png" alt="weixin"/>
    <h5 class="shang-qr">微信扫一扫打赏</h4>
    </span>

    </span>
    </span>
    <span class="shang-s"><a class="da" title="打赏作者"></a></span>
    </div>
  2. 在打赏按钮上面添加收款二唯码,一般要放上自己微信和支付宝的收款二唯码;
  3. 添加CSS样式,默认情况下收款二唯码是隐藏的,所以使用display:none,然后还要使用CSS定位来控制二唯码显示的位置。
    
    
    .shang-p{position:relative;}
    .shang-p a {background: #fec22c;width: 38px;height: 38px;line-height:38px;padding: 10px;display: block;border: 1px solid #d4a368;border-radius: 50%;margin:10px auto;text-align:center;font-size:28px;color:#fff;position:relative;z-index:999;}
    .shang-p a:hover { color: #eee;background: #fcc278;border: 1px solid #d4a368; background: linear-gradient(#fcc278,#d4a368);text-decoration:none;}
    #shang {position: absolute;left: 50%;bottom:30px;margin-left:-170px;width: 340px;display:none;padding: 15px 0 0 6px;background: #fff;border-radius: 5px;border: 1px solid #ddd;box-shadow: 1px 0 5px rgba(0,0,0,0.2);}
    .social-main span {float: left;}
    .fadeInDown {animation-name: fadeInDown;}
    .animated {-webkit-animation-duration: 0.5s;animation-duration: 0.5s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
    .shang-main h4 {font-size: 15px;text-align: center;font-weight:600;}
    .shang-img{display:block;width:49%;}
    .shang-main i {color: #ff0000;}
    .shang-img img {width: 140px;height: auto;margin: 10px;}
    .shang-main .shang-qr {margin-bottom: 20px;font-size:0.9em;text-align:center;font-weight:600;}
  4. 最后在放上JS代码,作用是当鼠标移动到打赏按钮时,就会显示出收款二唯码,如果离开时,就会再次隐藏。
    
    
    $(".shang-p .da").hover(
    function(){
    $("#shang").slideToggle();
    });

通过以上的代码,我们就可以在自己的网站文章底部添加打赏功能了。

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 作者: 菜鸟Email: 592604660@qq.com详细内容:我重新上传了一个模板!怎么修改Discuz x3.2 logo和底部版权信息我重新上传了一个模板!怎么
  • 在整个wordpress模板制作教程中,底部模板(footer.php)是最简单的。底部模板(footer.php)的内容主要是放一些次导航、友情链接,还有一些网站的版权信
  • 电影网站导航与大多网站一样,可以放电影,电视剧,综艺,动漫等栏目,可以通过后台设置栏目的ID即可。新增建成的时候,主导航空白的,那哪里
  • 网页如何添加背景音乐 视频教程附件下载 (1109609 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • QQ客服在很多网站都很普通,它可以很方便的让浏览我们网站的用户通过QQ进行交流,不需要去查找QQ再加好友,只需要点一下QQ客服上的图标就可以直接发信
  • 网页如何添加视频动画 视频教程 (1100876 次浏览)
    在网站制作过程中,特别是学习视频网站制作教程时,是需要给网站中添加很多的视频的,对于网站如何添加视频有二种方法:一种是添加自己网站的视频,另
  • 我们知道,一个成功的网站需要站长长期不懈的维护,在网站制作好之后,如果能够用自己做的网站为自己赚一些额外的收入,那就锦上添花了。我们在做
  • 现在很多自媒体都有一种打赏功能,就是你觉得某篇文章写的不错或者对自己有帮助,可以在线打赏文章作者。在我们自己做网站时也可以给网站文章添加打赏
  • wordpress评论功能可以让用户在我们自己的网站上进行对文章的评论,发表自己的观点,很好的增强了网站与用户之间的交互性。还有的网站还添加了邮件功
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 多站点 (Multisite) 功能是 WordPress 3.0  版本的一个重要更新,整合了 WordPress MU 内核。后台自动升级内核后,无法直接使用该功能。需要通过手工