前言
不少人说我的博客园布置得好，今天就发布一下我的博客园美化。
最近更新：2020年3月14日
在这里会有持续更新的内容，不必担心插件失效问题。
下面进入正文，希望对您有帮助。
我先在这里说一下，本文章仅在老官童鞋gogo的博客和附属博客发布，其他均为盗版抄袭！
样板：
我的主博客：https://www.cnblogs.com/laoguantongxiegogo/
我的附属博客：https://www.cnblogs.com/laoguantongxiegogofs/
博客园美化准备
1.你要申请博客。
2.申请js权限（对管理员说点好话）
3.学会复制粘贴。
博客园美化插件
每日图片背景
必应每日图片：https://area.sinaapp.com/bingImg/（每天都更新）
把下面的代码复制到css框即可，将自己的背景变成每日图片
如果你想更改，就把url里面的内容改成图片地址即可。
html/* 必应每日随机背景图*/ { background:url(https://area.sinaapp.com/bingImg/) top center no-repeat #000; background-attachment:fixed; } body { background: none; }
导航栏半透明
把你的导航栏变成半透明的。
将代码复制到css框中即可
#mainContent { background: #fff0; /* 导航菜单半透明*/ }
设置签名格式
将签名格式变得更好看，颜色可以自己更改。
放置到css框中即可
/* 设置签名格式 定制css样式 */ #MySignature { display: none; background-color: #B2E866; border-radius: 10px; box-shadow: 1px 1px 1px #6B6B6B; padding: 10px; line-height: 1.5; text-shadow: 1px 1px 1px #FFF; font-size: 16px; font-family: 'Microsoft Yahei'; }
在博客签名里粘贴下面的代码，内容链接可以修改。
<div>作者：<a href="http://www.cnblogs.com/【你的地址】/">【你的名字】</a></div>
<div>出处：<a href="http://www.cnblogs.com/【你的地址】/">http://www.cnblogs.com/【你的地址】/
</a></div>
<p>-------------------------------------------</p>
<p>个性签名：独学而无友，则孤陋而寡闻。做一个灵魂有趣的人！</p>
<p>如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个<span>“推荐”</span>哦，博主在此感谢！</p>
<p></p>
<p>万水千山总是情，打赏一分行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主，哈哈哈(っ•̀ω•́)っ✎⁾⁾！</p>
更改文章字体标题
整体设置文字，将标题上色置中。
放置在css框中即可，h1/h2可以按照习惯自行更改
#cnblogs_post_body { color: black; font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif; font-size: 15px; } #cnblogs_post_body h1 { text-align:center; background: #333366; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; font-size: 23px; font-weight: bold; height: 25px; line-height: 25px; margin: 18px 0 !important; padding: 8px 0 5px 5px; text-shadow: 2px 2px 3px #222222; } #cnblogs_post_body h2 { text-align:center; background: #006699; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; font-size: 20px; font-weight: bold; height: 25px; line-height: 25px; margin: 18px 0 !important; padding: 8px 0 5px 5px; text-shadow: 2px 2px 3px #222222; }
统计访问次数/访问总人数
以前很多人之前都会在http://www.amazingcounters.com/这个网站统计
但是现在不太稳定，我又在网上找到了另一个计数器网站，稳定可用。
https://www.cutercounter.com/traditional-chinese-n/
在这里面申请后就可以使用，很多皮肤，很好看，获得代码粘贴到博客侧边栏公告即可。
公告栏圆形时钟
圆形大气的时钟，大小可自定义。
粘贴到博客侧边栏公告即可
<!-- 添加公告栏时钟 -->
<div id="clockdiv">
<canvas id="dom" width="250" height="250">时钟canvas</canvas>
</div>
<script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>
公告栏人形时钟
可爱有趣的人形时钟。
粘贴到博客侧边栏公告即可
<!-- 添加公告栏人形时钟 --> <embed wmode="transparent" src="https://files.cnblogs.com/files/jingmoxukong/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="240" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> <br />
小老鼠游戏控件
闲着没事可以玩，可以更改颜色。
<!-- 小老鼠游戏控件 --> <div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;" data="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2F&up_tailColor=E6DEBE&" width="240" height="160"><param name="movie" value="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2E&up_tailColor=E6DEBE&"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"></object></div><p></p> 点击黄色小点让小老鼠跑步，点击小老鼠周围即可喂食。
网易音乐（侧边栏）
具体可以到网易云音乐找
1.找出你想听的歌/歌单
2.点击“生成外链播放器”
3.选择合适大小
4.将首尾的iframe改为embed
5.粘贴到博客园侧边栏。
示例：
<embed frameborder="no" border="0" marginwidth="0" marginheight="0" width=260 height=86 src="//music.163.com/outchain/player?type=2&id=4010198&auto=0&height=66"></embed>
网易音乐（页脚）
将下面的音乐粘贴到页脚框即可（这个似乎更加漂亮）
想要更改歌单，就按照上一条，更改里面的ID即可
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css"> <script src="https://blog-static.cnblogs.com/files/yjlaugus/APlayer.min.js"></script> <div id="aplayer" class="aplayer" data-id="865331941" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div> <script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
QQ靠靠找我
用户点击旁边的QQ即可想你通信，但是提前要设置好QQ在线状态
<!--靠靠找我--> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=【你的QQ号】&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:【你的QQ号】:41" alt="点击按钮前记得打开QQ" title="点击按钮前记得打开QQ"/></a> <p class="wenzi">有问题找我哦，如果点击按钮失效，就直接向QQ：【你的号码】发送消息</p>
侧边栏滚动文字
更改内容添加到博客园侧边栏即可
<marquee><a href="#"><font color="red" size="4">你的内容</marquee>
添加顶部信息
更改内容添加到页首即可
<!-- 添加博客顶部博主信息--> <p style="text-align: center;font-size:35px;margin-bottom:5px;margin-top:20px;opacity: 0.5">WELCOME</p>
添加顶部滚动公告
更改内容添加到页首即可
<!-- 添加顶部滚动信息（公告）--> <div id="Scroll_info" style="text-align: center;color:blue;font-size:16px;padding:16px;opacity: 0.5">任何一个伟大的目标，都有一个微不足道的开始。</div>
复制粘贴警告
当别人复制粘贴时，会有单独的警告（个人是不推荐使用别人的禁止复制粘贴了）
添加到页首即可
<script language="javascript" type="text/javascript"> jQuery(document).on('copy', function(e) { var selected = window.getSelection(); var copyFooter = '<br>-<br>著作权归作者所有。<br>' + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>' + '作者：老官童鞋gogo<br> 源地址：' + document.location.href + '<br>来源：博客园cnblogs<br>© 版权声明：本文为博主原创文章，转载请附上博文链接！'; var copyHolder = $('<div>', {html: selected + copyFooter, style: {position: 'absolute', left: '-99999px'}});
更改鼠标图标
不在使用微软默认图标（仅在博客内生效）
可以更改样式
添加到css框
a:hover { cursor:url(https://files.cnblogs.com/files/laoguantongxiegogo/click_24px_1231393_easyicon.net.ico),auto; } body { cursor:url(https://files.cnblogs.com/files/laoguantongxiegogo/pointer_24px_1231389_easyicon.net.ico),auto; }
返回顶部按钮
点击返回顶部。
方便你我
粘贴到页首
<!-- 返回顶部 --> <style> #back-top { position: fixed; bottom: 10px; right: 8px; z-index: 99; } #back-top span { width: 70px; height: 140px; display: block; background:url(https://images.cnblogs.com/cnblogs_com/laoguantongxiegogo/1667745/o_200312023941%E8%BF%94%E5%9B%9E%E9%A1%B6%E9%83%A8.png) no-repeat center center; } #back-top a{outline:none} </style> <script type="text/javascript"> $(function() { // hide #back-top first $("#back-top").hide(); // fade in #back-top $(window).scroll(function() { if ($(this).scrollTop() > 400) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); // scroll body to 0px on click $('#back-top a').click(function() { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
鼠标点击特效1
点击后出现社会主义核心价值观。
处处要学习
粘贴到页脚。
<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>
鼠标点击特效2
点击出现烟花。
粘贴到页脚
<script src="https://blog-static.cnblogs.com/files/yjlblog/cursor-effects.js"></script> <canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
页面雪花特效
天上飘雪花
css部分代码
#Snow{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background: rgba(125,137,95,0.1); pointer-events: none; }
页脚部分代码
<div class="Snow"> <canvas id="Snow"></canvas> </div> <script src="https://blog-static.cnblogs.com/files/Return-blog/xue.js"></script>
两个都要有
改变标题栏logo
图片可以自行选择
我的是一个小电脑
粘贴到页脚
<script type="text/javascript" language="javascript"> //Setting ico for cnblogs var linkObject = document.createElement('link'); linkObject.rel = "shortcut icon"; linkObject.href = "https://blog-static.cnblogs.com/files/laoguantongxiegogo/macbook_128px_1225720_easyicon.net.ico"; document.getElementsByTagName("head")[0].appendChild(linkObject); </script>
访客来源统计1
这个放在侧边栏，列表式的。
不过和flag counter不一样（flag counter被博客园禁用了）
从下面的这个网站获取代码后粘贴到侧边栏
访客来源统计2
一个小地球，个人感觉放在页脚好看一些。
从下面的这个网站获取代码后粘贴到页脚
随笔分类空隙修改
定制左侧随笔分类上下项之间的间距，左侧随笔分类显示有多少项，你就在后面增加多少项
粘贴到css：
/* 定制左侧随笔分类上下项之间的间距，左侧随笔分类显示有多少项，你就在后面增加多少项 */ #CatList_LinkList_0_Link_0{ } #CatList_LinkList_0_Link_1{ margin-top:10px; } #CatList_LinkList_0_Link_2{ margin-top:10px; } #CatList_LinkList_0_Link_3{ margin-top:10px; } #CatList_LinkList_0_Link_4{ margin-top:10px; } #CatList_LinkList_0_Link_5{ margin-top:10px; } #CatList_LinkList_0_Link_6{ margin-top:10px; } #CatList_LinkList_0_Link_7{ margin-top:10px; } #CatList_LinkList_0_Link_8{ margin-top:10px; } #CatList_LinkList_0_Link_9{ margin-top:10px; } #CatList_LinkList_0_Link_10{ margin-top:10px; } #CatList_LinkList_0_Link_11{ margin-top:10px; } #CatList_LinkList_0_Link_12{ margin-top:10px; } #CatList_LinkList_0_Link_13{ margin-top:10px; } #CatList_LinkList_0_Link_14{ margin-top:10px; }
看板娘
可爱的看板娘
每天打开博客看到她心情好极了
这个较为复杂，详情看这位大佬的博客
https://www.cnblogs.com/kousak/p/9726514.html
日历美化
让日历更好看一些
粘贴到css
评论区带头像并且支持旋转
评论区不再单调
1.将代码粘贴到css框
.feedbackCon img:hover { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); } .feedbackCon img { border-radius: 40px; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
2.建立一个名为Comments.js的文件（粘贴到记事本，其中txt的后缀名也要更改）
3.将下面代码粘贴到Comments.js文件中并保存
function customTimer(inpId, fn) { if ($(inpId).length) { fn(); } else { var intervalId = setInterval(function () { if ($(inpId).length) { //如果存在了 clearInterval(intervalId); // 则关闭定时器 customTimer(inpId, fn); //执行自身 } }, 100); } } //添加 评论区的 形象照 function addImage() { var spen_html = "<span class='bot' ></span> <span class='top'></span>"; $(".blog_comment_body").append(spen_html); $(".blog_comment_body").before("<div class='body_right' style='float: left;'><a target='_blank'><img /></a></div>"); var feedbackCon = $(".feedbackCon").addClass("clearfix"); for (var i = 0; i < feedbackCon.length; i++) { var span = $(feedbackCon[i]).find("span:last")[0].innerHTML || "http://pic.cnitblog.com/face/sample_face.gif"; $(feedbackCon[i]).find(".body_right img").attr("src", span); var href = $(feedbackCon[i]).parent().find(".comment_date").next().attr("href"); $(feedbackCon[i]).find(".body_right a").attr("href", href); } } //页面加载完成是执行 $(function () { //添加 评论区的 形象照 customTimer(".blog_comment_body", addImage); });
4.将这个文件上传到博客园后台的文件中
5.页脚粘贴如下代码，并写上你的地址
<script type="text/javascript" src="http://files.cnblogs.com/files/自己的博客名称/Comments.js"></script>
可能有一点麻烦~
炫酷的支持与反对
在页面的有下角会显示支持与反对的悬浮窗
把下面的代码粘贴到css框中
/*推荐和反对*/ #div_digg { padding: 10px; position: fixed; _position: absolute; z-index: 1000; bottom: 20px; right: 0; _right: 17px; border: 1px solid #D9DBE1; background-color: #FFFFFF; filter: alpha(Opacity=80); -moz-opacity: 0.8; opacity: 0.8; } .icon_favorite { background: transparent url('http://files.cnblogs.com/files/jackson0714/kj.gif') no-repeat 0 0; padding-left: 16px; } #blog_post_info_block a { text-decoration: none; color: #5B9DCA; padding: 3px; }
博客园背景鼠标跟随线条
页面背景会有线条跟着鼠标跑
把下面的代码粘贴到页首中
<canvasid="c_n9"width="1920"height="990"style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas> <scriptsrc="https://files.cnblogs.com/files/siwuxie095/canvas-nest.min.js"></script>
博客园隐藏反对按钮
维护自尊心，诶嘿嘿~
粘贴到css框中
/* 隐藏反对按钮 */
.buryit {
display:none;
}
博客园禁止复制粘贴（不包括代码）
就在刚才，我在某度引擎搜索了我的这篇博客，发现有很多人在没有通知我的情况下盗取了我的文章。
我很气愤，为了维护个人正当权益，我决定加入这个代码，有需要的可以拿走！
在页首添加如下代码
<script language="Javascript"> document.body.onselectstart = document.body.ondrag = function(){return false;} </script>
博客园新型皮肤（各位大佬制作的！）
这些皮肤是现成的，不推荐私自更改，如有能力可以尝试。
我的皮肤模板
如果想采用我的主博客的皮肤的基本模板的话就去这里看一看吧！
具体的下载、操作请去他的博客查看https://www.cnblogs.com/netube/p/10160706.html
由BNDong大佬制作的皮肤
具体的下载、操作请去他的博客查看https://github.com/BNDong/Cnblogs-Theme-SimpleMemory。
我的附属博客就是采用他的皮肤，十分好看，作者持续更新！
由GShang制作的bili皮肤
具体的下载、操作请去他的博客查看https://www.cnblogs.com/gshang/p/biliTheme.html。
这个博客也很好看的，作者持续更新！
atum皮肤
具体的下载、操作请去他的博客查看https://www.cnblogs.com/cjunn/#/cnblog/works/article/12436930
这个博客看起来很充实，电脑端手机端的侧边栏采取不一样的形式，喜欢可以按照教程制作。
作者持续更新！
由DIY狂魔大佬制作的awesCnb皮肤
具体的下载、操作请去他的博客查看https://www.cnblogs.com/guangzan/p/12256583.html
你可以在本文的评论区见到这位大佬！
这个皮肤十分清新，色彩艳丽，舒服养眼！
我目前尚不确定是不是这位大佬把皮肤发在bilibili中。
后记
就说到这里，未完待续，如果对你有一点小小的帮助的话，点个赞和关注吧。
在后面如果允许的话我会逐渐加入图片的，有兴趣的可以持续关注