美化博客园大全 - 好文

当前文章所写样式已经跟现在我博客的样式完全不一样了，但是里面的每个小模块还是好用的，照着一步一步来也可以搭建出不错的博客界面。

前言：用了两天的时间把我的博客园好好规划了一下，也来写篇随笔教一下大家怎么定义一个属于自己的博客园，我将会把我博客园的所有内容展现给大家（很大方的吧）

首先要明白，博客园如何自定义样式，在博客园的设置里，皮肤我选择的是
SimpleMemory，我的样式是基于这个皮肤来的，当然你选择别的皮肤也可以用，但样式多少会有差别。之后要做的就是申请js权限，没有权限你是添加不了js样式的，

我的已经申请过了显示的是支持状态，申请很快的，一定要申请。好了，接下来就开始我们的自定义之旅，当然美化博客园要适度不然将深陷其中☺

博客园背景设置

已经特地写过一篇文章：https://www.cnblogs.com/zouwangblog/p/11139344.html
<https://www.cnblogs.com/zouwangblog/p/11139344.html>

看板娘

这是我最喜欢的一个功能，有什么能比每次打开博客看见一个美美的看板娘更让人心情愉悦的呢，相信你们也看见了我首页的看板娘，接下来我来介绍如何添加

还是那句话首先要申请js权限，之后在页首或者页脚里添加如下代码：
 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta
http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Live2D</
title> <link rel="stylesheet" type="text/css" href
="https://blog-static.cnblogs.com/files/zouwangblog/waifu1.css"/> <link rel
="stylesheet" type="text/css" href
="https://blog-static.cnblogs.com/files/zouwangblog/flat-ui.min1.css"/> <script
src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body
> <div class="waifu" id="waifu"> <div class="waifu-tips" style="opacity: 1;
font-size: 14px"></div> <canvas id="live2d" width="300" height="300" class
="live2d"></canvas> <div class="waifu-tool"> <span class="fui-home"></span> <
spanclass="fui-chat"></span> <span class="fui-eye"></span> <span class
="fui-user"></span> <span class="fui-photo"></span> <span class
="fui-info-circle"></span> <span class="fui-cross"></span> </div> </div> <script
src="https://blog-static.cnblogs.com/files/zouwangblog/live2d.js"></script> <
scriptsrc="https://blog-static.cnblogs.com/files/zouwangblog/waifu-tips1.js"></
script> <script type="text/javascript">initModel()</script> </body> </html> 

时钟

这是一个小功能，也是在侧边栏公告里
<div id="clockdiv"> <canvas id="dom" width="200" height="200">您的浏览器不兼容canvas</
canvas> </div> <script type="text/javascript" src
="https://blog-static.cnblogs.com/files/zouwangblog/Clock.js"></script>
网易云播放器

这个需要打开网易云

之后将以下代码复制到侧边栏公告里

提示：博客园，不支持iframe,支持embed
<embed src
="//music.163.com/style/swf/widget.swf?sid=409650851&type=2&auto=1&width=320&height=66"
width="340" height="86" allowNetworking="all"></embed>
打赏

在页首添加以下代码
<script> window.tctipConfig = { imagePrefix: "
http://files.cnblogs.com/files/kdy11/", cssPrefix: "
http://files.cnblogs.com/files/kdy11", buttonImageId: 4, buttonTip: "dashang",
list:{ alipay: {qrimg:"
https://www.cnblogs.com/images/cnblogs_com/zouwangblog/1477590/t_zhifubao.bmp"
}, weixin:{qrimg:"
https://www.cnblogs.com/images/cnblogs_com/zouwangblog/1477590/t_weixin.bmp"},
} };</script> <script src
="https://blog-static.cnblogs.com/files/zouwangblog/dashang.js"></script>
将里面的两张图片换成你自己的就行了，怎么保存微信支付宝收款码不用我说了吧

自定义评论样式

拥有聊天一样的评论功能心不心动，在页脚里添加以下
<link type="text/css" rel="stylesheet" href
="https://blog-static.cnblogs.com/files/zouwangblog/comment.css"> <script type
="text/javascript"> $(function(){ $('#blogTitle h1').addClass('bounceInLeft
animated'); $('#blogTitle h2').addClass('bounceInRight animated'); // 删除反对按钮
$('.buryit').remove(); initCommentData(); }); function initCommentData() { $('
.feedbackItem').each(function() { var text = $(this).find('
.feedbackListSubtitle .layer').text(); // 将楼层信息放到data里面 //
$(this).find('.blog_comment_body').attr('data-louceng', text.replace(/^#/g,
'')); if($(this).find('.feedbackListSubtitle .louzhu').length>0) $(this
).addClass('myself'); var avatar = $(this).find('> .feedbackCon > span').html()
|| 'http://pic.cnitblog.com/face/sample_face.gif'; $(this).find('> .feedbackCon
> .blog_comment_body').append('<img class="user-avatar" src="'+avatar+'"/>')
}); } $(document).ajaxComplete(function(event, xhr, settings) { // 监听获取评论ajax事件
if(settings.url.indexOf('/mvc/blog/GetComments.aspx') >= 0) {
initCommentData(); } });</script>
GitHub链接

页首：
<a href="https://github.com/Zou-Wang" title="我的github地址" target="_Blank" class
="github-corner" aria-label="View source on Github"><svg width="80" height="80"
viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top:
0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115
L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6
119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3
C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill
="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><
pathd="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6
C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4
154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5
178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6
C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6
C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1
C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9
141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>
.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}
@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:
rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){
.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation
:octocat-wave 560ms ease-in-out}}</style>
单击放大图片

