WordPress博客添加微信-支付寶打賞功能 - 任意網站通用無插件

老蔣在網友博客中轉悠的時候經?？吹絻热蓓撁嫦路接写蛸p功能，之前一直想加到上面去，但是總覺著如果加上去有點向網友索要點什么似得。前幾天，網友在群里討論這個問題，提到還是有必要加上一個，萬一分享的技術、文章、方法可以幫助到網友且有的網友也會通過發個獎賞之類的。

今天工作空閑時間，從WP大學（wpdaxue.com）網站看到認為還不錯的效果且沒有用到插件，于是整理過來添加到老蔣部落中，我們現在也可以看到效果感覺還是不錯的?？梢约由衔⑿?、支付寶的收款二維碼。

這個打賞功能采用的是無插件，直接CSS實現的，順帶把代碼分享出來，如果有用戶也有需要用到可以直接使用。這里要申明的是，我也是從WPDAXUE摳出來的，版權歸屬倡萌同學，僅僅是將好的東西分享給大家提供便捷。我們可以將安裝到任何網站中。

第一、CSS部分

.reward{padding:5px 0}.reward .reward-notice{font-size:14px;line-height:14px;margin:15px auto;text-align:center}.reward .reward-button{font-size:28px;line-height:58px;position:relative;display:block;width:60px;height:60px;margin:0 auto;padding:0;-webkit-user-select:none;text-align:center;vertical-align:middle;color:#fff;border:1px solid #f1b60e;border-radius:50%;background:#fccd60;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fccd60),color-stop(100%,#fbae12),color-stop(100%,#2989d8),color-stop(100%,#207cca));background:-webkit-linear-gradient(top,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%);background:linear-gradient(to bottom,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%)}.reward .reward-code{position:absolute;top:-220px;left:50%;display:none;width:350px;height:200px;margin-left:-175px;padding:15px;border:1px solid #e6e6e6;background:#fff;box-shadow:0 1px 1px 1px #efefef}.reward .reward-button:hover .reward-code{display:block}.reward .reward-code span{display:inline-block;width:150px;height:150px}.reward .reward-code span.alipay-code{float:left}.reward .reward-code span.alipay-code a{padding:0}.reward .reward-code span.wechat-code{float:right}.reward .reward-code img{display:inline-block;float:left;width:150px;height:150px;margin:0 auto;border:0}.reward .reward-code b{font-size:14px;line-height:26px;display:block;margin:0;text-align:center;color:#666}.reward .reward-code b.notice{line-height:2rem;margin-top:-1rem;color:#999}.reward .reward-code:after,.reward .reward-code:before{position:absolute;content:'';border:10px solid transparent}.reward .reward-code:after{bottom:-19px;left:50%;margin-left:-10px;border-top-color:#fff}.reward .reward-code:before{bottom:-20px;left:50%;margin-left:-10px;border-top-color:#e6e6e6}

將CSS放到我們的CSS文件中，注意是否與我們已有的CSS命令有沖突，如果有則需要修改。

2、調用部分

<div class="reward"><div class="reward-button">賞 <span class="reward-code"> <span class="alipay-code"> <img class="alipay-img" src="支付寶收款二維碼地址200*200PX"><b>支付寶掃碼打賞</b> </span> <span class="wechat-code"> <img class="wechat-img" src="微信收款二維碼地址200*200PX"><b>微信打賞</b> </span> </span></div><p class="reward-notice">如果文章對您有幫助，歡迎移至上方按鈕打賞老蔣</p></div>

根據我們的需要，將需要調用打賞功能的頁面、模板添加上面調用代碼。

PS：需要提到的是，我們預先要做2個圖片，從支付寶、微信中先下載到收款的二維碼，然后替換成自己的圖片，千萬別放我的。