博客园添加打赏功能

效果图如下:

        

正文

要实现该功能,需要先在 博客园>管理>设置>申请js权限。

1、准备好自己的微信和支付宝付款二维码,图片修改bmp结尾的格式。如:zfb.bmp。(可以直接修改后缀)

2、进入自己的博客园,管理>文件>上传图片。(在博客园上传的文件可以使用 "https://files.cnblogs.com/files/‘自己的博客地址名’/‘文件名字’" 来进行访问)

3、复制下面的js代码。

 1 <script>
 2 window.tctipConfig = {
 3         //此处imagePrefix是打赏图片地址的前缀,你可以自己找一张图片上传到你的博客文件夹,记得将图片名修改为 tab_4.bmp,然后将前缀替换为你自己的博客路径
 4         imagePrefix: "https://files-cdn.cnblogs.com/files/woju/",
 5         //此处是该功能css文件所在位置前缀,你可以进入该链接将其下载下来上传到你自己的博客园文件夹,然后将其修改为你自己的,https://files-cdn.cnblogs.com/files/woju/myRewards.css。
 6         cssPrefix:     "https://files-cdn.cnblogs.com/files/woju",
 7         buttonImageId:  4, //这个是按钮图片切换,上方你可以上传多个图片命名为 tab_1.bmp、tab_2.bmp、tab_3.bmp......然后修改数字就可以切换图片
 8         buttonTip:  "dashang",
 9         list:{
10             alipay: {qrimg: "https://files-cdn.cnblogs.com/files/woju/zhifubao.bmp"},
11             weixin:{qrimg: "https://files-cdn.cnblogs.com/files/woju/weixinzf.bmp"},
12         }
13 };
14 </script>
15 <script src="https://files-cdn.cnblogs.com/files/woju/tctip.min.js"></script> //打赏的js文件

上方代码中的注释部分你可以选择按照提示修改,也可以使用我的。

4、修改js代码第10、11行图片链接。

1 alipay: {qrimg: "https://files.cnblogs.com/files/自己的博客地址名/支付宝图片的名子.bmp"},
2 weixin:{qrimg: "https://files.cnblogs.com/files/自己的博客地址名/微信图片的名字.bmp"},
注意:自己博客的地址名,可以进入管理--设置,下面的【Blog地址名】就是。

5、进入 管理>设置,下拉找到【页首Html代码】,把修改完的js代码粘贴到里面,保存就可以在你的博客查看是否添加成功了。

posted @ 2022-12-21 15:56  莴苣&  阅读(103)  评论(0编辑  收藏  举报