博客增加二维码功能

　　我们经常可以看到博客园，有些博客的界面弄得很炫，还有好多功能的。到底是怎么弄得呢，本次就通过一个简单实用博客插件，来提升一下博客的逼格。

　　来个引言先

确实现在已经是移动时代了，在移动设备上阅读慢慢会成为主流，网站如果没有便捷的方式让用户在移动设备阅读的话还真有点落伍，于是想想就做个“扫码阅读”的功能吧。其实很简单，就是将网址生成二维码就行了。

　　本次用到的两个js库是jquery库和jquery.qrcode库。至于这个库怎么用就不说了，js还是比较简单的。直接点，开始流程。

0.权限

　　首先，你要有博客园可以添加JS的权限，默认是没有的，要跟管理员申请。（已经好久了，不知道现在怎么弄了）

1.博客园的设置页面

　　进入博客园的个人博客的后台编辑界面点击设置选项。

2.增加代码

　　下面有四个比较大的代码填写框，分别是页面定制css代码，博客侧边栏(支持HTML代码)，页首HTML代码，页脚HTML代码，只要有权限，代码在哪里写都是可以的。

　　这次我写在页脚处，代码如下

 1 <script src="http://apps.bdimg.com/libs/jquery/1.6.0/jquery.min.js" type="text/javascript" ></script>
 2 <script src="http://apps.bdimg.com/libs/jquery-qrcode/1.0.0/jquery.qrcode.min.js" type="text/javascript" ></script>
 3 
 4 <script type="text/javascript">
 5 var qr_ok=1;
 6 function Display(){
 7     document.getElementById("qr_bg").style.display="none";
 8 }
 9 function Show(PositionLeft,PositionTop){
10     document.getElementById("qr_bg").style.display="block";
11     document.getElementById("qr_bg").style.left=PositionLeft+80;
12     document.getElementById("qr_bg").style.top=PositionTop;
13 
14     qr();
15 }
16 function qr(flag)
17 {
18 　　if(qr_ok==0)
19    　　return ;
20 　　qr_ok=0;
21 　　jQuery.noConflict();
22 　　jQuery("#qr_bg").qrcode({ 
23 　　　　render: "canvas", //table方式 
24 　　　　width: 100, //宽度 
25 　　　　height:100, //高度 
26 　　　　text: document.location.href //任意内容 
27 　　}); 
28 }
29 </script>

　　然后就是那个使用的代码

1 <div id="qr_bg" onmouseover="Show()">点击显示</div>

　　没错就这一句,我把这一句写在博客侧边公告那个对应的代码框里面就有如下效果了。

　　这样就可以实现在左边显示一个当前页面特定的二维码了，如果你对当前页面比较感兴趣，想在手机浏览器中打开，就扫一扫，很方便的。

　　按照一般的思路，这个二维码放在这里就不太好了。一般我们读博客，都是往下读的。读到末尾，觉得好，要发到手机上的时候，应该是在博客的结尾处，所以我把二维码写在了博客的结尾处。注意不是最底边。

　　我是写在签名处。由于博客系统不是自己的，所以增加一个小小的功能都很麻烦。好多都是要通过曲线的方式进行实现的。

　　在签名处写上这些，就可以实现效果了。这个框中是不能有JS代码的，不过在一个标签里面写个事件还是可以的。（逃

 1 <table style="background: rgb(230, 250, 230); padding: 10px 10px 10px 10px; border: 1px dashed rgb(224, 224, 224); font-family: 微软雅黑; font-size: 13px;"
 2     onmousemove="Show(this.offsetLeft,this.offsetTop);" >
 3     <td >
 4         作者：<a href="http://www.cnblogs.com/wunaozai/" target="_blank">无脑仔的小明</a> <br>
 5         出处：<a href="http://www.cnblogs.com/wunaozai/" target="_blank">http://www.cnblogs.com/wunaozai/</a> <br>
 6         本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 <br>
 7         如果文中有什么错误，欢迎指出。以免更多的人被误导。 <br>
 8     </td>
 9     <td align="right">
10         <div id="qr_bg"></div>
11     </td>
12 </table>