广告位联系
返回顶部
分享到

WordPress博客添加微信和支付宝打赏功能的教程

网站程序 来源:互联网搜集 作者:酷站 发布时间:2018-05-20 09:13:50 人浏览
摘要

今天小编从WP大学网站看到认为还不错的效果且没有用到插件,于是整理过来分享给你大家,我们现在也可以看到效果感觉还是不错的。可以加上微信、支付宝的收款二维码。 这个打赏功能采用的是无插件,直接CSS实现的,顺带把代码分享出来,如果有用户也有需要用

今天小编从WP大学网站看到认为还不错的效果且没有用到插件,于是整理过来分享给你大家,我们现在也可以看到效果感觉还是不错的。可以加上微信、支付宝的收款二维码。


 
      这个打赏功能采用的是无插件,直接CSS实现的,顺带把代码分享出来,如果有用户也有需要用到可以直接使用。这里要申明的是,我也是从WPDAXUE抠出来的,版权归属倡萌同学,仅仅是将好的东西分享给大家提供便捷。我们可以将安装到任何网站中。

       一、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-<a href="/tags.php/select/" target="_blank">select</a>: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}

        将CSS放到我们的CSS文件中,注意是否与我们已有的CSS命令有冲突,如果有则需要修改。

       二、调用部分


<div class="reward"><div class="reward-button">赏 <span class="reward-code"> <span class="alipay-code"> <img class="alipay-img" src="支付宝收款二维码地址200*200PX"><b>支付宝扫码打赏</b> </span> <span class="wechat-code"> <img class="wechat-img" src="微信收款二维码地址200*200PX"><b>微信打赏</b> </span> </span></div><p class="reward-notice">如果文章对您有帮助,欢迎移至上方按钮打赏老蒋</p></div>
      根据我们的需要,将需要调用打赏功能的页面、模板添加上面调用代码。

友情提醒:需要提到的是,我们预先要做2个图片,从支付宝、微信中先下载到收款的二维码,然后替换成自己的图片,千万别放我的哟!


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计