也許大家看博客園博客的時候，遇到過一些博客右側，展示了打賞二維碼~
如下圖所示
那么，這是怎么實現的呢~~~
不錯，你沒猜錯，他們使用的是本人寫的一個js插件--tctip。
大家搜一下，還能搜到網上有些tctip的教程。比如下面兩個鏈接
http://www.cnblogs.com/softidea/p/5862961.html
http://www.cnblogs.com/wuql/p/6144791.html
不過以上兩個鏈接，介紹的都是老版的tctip使用，使用方法較為老套繁瑣。
這里，我要介紹的是tctip v1.0.0的使用方法，全世界第一篇，因為昨天晚上本人剛發布這個新版本(o)/~
相比於老版嗎，新版做了以下事情
- 簡化了參數配置，大家不用按照老版的教程那樣，配置圖片鏈接、css路徑啥的了。當然，收款二維碼還是需要滴
- 使用
webpack+ES6等較新的方式完全重寫代碼，讓代碼更優美。可作為webpack+ES6入門示范使用
注意，新版本簡化了使用方式，不兼容老版本，如需要升級到新版本，請修改您的配置參數
第一步，申請博客園js權限。
這一步大家可以參考前面別人的教程，或者點擊這里。注意，只看申請js部分，后面tctip部分不要看，老版已經不維護了
第二步，獲取微信和支付寶二維碼圖片，並上傳到合適的地方，保存地址。
這里其實是支持各種各樣的打賞方式的，包括比特幣，甚至什么沒聽過的方式。但是根據統計，大多數人都是放一個支付寶，放一個二維碼，這也符合大家的印象。
所以這里我就直接說支付寶和微信了。
上傳圖片，大家自行解決，包括博客園也是可以上傳的，不再贅述
第三步， 復制並修改下面的代碼
<script src="http://static.tctip.com/tctip-1.0.0.min.js"></script>
<script>
new tctip({
top: '20%',
button: {
id: 9,
type: 'dashang',
},
list: [
{
type: 'alipay',
qrImg: '你的支付寶收款二維碼圖片地址'
}, {
type: 'wechat',
qrImg: '你的微信收款二維碼圖片地址'
}
]
}).init()
</script>
上面的代碼，相信讀這篇文章的人都懂，就是引入js，然后配置。
當然，大家也可以到我的github下載tctip-1.0.0.min.js，並上傳到自己的服務器上使用。
第四步，粘貼代碼
找到“我的博客”->“管理”->“設置”，將頁面往下拉，找到“頁首Html代碼”這個位置，將修改好的代碼復制進去，保存
第五步，感謝作者
是的，到這里你應該已經可以看到自己博客上的二維碼了。
我個人之后會申請博客園的js權限，申請后自己也用一下這個插件，合合