博客园添加打赏功能
效果图如下:
正文
要实现该功能,需要先在 博客园>管理>设置>申请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代码粘贴到里面,保存就可以在你的博客查看是否添加成功了。