博客园美化大集合2020最新!不用担心失效问题!

前言

不少人说我的博客园布置得好,今天就发布一下我的博客园美化。

最近更新:2020年3月13日

在这里会有持续更新的内容,不必担心插件失效问题。

下面进入正文,希望对您有帮助。

样板:

我的主博客: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&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;"          width="240" height="160"><param name="movie"           value="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;"><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/[email protected]/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/[email protected]/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被博客园禁用了)

从下面的这个网站获取代码后粘贴到侧边栏

http://www.harlanc.vip/

访客来源统计2

一个小地球,个人感觉放在页脚好看一些。

从下面的这个网站获取代码后粘贴到页脚

https://www.revolvermaps.com/

随笔分类空隙修改

定制左侧随笔分类上下项之间的间距,左侧随笔分类显示有多少项,你就在后面增加多少项

粘贴到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

/* 公告栏日历样式设置 */  .Cal {      border: 1px solid #F5F5F5;      width: 190px;   /*日历宽度*/      font-family: Arial;      font-size: 13px;      margin-top: 10px;      margin-bottom: 10px;      height: 180px;      background-color: #F5F5F5;   /*日历背景颜色*/      margin-left: 0;  }  /*日历的第一行标题  年份/月份这一栏配置*/  .CalTitle {      background-color: #F5F5F5;      border-color: #adf;      font-family: Arial;      font-size: 14px;      color: #000;      margin-left: 0;      padding: 0;      height: 100%;      font-weight: bold;  }  /*日历的第二行  星期信息这一行配置*/  .CalDayHeader {      background-color: #F5F5F5;  }

点我展开

 博客园新型皮肤(各位大佬制作的!)

这些皮肤是现成的,不推荐私自更改,如有能力可以尝试。

由BNDong大佬制作的皮肤

具体的下载、操作请去他的博客查看https://github.com/BNDong/Cnblogs-Theme-SimpleMemory

我的附属博客就是采用他的皮肤,十分好看,作者持续更新!

我的附属博客

bili皮肤

具体的下载、操作请去他的博客查看https://www.cnblogs.com/gshang/p/biliTheme.html

这个博客也很好看的,作者持续更新!

后记

就说到这里,未完待续,如果对你有一点小小的帮助的话,点个赞和关注吧。