欢迎访问 舍力博客(www.shuyong.net)

当前位置:首页 » Emlog教程 » 为自己的博客增加打赏功能之EMLOG博客教程

打开支付宝首页搜索“8831244”,即可领红包

为自己的博客增加打赏功能之EMLOG博客教程

日期:2016-08-12   分类:Emlog教程
经常在一些博客中看到有一个打赏功能。今天舍力也写了一个简单的打赏功能代码,需要注意的是,博客必须加载js,emlog博客默认为include/lib/js/jquery/jquery-1.7.1.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";}//舍力制作打赏js
第2步:在css中插入如下代码
.sy_shang{clear:both;overflow:hidden;}.shang_box{width:300px;height:300px;padding:10px;background-color:#fff;border-radius:10px;position:fixed;z-index:1000;left:50%;top:50%;margin-left:-200px;margin-top:-200px;border:1px dotted #dedede;display:none;}.dashang{display:block;width:100px;margin:5px auto;height:25px;line-height:25px;padding:10px;background-color:#E74851;color:#fff;text-align:center;text-decoration:none;border-radius:10px;font-weight:bold;font-size:16px;transition:all 0.3s;}.dashang:hover{opacity:0.8;padding:15px;font-size:18px;}#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;margin-left:10px;}
第3步:在需要放置的地方插入下面代码,注意把其中的图片地址改为你自己的哦。
<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="//www.shuyong.net/content/uploadfile/images/shang/zfb.jpg"><br>打开支付宝扫一扫</div><div id="sl_shang1" style="display:none;"><img src="//www.shuyong.net/content/uploadfile/images/shang/wx.jpg"><br>使用微信扫一扫</div><div id="sl_shang2" style="display:none;"><img src="//www.shuyong.net/content/uploadfile/images/shang/qq.jpg"><br>打开QQ扫一扫</div>
</div></div>
</div>
以上3步就完成了。
温馨提示:如果您对本文有疑问,请在本页留言即可,其他途径暂不回复!!!
blogger
    本页正文内容约2532个文字
    本文地址:http://www.shuyong.net/iemlog/877.html
    除非注明,文章均为 【舍力博客】 原创,欢迎转载!转载请注明本文地址,谢谢!
    百度已收录
觉得很赞 (126)打赏
X
打赏方式:
  • 支付宝
  • 微信
  • QQ红包

打开支付宝扫一扫
打开支付宝首页搜索“8831244”,即可领红包

留言/评论:◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

填写好QQ号码,任点空白处自动获取

昵称

邮箱

网址

50楼、冷筱宇 [回复该留言]
2018-02-08 11:39
看了半天愣是没看懂
49楼、心已成佛 [回复该留言]
2017-06-02 14:18
【网址屏蔽】.
舍力 [回复该留言]
2017-06-02 14:24
@心已成佛:我就是用的这个,页面不好看都是css的问题,这个我就不普及了。。。
48楼、达人 [回复该留言]
2017-05-29 16:49
不在默认模块里怎么调用?js和css的名字叫什么才能调用成功
舍力 [回复该留言]
2017-06-02 13:50
@达人:只要有加载js的都可以用的,那个默认的只是举例而已。。把所有的代码都放上去就可以实现的
47楼、吾爱’s [回复该留言]
2017-04-25 14:29
弄完后点击无反应!不弹出任何东西
舍力 [回复该留言]
2017-04-25 14:32
@吾爱’s:再次重申:测试请用默认模板,你的问题应该是js冲突的问题,这个我没有办法去帮你弄的
46楼、灰机blog [回复该留言]
2017-04-16 22:10
来贵站学习学习
45楼、设计师 [回复该留言]
2017-04-15 07:08
看看怎么调用
44楼、杏壳吧 [回复该留言]
2017-01-23 11:45
请问CSS写到哪个文件里?求路径。
43楼、君子政 [回复该留言]
2016-11-27 00:29
老大,请问是什么CSS?
42楼、君子政 [回复该留言]
2016-11-25 23:40
学习一下
41楼、半夏 [回复该留言]
2016-11-22 19:00
学习一下
40楼、有哥哥 [回复该留言]
2016-11-19 14:31
想学习一下
39楼、悠久娱乐网 [回复该留言]
2016-11-02 17:27
想学习一下
38楼、陌逸轩 [回复该留言]
2016-10-30 10:57
学习一下
37楼、筱豪 [回复该留言]
2016-10-27 17:27
想学习一下
舍力 [回复该留言]
2016-10-29 10:08
@筱豪:欢迎!!!
36楼、海诚 [回复该留言]
2016-10-25 21:30
学习一下

个人资料

舍力

博主:舍力

Emlog交流群

    网站制作
    1、博客网站以Emlog为程序;
    2、企业网站建议以米拓MetInfo为程序,当然也可以用Emlog来做。

博客统计

  • 文章数量:1072篇
  • 文章评论:3212条
  • 总访问量:3969963次
  • 微语数量:50条
  • 在线人数:2人
  • 本站运行:5年6月27天
  • 估计博主很忙,已经很久没更新了!
阿里云商标服务,专业专注、极速申报、最快1分钟递交到商标局
Copyright © 2019 舍力博客 版权所有   粤ICP备11021420号
基于宝塔面板,数据存储于阿里云ECS
Powered by emlog / &Author 舍力博客.