首页 / 技术 / 正文

自定义QQ订阅博客网站代码

2014年01月12日 3 条评论 ... 技术

QQ邮件列表是博主站长们最喜欢用的订阅工具,他受众面广,使用方便快捷,比起其他的订阅工具,QQ邮件列表可以为自己网站增分不少,但是再好的工具也有不尽人意的地方,QQ邮件列表默认只有两种风格,黑色的和白色的,大部分时候这两种风格是不适合的,但是我们可以自行进行编写,来匹配自己的网站。

登陆QQ邮件列表,http://list.qq.com,然后创建一个栏目,点击“订户”→“搜集订户”→“获取订阅插件”,选择博客类型,这里以wordpress为例。

你获得的代码如下:

<!--以下是QQ邮件列表订阅嵌入代码--><script >var nId = "4c7a6ca45b6f146e75a27f1dba5cea531f5e504905295796",nWidth="auto",sColor="light",sText="填写您的邮件地址,订阅我们的精彩内容:" ;</script><script src="http://list.qq.com/zh_CN/htmledition/js/qf/page/qfcode.js" charset="gb18030"></script>

很明显,默认的代码提供的是javascript代码,从这里看不出来明显的HTML代码,不过,从客户端,也就是浏览器就能看到了。

qq订阅代码

先添加代码到网站,然后打开chrome浏览器,找到组件,右键,点击“审查元素”,就会获得当前这些表单的HTML代码,获取的代码如下:

<!--以下是QQ邮件列表订阅嵌入代码-->
<script>
var nId = "4c7a6ca45b6f146e75a27f1dba5cea531f5e504905295796",nWidth="auto",sColor="light",sText="填写您的邮件地址,订阅我们的精彩内容:" ;
</script>
<script src="http://list.qq.com/zh_CN/htmledition/js/qf/page/qfcode.js" charset="gb18030">
</script>
<style>
.rssbook{padding:10px 15px;overflow:hidden;zoom:1;background:#f6f6f6;border:3px solid #ddd;}.light{background:#f6f6f6;border:3px solid #ddd;}.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{width:100%;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 light " style="width:auto ">
<p class="info">填写您的邮件地址,订阅我们的精彩内容:</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="4c7a6ca45b6f146e75a27f1dba5cea531f5e504905295796"><input id="to" name="to" type="text" class="rsstxt" value="">
<div class="rssbutton">
<input type="submit" value="订阅">
</div>
</form>
</div>
</div>

通过代码的简单阅读,我们可以看出来,其中有一个字符串有内容:

4c7a6ca45b6f146e75a27f1dba5cea531f5e504905295796

这就是自己网站的唯一代码,从这里能识别出自己的网站,明白这一点,就可以开始改造了。

<div class="rssbook light " style="width:auto ">
<p class="info">输入邮箱免费订阅本站精彩内容</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="36c6259d85724039f5243478e1c93f66a3090d1fdb5d0131">
<input id="to" name="to" type="text" class="rsstxt" value="">
<div class="rssbutton"><input type="submit" value="订阅">
</div>
</form>
</div>
</div>

去掉了包含里面的CSS,修改成自己的自定义的CSS名称,然后就可以按照自己的需要,修改成为自己的的风格了。

改造后

3 条评论

Loading...
  1. 储能产业报告

    祝福博主新年快乐!

    2014-01-17 [回复]
  2. 山野愚人居

    JS调用不一样吗?

    2014-01-17 [回复]
    • toyye

      额,还是不太一样的。

      2014-01-18 [回复]

发布评论