博客园是不支持单击放大图片的，当图片太小的时候很不方便，下面上代码
<link href="https://blog-static.cnblogs.com/files/zouwangblog/lightbox.css" rel
="stylesheet">  <script src
="https://blog-static.cnblogs.com/files/yadongliang/lightbox-plus-jquery.js"></
script> <script type='text/javascript'>$('#cnblogs_post_body img').wrap(function
(){return "<a href='"+$(this).attr("src")+"' data-lightbox='example-set'></a>"
});</script> <script type='text/javascript'>$(".code_img_closed").unwrap();</
script> <script type='text/javascript'>$(".code_img_opened").unwrap();</script>
点击鼠标爱心

页首：
<script type="text/javascript"> var a_idx = 0; jQuery(document).ready(function
($) { $("body").click(function(e) { var a = new Array("❤","❤","❤","❤","❤","❤","❤
","❤","❤","❤","❤","❤"); var $i = $("<span></span>").text(a[a_idx]); a_idx =
(a_idx+ 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index":
999999999999999999999999999999999999999999999999999999999999999999999, "top": y
- 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "rgb("
+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
}); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500,
function() { $i.remove(); }); }); }); </script>
想单击的时候出来什么在数组里自定义就行

鼠标粒子特效

就是我页面漂浮的粒子功能:
<script> !function(){ function n(n,e,t){ return n.getAttribute(e)||t } function
e(n){return document.getElementsByTagName(n) } function t(){ var t=e("script"
),o=t.length,i=t[o-1]; return{ l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,
"color","0,0,0"),n:n(i,"count",99) } } function o(){ a=m.width=window.innerWidth
||document.documentElement.clientWidth||document.body.clientWidth, c=m.height=
window.innerHeight||document.documentElement.clientHeight||
document.body.clientHeight }function i(){ r.clearRect(0,0,a,c); var
n,e,t,o,m,l; s.forEach(function(i,x){ for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0
?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++
)n=u[e], null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y, l=o*o+m*m,l<n.max&&(n===y
&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m), t=(n.max-l)/
n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")"
,r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke())) }), x(i) }var a,c,u,m=
document.createElement("canvas"), d=t(),l="c_n"+d.l,r=m.getContext("2d"), x=
window.requestAnimationFrame||window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||window.oRequestAnimationFrame||
window.msRequestAnimationFrame|| function(n){ window.setTimeout(n,1e3/45) }, w=
Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="
position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0
].appendChild(m),o(),window.onresize=o, window.onmousemove=function(n){ n=n||
window.event,y.x=n.clientX,y.y=n.clientY }, window.onmouseout=function(){ y.x=
null,y.y=null }; for(var s=[],f=0;d.n>f;f++){ var h=w()*a,g=w()*c,v=2*w()-1,p=2*
w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3}) } u=s.concat([y]), setTimeout(function
(){i()},100) }(); </script>
后话
：美化博客园就到达尾声了，因为博主本身不是前端人员，弄这个博客的样式也是费了很大的力气，这些样式也是我一点点搜刮来的，如果您使用了这里面的某个样式，还望给个推荐啊，谢谢大家支持

热门工具换一换