为CSDN博客添加打赏功能

简介: 随着移动支付在国内的兴起,越来越多的付费内容越多如雨后春笋般的冒了出来。其中以《逻辑思维》、罗振宇、李笑来为主要代表作品和人物。 现在很多博客或者个人网站里面都有打赏功能,这算是对博主的劳动的一种回报方式。

随着移动支付在国内的兴起,越来越多的付费内容越多如雨后春笋般的冒了出来。其中以《逻辑思维》、罗振宇、李笑来为主要代表作品和人物。

现在很多博客或者个人网站里面都有打赏功能,这算是对博主的劳动的一种回报方式。

我这几天看了很多博客,确实也发现了很多博客支持这种功能,但是CSDN还未支持,因此在这里特意写一篇博客为自己的博客上添加打赏功能了。

各位看官,如果你觉得本人的博客对您有所帮助,您可以通过如下两种方式来进行打赏,打赏多少您随意。

1、微信打赏

打开微信扫一扫,扫码下面的【微信支付】二维码图片即可进行扫码打赏哦。

这里写图片描述

2、支付宝打赏

打开支付宝扫一扫,扫码下面的【支付宝】二维码图片即可进行扫码打赏哦。
这里写图片描述

在博客栏目中添加打赏功能

第一步,准备好微信支付和支付宝的收款二维码,如下所示:

图1、微信支付

微信支付

图2、支付宝

支付宝

第二步,管理博客,为博客增加打赏功能

1、点击 【管理博客】
这里写图片描述

2、选择 【博客栏目】
这里写图片描述

3、滚动页面到最尾部,点击【添加栏目】
这里写图片描述

点击后效果如下图所示:
这里写图片描述

如上图所示,该自定义栏目支持html,因此我们可以自由发挥。

这里我将标题写作 博客打赏
内容如下代码所示:

<div id="custom_column_41051715" class="panel">
<ul class="panel_head"><span>感谢打赏 支付宝二维码</span></ul>
<ul class="panel_body">
<img src="http://img.blog.csdn.net/20170413224641959" alt="支付宝" title="支付宝二维码" height="100%" width="100%">
</ul>
</div>

<div id="custom_column_41051842" class="panel">
<ul class="panel_head"><span>感谢打赏 微信二维码</span></ul>
<ul class="panel_body">
<img src="http://img.blog.csdn.net/20170413224625912" alt="微信" title="微信二维码" height="100%" width="100%">
</ul>
</div>

这里写图片描述
当然,上面的图片地址请替换为你们自己的支付宝和微信的相应二维码。

写完内容之后,点击【添加栏目】即可保存。

添加完栏目之后,你可以适当的调整该栏目的位置,下面是我调整后的博客效果,如下所示:

这里写图片描述

感觉有点low,用美图秀秀将两个图片合成了一张,下面是横竖两版本的样子,如下图所示:

竖版
这里写图片描述

横板
这里写图片描述

将打赏栏目的内容替换为以下代码

<div id="custom_column_41051715" class="panel">
<ul class="panel_head"><span>支付宝&amp;微信支付二维码</span></ul>
<ul class="panel_body">
<img src="http://img.blog.csdn.net/20170413233551562" alt="支付宝&amp;微信支付" title="支付宝&amp;微信支付二维码" height="100%" width="100%">
</ul>
</div>

运行后的显示效果如下所示:
这里写图片描述

当然,你也可以通过访问我的博客 http://blog.csdn.net/ouyang_peng
更加具体的查看效果,谢谢!


这里写图片描述

作者:欧阳鹏 欢迎转载,与人分享是进步的源泉!
转载请保留原文地址:http://blog.csdn.net/ouyang_peng/article/details/70162888

如果本文对您有所帮助,欢迎您扫码下图所示的支付宝和微信支付二维码对本文进行打赏

这里写图片描述

相关文章
CSDN博客如何添加微信公众号二维码
CSDN博客如何添加微信公众号二维码
270 0
|
机器学习/深度学习 uml
CSDN发文Markdown语法助手
CSDN发文Markdown语法助手
109 0
CSDN发文Markdown语法助手
|
机器学习/深度学习 编解码 人工智能
CSDN粉丝解答:六月份第二期精选——简单bug处理、资料索取、编程系统设计等
CSDN粉丝解答:六月份第二期精选——简单bug处理、资料索取、编程系统设计等
CSDN粉丝解答:六月份第二期精选——简单bug处理、资料索取、编程系统设计等
|
Web App开发 JavaScript 前端开发
😺我开发了一个Chrome插件,可以在掘金官网里撸猫!还可以实时和铲屎官们聊天
掘金又弄这种整活儿的活动了~~我就喜欢整活儿! 话不多说,先看效果~
401 0
😺我开发了一个Chrome插件,可以在掘金官网里撸猫!还可以实时和铲屎官们聊天
|
JSON 数据安全/隐私保护 数据格式
csdn竟然还有这种神器!后悔没有早点知道!超好用的csdn插件,别再犹豫了,赶快入手吧!
csdn竟然还有这种神器!后悔没有早点知道!超好用的csdn插件,别再犹豫了,赶快入手吧!
269 0
csdn竟然还有这种神器!后悔没有早点知道!超好用的csdn插件,别再犹豫了,赶快入手吧!
|
存储 SQL 程序员
|
存储 设计模式 Java
|
JavaScript
【全网最全的博客美化系列教程】05.公告栏个性时间显示的实现
全网最全的博客美化系列教程相关文章目录 【全网最全的博客美化系列教程】01.添加Github项目链接 【全网最全的博客美化系列教程】02.添加QQ交谈链接 【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠 【全网最全的博客美化系列教程】04.
1575 0
|
Java 程序员 PHP
朋友帮写的软文,大家看下如何
现在的社会很浮躁,就连程序员这么个低调稳重的物种都开始浮躁起来了。每天论坛里讨论得最多的不是技术,而是在争辩哪种编程语言最好,甚至诋毁其他语言。 作为一名集才华与正义于一身的资深程序员,我觉得这样很不好,程序员宝宝们需要的是团结,是不断学习,是共同进步啊!因此,我有必要站在客观公正的角度,理性地和大家分享一下几种主流语言的优缺点,以及为什么说PHP是最好的语言(严肃脸)。
1150 0