0. JS权限申请
1. 下载zoom.js和zoom.css
下载地址:https://github.com/fat/zoom.js
2. 上传zoom.js和zoom.css
3. 页面定制 CSS 代码
博客园-设置-页面定制CSS代码
1 /*溢出隐藏设置*/ 2 #topics, #mainContent { 3 overflow: visible; 4 } 5 #postDesc { 6 float: none; 7 }
4. 页脚 HTML 代码
博客园-设置-页脚 HTML 代码(注意更改zoom.js和zoom.css的地址)
1 <!-- zoom.js 的样式(地址修改为自己文件的地址) --> 2 <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/blue-lin/zoom.css"> 3 <!-- jQuery 的 cdn --> 4 <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> 5 <!-- Bootstrap 的 transition.js cdn(过渡动画插件)--> 6 <script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script> 7 <!-- zoom.js 核心代码(地址修改为自己文件的地址) --> 8 <script src="https://blog-static.cnblogs.com/files/blue-lin/zoom.js"></script> 9 <script type='text/javascript'>$('#cnblogs_post_body img').attr('data-action', 'zoom');</script> 10 <!-- 解决折叠按钮冲突问题 --> 11 <script type='text/javascript'>$(".code_img_closed").removeAttr("data-action");</script> 12 <script type='text/javascript'>$(".code_img_opened").removeAttr("data-action");</script>