用代码给文章加入打赏功能

打赏是一个比较普遍的功能,比如微博打赏,今天看到一个纯本地的方案,所以就用了。除了纯本地方案,还可以使用畅言的打赏和百度的打赏功能,他们安装简单,一句js代码就搞定了,因为现在都不支持移动版,又没有用到他们的其他服务,所以就用了这个本地的方案。

原文是舍力博客里的《为自己的博客增加打赏功能之EMLOG博客教程》,在他基础上行,调整了样式

一、增加一个js功能

可以另外写一个js文件引入头文件,也可以直接在以前引入过头文件的js文件里面加功能,功能的代码

function dashangToggle(){$(".shang_box").fadeToggle();}function changeItem(i){var k = 3;for(var j = 0;j < k;j++){if(j == i){document.getElementById("sl_shang" + j).style.display = "block";}else{document.getElementById("sl_shang" + j).style.display = "none";}}}function opay(){document.getElementById("sl_shang").target="_parent";}

二、增加css

可以在模板的css文件里面,比如view.css文件增加这几个css样式

/**打赏**/
.sy_shang{clear:both;overflow:hidden;}
.shang_box{width:380px;max-width:98%;height:360px;padding:10px;background-color:#fff;border-radius:26px;position:inherit;z-index:1000;border:6px dotted #dedede;display:none;}
.dashang{display:block;width:100px;margin:5px auto;height:44px;line-height:25px;padding:10px;background-color:#E74851;color:#fff !important;text-align:center;text-decoration:none;border-radius:10px;font-weight:bold;font-size:24px;transition:all 0.3s;}
.dashang:hover{opacity:1.2;font-size:26px;}
#sl_shang0,#sl_shang1,#sl_shang2{text-align:center;}
#sl_shang0 img,#sl_shang1 img,#sl_shang2 img{max-width:260px;}
.sl_shang{overflow:hidden;}.sl_shang b{font-size:18px;}
.sl_shang ul{margin-top:10px; clear:both; overflow:hidden;}
.sl_shang li{float:left;}

三、加入打赏

在需要打赏的地方,加入下面代码即可,记得把那几个支付宝的图片和链接换成自己的

<center>
<div class="sy_shang"><a href="javascript:void(0)" onclick="dashangToggle()" class="dashang" title="打赏,支持一下">打赏</a>
<div class="shang_box"><a href="javascript:void(0)" onclick="dashangToggle()" title="关闭" style="float:right;">X</a>
<div id="sl_shang" onsubmit="return postcheck()"><div class="sl_shang"><b>打赏方式:</b><ul><li><input type="radio" name="paytype" onclick="opay();return changeItem(0);"  checked="checked" />支付宝</li><li><input type="radio" name="paytype" onclick="opay();return changeItem(1);" />微信</li><li><input type="radio" name="paytype" onclick="opay();return changeItem(2);"  />QQ红包</li></ul></div>
<div id="sl_shang0"><img src="http://cdn.hudongdong.com/img/alidashang.png"><br>打开支付宝扫一扫</div><div id="sl_shang1" style="display:none;"><img src="http://cdn.hudongdong.com/img/weixindashang.png"><br>使用微信扫一扫</div><div id="sl_shang2" style="display:none;"><img src="http://cdn.hudongdong.com/img/qqdashang.png"><br>打开QQ扫一扫</div>
<div><i class="fa fa-hand-o-right"></i> <a target="_blank" href="http://www.hudongdong.com/orderlist.html" title="胡东东博客">已打赏名单</a></div>
</center>

四、效果展示

这样之后,就会在对应地方出现了打赏的按钮,比如我文章后面的打赏,就是这个样子了

屏幕快照 2016-09-25 下午10.46.19.png

如果和你之前的样式有冲突,那么自己调整下css样式即可

Last modification:January 1st, 1970 at 08:00 am
如果看了这个文章可以让你少加会班,可以请我喝杯可乐
已打赏名单
微信公众号

Leave a Comment