現在比較流行打賞功能，很多應用或者博客都有自己的打賞功能，但是博客園目前還沒有該功能，那么如何給自己的博客添加打賞功能呢？當然是越簡便越好了，然后就發現了一個第三方打賞插件，介紹給大家，使用上非常便捷。插件叫tctip，大家可以在GitHub（https://github.com/greedying/tctip）上獲取。插件的原理其實也很簡單，通過JS生成一個右側的側邊欄，然后把自己的收款碼放進去就可以了。效果如下：
該插件有兩個大版本，新版本使用上更加便捷，下面以博客園為例，說一下新版本的使用方法，當然這也適用於你自建的博客。
一、申請JS權限
博客園使用JS需要申請權限，如果之前申請過就不需要了，如果是自建博客的也可以略過這一步。
1、在“我的博客”→管理→設置→“博客側邊欄公告”的位置，顯示“支持JS代碼”即可。
二、准備收款碼圖片
1、用自己的支付寶、微信生成收款碼（注意！是收款碼！！！不是付款碼！！！），然后裁剪出其中的二維碼即可。
2、將收款碼圖片上傳至網絡，拿到URL地址，如果是博客園，可以通過“我的博客”→管理→文件，上傳收款碼，點擊收款碼就可以拿到圖片地址。
PS：博客園上傳文件只支持bmp，所以需要將圖片后綴修改為bmp格式。
三、添加插件代碼
1、將下面代碼根據自己的需求做調整后，添加到“我的博客”→管理→設置→頁首Html代碼，保存完刷新頁面即可。
1 <script src="//static.tctip.com/tctip-1.0.3.min.js"></script> 2 <script> 3 new tctip({ 4 top: '20%', 5 button: { 6 id: 5, 7 type: 'dashang', 8 }, 9 list: [ 10 { 11 type: 'alipay', 12 qrImg: 'https://files.cnblogs.com/files/pcheng/alipay.bmp' 13 }, { 14 type: 'wechat', 15 qrImg: 'https://files.cnblogs.com/files/pcheng/wechat.bmp' 16 } 17 ] 18 }).init(); 19 </script>
參數說明：
（1）top：即該側邊欄插件距離右上方的百分比。
（2）button的id：定義按鈕的顏色，目前可選的如下：
（3）button的type：定義按鈕上的文字，目前可選的為，dashang=打賞、zanzhu=贊助。
（4）list：定義多個收款碼對象，除了上面的支付寶微信，還可以添加財付通、比特幣等幾種。
（5）list的type：定義收款碼種類。目前可選的為，alipay=支付寶、wechat=微信、tenpay=財付通、bitcoin=比特幣，等幾種。
（6）list的qrImg：定義收款碼圖片的URL地址。即第二步中准備的內容。
四、效果如下
如果刷新沒有顯示，可以打開瀏覽器的控制台，看下是否有報錯信息（踩過的坑都放在最后一段）。
五、更多自定義調整
其實功能實現這里已經講完啦。如果是自建博客，或者喜歡自己鼓搗的童鞋，可以去GitHub下載源碼，然后根據自己的喜好進行調整。主要是調整tctip-1.0.3.min.js文件里的內容。調整完后，通過步驟二上傳該文件，然后將步驟三第一行中的引用，調整為你上傳的文件即可。
注意！前方有坑：
1、博客園目前引用資源需要支持https，插件新版本的官方資源是OK的，老版本插件用官方資源的，可能會有問題，需要自己上傳JS來引用。
2、目前GitHub的1.0.4版本樣式有點問題，側邊欄跑到左邊且變形，所以本文使用了1.0.3的版本。
總結：
看，是不是非常便捷，總的來說只需要嵌入一段JS代碼到自己的博客即可。童鞋們覺得有用，就留言or關注or打賞一下吧，多少無所謂，每一分都是鼓勵和支持！謝謝！