Emlog5.3.x增加支付宝、微信和QQ打赏功能

经常在一些博客中看到有一个打赏功能。舍力也写了一个简单的打赏功能代码，需要注意的是，博客必须加载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";
}

第2步：在网站模板的css文件夹下的style.css中插入如下代码：

.sy_shang {
	clear: both;
	overflow: hidden;
	text-align: center;
}
.shang_box {
	width: 300px;
	height: 360px;
	padding: 6px;
	margin: 0 auto;
	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: 6px;
	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: 10px;
	font-size: 16px;
}
#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: 16px;
}
.sl_shang ul {
	clear: both;
	overflow: hidden;
}
.sl_shang li {
	float: none;
	margin-left: 10px;
}

第3步：在需要放置的地方插入下面代码一般是模板页面echo_log.php文件，具体位置你可以多试几次，注意把其中的图片地址改为你自己的。

<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="<?php echo BLOG_URL; ?>images/ds/zfb.png"><br>
				打开支付宝扫一扫
			</div>
			<div id="sl_shang1" style="display:none;">
				<img src="<?php echo BLOG_URL; ?>images/ds/wx.png"><br>
				使用微信扫一扫
			</div>
			<div id="sl_shang2" style="display:none;">
				<img src="<?php echo BLOG_URL; ?>images/ds/qq.png"><br>
				打开QQ扫一扫
			</div>
		</div>
	</div>
</div>

说明：本文由【舍力博客】 原创，经测试无误。原文地址http://www.shuyong.net/877.html