部落格園貼邊打賞
阿新 • • 發佈：2020-10-23
目錄
前言
玩部落格園到網上找各種美化部落格和主題啥的，雖然找到一些好玩的東西。這個打賞我一開始也是用的別人現成的，但是越來越覺得過於複雜。還是自己研究研究，搞個簡單版本吧。
同時也多多練習練習自己的前端編碼能力吧，雖然我是個後端程式猿，不過不影響我向全棧發展，哈哈。
貼邊打賞
美化二維碼
首先需要在微信和支付寶的收錢頁面把收款二維碼儲存好，然後通過【草料二維碼】解碼，然後把美化後的二維碼下載儲存。可以看下圖：
合併二維碼
上面操作可以得到美化後的微信和支付寶二維碼，我是通過美圖秀秀的拼圖功能將這兩張圖拼接成一張圖。如下操作：
壓縮二維碼
生成的二維碼可以通過【tinypng】進行壓縮，這個網站我經常用，壓縮效果很不錯，我這張圖片通過壓縮減少68%體積。如下介面：
貼邊程式碼
下面程式碼儲存到html檔案，用瀏覽器開啟就能看到效果，是不是超級簡單啊。
<html> <head> <title>貼邊打賞</title> <style type="text/css"> #chargeCode { position: fixed; right: 0; z-index: 10000; padding-left: 34px; width: 0px; overflow: hidden; box-sizing: content-box } #chargeCodeMain { transform: scale(0.4); width: 5px; border: 1px solid #dbdbdb; border-right: none } #btnChargeCode { position: absolute; left: 0; top: 50%; margin-top: -50px } </style> </head> <body> <div id="chargeCode"> <a id="btnChargeCode" href="javascript:;"> <img class="png" src="https://blog-static.cnblogs.com/files/janbar/tab_4.bmp"> </a> <div id="chargeCodeMain"> <img class="png" src="https://images.cnblogs.com/cnblogs_com/janbar/1850882/o_201023074117janbar.png"> </div> </div> <script type="text/javascript"> var bcc = document.getElementById('btnChargeCode'); var cc = document.getElementById('chargeCode'); var ccm = document.getElementById('chargeCodeMain'); bcc.onmouseover = function() { cc.style.width='170px'; }; ccm.onmouseout = function() { cc.style.width='0px'; }; </script> </body> </html>
加到部落格園
- 首先將css樣式複製到部落格園的
頁面定製 CSS 程式碼中。
#chargeCode { position: fixed; right: 0; z-index: 10000; padding-left: 34px; width: 0px; overflow: hidden; box-sizing: content-box } #chargeCodeMain { transform: scale(0.4); width: 5px; border: 1px solid #dbdbdb; border-right: none } #btnChargeCode { position: absolute; left: 0; top: 50%; margin-top: -50px }
- 然後將html元素複製到部落格園
頁首 HTML 程式碼中。
<div id="chargeCode">
<a id="btnChargeCode" href="javascript:;">
<img class="png" src="https://blog-static.cnblogs.com/files/janbar/tab_4.bmp">
</a>
<div id="chargeCodeMain">
<img class="png" src="https://images.cnblogs.com/cnblogs_com/janbar/1850882/o_201023074117janbar.png">
</div>
</div>
- 最後將js程式碼複製到部落格園的
頁尾 HTML 程式碼中。
<script type="text/javascript">
var bcc = document.getElementById('btnChargeCode');
var cc = document.getElementById('chargeCode');
var ccm = document.getElementById('chargeCodeMain');
bcc.onmouseover = function() {
cc.style.width='170px';
};
ccm.onmouseout = function() {
cc.style.width='0px';
};
</script>
總結
還是自己動手豐衣足食，別人的總歸不太適合我額，因為太複雜了，而我只想要個簡單功能。關於本主題已經修改了好多地方了，包括js和css中多餘的空格和分號這種我看到都會刪除掉，這算不算有強迫症啊，因為少一個字元網路傳輸就少一掉，哈哈。不過呢，這個部落格主題我越來越喜歡了，也有很多小夥伴看我的部落格誇我的主題好看。一定是我選了一個好的主題模板，畢竟像我這樣審美不咋的也能搞出不錯的樣式，唯有偷笑抒發自己的心情。好了本篇博文都是原創，程式碼簡單到爆炸，大家有需要儘管拿去用吧。