网站地图    收藏   

主页 > 前端 > css教程 >

qq邮件列表DIY符合自己网站的样式 - html/css语言栏

来源:自学PHP网    时间:2015-04-14 14:50 作者: 阅读:

[导读] 很多站长在博客或者其他网站都会放上邮件订阅框,用qq邮件列表来做订阅框的不少。厦门SEO的一个客户网站......

很多站长在博客或者其他网站都会放上邮件订阅框,用qq邮件列表来做订阅框的不少。厦门SEO的一个客户网站上需要这个邮件订阅功能,厦门SEO安装后发现qq邮件列表的订阅框样式是固定,安装代码也只有javascript无法直接修改。细细研读下代码发现,订阅框调用了一个js,把这个js下载下来后发现这个订阅框的css写在这个js里面。先展示一下修改前后的对比图。

修改前:qq邮件列表订阅样式修改前

修改后:qq邮件列表订阅样式修改后

大家可以发现修改后样式比较活,更容易切合网站的风格样式。下面厦门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出符合自己网站样式的邮件订阅框。 

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论