博客园增加打赏功能
前提条件:设置----博客设置-----博客侧边栏公告(支持HTML代码)后面的如果是“申请开通”,必须先申请开通;如果是“支持js代码”,那就代表你已经开通过了,有写js代码的权限了
准备材料:微信收款二维码图片,支付宝收款二维码图片等(图片建议尺寸244*227)
步骤:
1、将微信和支付宝的图片放在一个外网可以访问的地方(下面需要使用图片的链接,推荐放到博客园的文件中。可以在文件,上传文件中操作,博客园上传的文件由大小限制,图片不要太大了)
2、模板代码
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="keywords" content="打赏" /> 6 <meta name="description" content="打赏" /> 7 <title>打赏</title> 8 </head> 9 <body> 10 <script> 11 window.tctipConfig = { 12 imagePrefix: "", 13 cssPrefix: "", 14 staticPrefix: "http://static.tctip.com", 15 buttonImageId: Math.ceil(Math.random()*8) + 1, //这里可以用一个固定的数字代替随机数 16 buttonTip: "dashang", //或者 zanzhu 17 list:{ 18 bitcoin: { account: "1PhQySHF1ZuoRwoZ8G4CDLEtE6fAnD3GJP"}, //如果没有比特币,此行代码可以删除 19 20 alipay: { qrimg: "http://tctip.com/img/alipayqr.png"}, //qrimg需要修改为自己的图片链接 21 22 weixin:{qrimg: "http://littlebtc.com/images/yeshen.png"}, //qrimg需要修改为自己的图片链接 23 24 tenpay: { account: "342285717", className:"myR-on"}, //如果不想添加财付通,此行代码可删除;如果要添加需要修改account为自己的账号 25 26 another:{icon: "img/litecoin.png", name: "莱特币", className: "", account: "LVCSBrv3ikzZWDtm9v8QPvDvLwn7dcsCEa", desc: "自定义莱特币"} //如果没有莱特币,此行代码可以删除,如果要添加需要修改account为自己的账号 27 } 28 }; 29 </script> 30 31 <script src="http://static.tctip.com/js/tctip.min.js"></script> 32 </body> 33 </html>
3、需要修改的地方主要是自己的微信和支付宝的二维码链接,list里面最多5个支付方式,多余的支付方式将被忽略
4、打开博客设置,将上面修改过的代码贴进“博客侧边栏公告”,“页首Html代码”,“页脚Html代码”三处之中的任意一处
5、刷新页面,到你的博客首页看看效果吧
楼主才疏学浅,不喜勿喷