qq邮件列表DIY符合自己网站的样式
很多站长在博客或者其他网站都会放上邮件订阅框，用qq邮件列表来做订阅框的不少。厦门SEO的一个客户网站上需要这个邮件订阅功能，厦门SEO安装后发现qq邮件列表的订阅框样式是固定，安装代码也只有javascript无法直接修改。细细研读下代码发现，订阅框调用了一个js，把这个js下载下来后发现这个订阅框的css写在这个js里面。先展示一下修改前后的对比图。
修改前：
修改后：
大家可以发现修改后样式比较活，更容易切合网站的风格样式。下面厦门SEO教大家如何修改。
首先，我们需要发调用的js下载下来，下载地址：http://list.qq.com/zh_CN/htmledition/js/qf/page/qfcode.js 接下来我们对这个js进行修改，修改后的代码如下：
if(typeof(nId)!=null&&typeof(sColor)!=null&&typeof(nWidth)!=null&&typeof(sText)!=null)
{
document.write(
[
"<style>",
".dark{background:#aaa;border:3px solid #666;}",
".mailInput{margin-top:5px;}",
".rssbook .info{color:#666;font-size:12px;}",
".light .info{color:#666;}",
".dark .info{color:#fff;}",
".rssbutton{float:left;border:1px solid #698ab4; -moz-border-radius:3px;border-radius:3px;-webkit-border-radius:3px;}",
".dark .rssbutton{border: 1px solid #585858;}",
".rssbutton input{background: #77a0d1;border: 1px solid #88b3e6; color: #FFFFFF; cursor: pointer;font-weight: bold;width:90px;display:block;height:22px;line-height:22px;*line-height:19px;text-align:center;}",
".dark .rssbutton input{background:#676767;border: 1px solid #777;}",
".rssbutton input:hover{background:#86b4eb;text-decoration:none;}",
".dark .rssbutton input:hover{background:#797979;border: 1px solid #939393;}",
"input.rsstxt{float:left;width:140px;height:20px;font-size:14px;padding:2px 3px;-moz-border-radius:3px;border-radius:3px;-webkit-border-radius:3px;border:1px solid #ccc;;border-color:#7c7c7c #c3c3c3 #c3c3c3 #9a9a9a;margin-bottom:5px;}",
".dark input.rsstxt{background:#eee;}",
"</style>",
"<div class=\"rssbook ",sColor,
" \" style=\"width:",nWidth," \"><p class=\"info\">",sText,"</p>",
"<div class=\"mailInput\">",
"<form action=\"http://list.qq.com/cgi-bin/qf_compose_send\" target='_blank' method='post'>",
"<input type=\"hidden\" name=\"t\" value=\"qf_booked_feedback\">",
"<input type=\"hidden\" name=\"id\" value=\"",nId,"\">",
"<input id=\"to\" name=\"to\" type=\"text\" class=\"rsstxt\" value=\"\"/>",
"<div class=\"rssbutton\"><input type=\"submit\" value=\"订阅\"></div>",
"</form>",
"</div></div>"].join(“”));
}
else
{
alert(“nId empty”);
}
样式可以根据自己的需要修改，修改后保存js。在调用代码里面把全程调用js改成本地调用js代码是刚才修改后的那个js。调用代码里面的修改后的代码如下：
<!–以下是QQ邮件列表订阅嵌入代码–><script >var nId = “网站对应的订阅码”,nWidth=”100%”,sColor=”light”,sText=”填写您的邮件地址，订阅我们的精彩内容：” ;</script><script src=”qfcode.js” charset=”gb18030″></script>
把代码安装到你要显示邮件订阅框的位置，到这里我们修改完成。如果需要更切合网站主题风格，需要根据需要修改js里面的样式，这样就能DIY出符合自己网站样式的邮件订阅框。
补充：web前端 , HTML/CSS ,
