弄了好久，大功告成！

先说一下个人建议，CSDN上面这种文章是没办法在博客园上实现的。会报Uncaught ReferenceError: tctip is not defined的错，真不知道为什么

https://www.cnblogs.com/pcheng/p/11644187.html

像这位同学，说的这种方法已经不能用了，会报错。

最后还是按照作者说的“老方法”做的https://www.cnblogs.com/wuql/p/6144791.html，ε=(´ο｀*)))唉，没办法，可能老版本更靠谱吧，说不定新版本webpack被博客园墙了，所以很多人调不通，就都不用这个打赏插件了。

如果刷新没有显示，可以打开浏览器的控制台，看下是否有报错信息。

1.添加打赏按钮

进入自己的博客园->设置，将以下JavaScript代码添加到“页首Html代码”

<script>
window.tctipConfig = {
staticPrefix: "https://static.tctip.com",
buttonImageId: 5,
buttonTip: "dashang",
list:{
alipay: { qrimg: "https://files.cnblogs.com/files/guoxinyu/alipay.bmp",desc:"大爷给口饭吃"},
weixin: { qrimg: "https://files.cnblogs.com/files/guoxinyu/weipay.bmp",desc:"大爷赏个吃的"},
litecoin:{qrimg:"https://files.cnblogs.com/files/guoxinyu/weipay.bmp",desc:"大爷行行好"},
bitcoin:{qrimg:"https://files.cnblogs.com/files/guoxinyu/weipay.bmp",desc:"大哥大嫂过年好"},
tenpay:{qrimg:"https://files.cnblogs.com/files/guoxinyu/weipay.bmp"},
}
};
</script>
<script src="https://files.cnblogs.com/files/guoxinyu/tctip.min.js" ></script>

tctip.min.js我放在了博客园的文件里面。这个文件和作者原来的文件不太一样，应该是老版的tctip打赏。

另外说明一下，现在的博客园是https的，所以需要使用https://static.tctip.com/tctip.min.js而不是使用http://static.tctip.com/tctip.min.js，才能够在打开个人博客时能自动出现打赏图片。如果这个js网址是使用http而不用https，默认打开博客是不会有打赏图片的，被拦截了，需要博客读者自己手工主动去允许JS，那样可能会减少很多收入来源哦。

另外，严重鄙视大部分使用作者插件的人。用了以后不写方法，全是照抄作者原文（然后自己怎么改的完全不写，真的鄙视）

手机端效果测试

可以把博文通过二维码分享到微信或者支付宝APP，而在APP里面打开链接，也可以正常看到打赏功能，直接按住二维码选中“识别图中二维码”，就可以对博主进行打赏支持。是不是很方便呢？（欢迎测试）

支付宝二维码的使用说明

您可以直接在配置文件中传入支付宝账号,插件会自动生成二维码,但是推荐下面一种 您也可以登录支付宝，打开https://qr.alipay.com/paipai/personal.htm，保存网页上的收款二维码，然后将图片添加到自己的博客园相册里面，然后将图片的地址作为qrimg参数传入,这样别人扫描此二维码将直接使用支付宝快捷支付

微信二维码的使用说明

直接传入微信账号，微信扫描的时候似乎不能付款，因此微信需要您传入qrimg二维码图片，见下面
打开 微信->收付款>我要收款>长按二维码图片>保存到手机，将图片裁剪后上传到您的服务器，然后将图片添加到自己的博客园相册里面，然后将图片的地址作为qrimg参数传入即可。
【而我用的是微信赞赏码】

开源插件地址：
https://github.com/greedying/tctip
参数说明

top

类型: String
默认值: 10%
含义: 插件顶端距离页面最上面的距离
备注: 格式如 100px或者10%

button

类型: Object，包含id和type两个子数组
id:

类型: Number
默认值: 1
含义: 代表图片颜色
备注: 取值范围为1-9

type:

类型: String
默认值: dashang
含义: 按钮上的汉字，有打赏和赞助两种
备注: 只能取dashang或者zanzhu

list

类型: Array
默认值: []
含义: 重点配置，右侧打赏显示，不能为空
备注: 一个数组，最多传入五个元素，每个元素又有如下几项陪配置
type:

类型: String
默认值: 无
含义: 打赏类型
备注: 系统自带四种默认type，alipay,wechat,bitcon,tenpay，如果不是这四种，可以随意写

qrImg:

类型: String
默认值: 无
含义: 二维码图片地址
备注: 尽量裁剪图片周边的空白。重要但是非必传

qrContent:

类型: String
默认值: 无
含义: 二维码内容
备注: 和qrImg二者必须传一个。如果传入本参数，插件自动生成二维码

icon:

类型: String
默认值: 无
含义: 图标，列入支付宝图标
备注: 当type为系统默认四种之一时，本参数可省略

name:

类型: String
默认值: 无
含义: 支付名称，例如支付宝、微信等
备注: 当type为系统默认四种之一时，本参数可省略

desc:

类型: String
默认值: 无
含义: 二维码下面的一句短语，类似大爷行行好之类的
备注: 当type为系统默认四种之一时，本参数可省略

stat

类型: Boolean
默认值: true
含义: 是否上报，用于作者统计使用者
备注: 本参数只是方便作者统计插件使用情况，可视情况关闭　　

（1）top：即该侧边栏插件距离右上方的百分比。

（2）button的id：定义按钮的颜色，目前可选的如下：

（3）button的type：定义按钮上的文字，目前可选的为，dashang=打赏、zanzhu=赞助。

（4）list：定义多个收款码对象，除了上面的支付宝微信，还可以添加财付通、比特币等几种。还可以自己加，明天我再来写

（5）list的type：定义收款码种类。目前可选的为，alipay=支付宝、wechat=微信、tenpay=财付通、bitcoin=比特币，等几种。

（6）list的qrImg：定义收款码图片的URL地址。即第二步中准备的内容。

这是没法在博客园跑通的代码
<script>
new tctip({
    top: '20%',
    button: {
      id: 4,
      type: 'dashang',
    },
    list: [
      {
        type: 'alipay',
        qrImg: 'https://images.cnblogs.com/cnblogs_com/guoxinyu/1630180/o_2001150514411579065240.png',
        desc:"这里是支付宝打赏码哟—— o(*￣▽￣*)o"
      }, {
        type: 'wechat',
        qrImg: 'https://files.cnblogs.com/files/guoxinyu/weipay.bmp',desc:"这是微信打赏码哟————♪(^∇^*)"
      }, {
        type: 'bitcoin',
        qrImg: 'https://files.cnblogs.com/files/guoxinyu/weipay.bmp',desc:"大哥大嫂过年好"
      }, {
        type: 'litecoin',name:"支小店",icon:"https://images.cnblogs.com/cnblogs_com/guoxinyu/1630180/o_200115050216%E5%9C%A3%E8%AF%9E%E8%B4%AD%E7%89%A9.bmp",
        qrImg: 'https://files.cnblogs.com/files/guoxinyu/%E6%94%AF%E4%BB%98%E5%AE%9D%E8%B4%AD%E7%89%A9%E8%BD%A6.bmp',desc:"支付宝小店————[支付宝扫码]"
      }
    ]
  }).init()
</script>
<script src="https://files.cnblogs.com/files/guoxinyu/tctip-1.0.4.min.js"></script>

View Code

【Blog怎么玩】怎么给博客添加支付宝/微信打赏按钮—tctip打赏插件开源

1.添加打赏按钮

手机端效果测试

支付宝二维码的使用说明

微信二维码的使用说明

参数说明