博客园美化指南

贴出我的博客园地址：https://www.cnblogs.com/gh110/

准备工作

首先你得有个cnblogs博客，自行注册博客园。
申请js权限
插入相关代码文件。

js权限申请，很关键！！！

登陆后依次点击“我的博客” → “管理” → “设置”，在下拉后找到“博客侧边栏公告”，后方有一个“申请js权限”。
或者也可进博客园园子页面(https://home.cnblogs.com/feed/all/)，发状态@博客园团队，申请开通js权限。
也可发个邮件到[email protected]申请js权限。
申请时内容模板已为你备好:

尊敬的博客园管理员：

本人请求申请开通js权限，希望能够把博客修饰的漂亮点，点缀自定义js插件效果，希望管理员可以批准，多谢~

提交完申请，会弹出提示:
JS权限申请已提交，待审核。
剩下的就是耐心等待了，一般来说挺快就会通过。如果设置页面上公告栏标题右侧不存在“申请js权限”，说明已成功开通js权限。

博客美化

上传相关素材，传入你想要的壁纸图片到博客园，每张不能超过2M。先新建一个相册，存入文件。
上传已封装好的文件包
这里图中文件包，只会用到一部分，相关文件包，在：
链接：https://pan.baidu.com/s/1J8_P-lEhhk_lz7_RZix_Mg
提取码：mrc1 　
选择易修改的主题

补充

有些同学可能对下面这一步有疑惑：
原文中所指的上传后的URL地址即在文件选项卡下右键你刚刚上传的JS文件选择复制链接地址所获得的地址。
然后替换原脚本引用中的地址即可。

页面定制 CSS 代码，把以下代码粘贴进你的相应位置即可。当然里面的链接可以自行去下载上传更改为你的博客园文件存储地址。

/*雪花css*/
#Snow{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(255,255,240,0.1);
    pointer-events: none;
}

<!--屏蔽cnblogs广告-->
#site_nav_under {
display: none;
}
.c_ad_block, .ad_text_commentbox {
display: none;
margin: 0;
padding: 0;
}
#ad_under_google {
height: 0;
overflow: hidden;
}
#ad_under_google a {
display: none;
}
#home {
margin: 0 auto;
width: 75%;
min-width: 950px;
background-color: #fff;
padding: 30px;
margin-top: 30px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#home {
margin: 0 auto;
min-width: 1080px;
background-color: #fff;
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#blogTitle {
height: 60px;
clear: both;
}
#navigator {
font-size: 13px;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
height: 50px;
clear: both;
margin-top: 25px;
}
#blogTitle h2 {
font-weight: normal;
font-size: 18px;
font-size: 1.18571429rem;
line-height: 2.546153846;
color: #757575;
float: left;
}

body{
background-image:url("https://images.cnblogs.com/cnblogs_com/gh110/1666735/o_2003120547352423f7ed1fff2650989edbe71714f2ca.jpg");
background-repeat:no-repeat;
background-size：cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-attachment: fixed;
filter:alpha(opacity=90); -moz-opacity:0.9; -khtml-opacity: 0.9; opacity: 0.9;
cursor: url(https://files.cnblogs.com/files/gh110/cursor.ico),auto;
}

粘贴进相应的位置后，自行更改以下文件链接。也可以点击我的链接去自行下载。

<!--存放壁纸的链接地址-->
filter:alpha(opacity=90); -moz-opacity:0.9; -khtml-opacity: 0.9; opacity: 0.9;
 
<!--存放鼠标图表的链接地址-->
cursor: url(https://files.cnblogs.com/files/gh110/cursor.ico),auto;

博客侧边栏公告（支持HTML代码）（支持 JS 代码）注意更改链接地址！！！

<!-- 动态雪花飘落 -->
<div class="Snow">
    <canvas id="Snow"></canvas>
</div>
<script src="https://blog-static.cnblogs.com/files/gh110/snow.js"></script>
<!-- 音乐 -->
<embed src="//music.163.com/style/swf/widget.swf?sid=516650993&type=2&auto=1&width=320&height=66" width="340" height="86"  allowNetworking="all"></embed>

音乐的更改可以去网易云音乐申请外链，然后更改我上面的音乐的代码。

点击后，选择如下选项，复制代码即可。因为iframe插件好像在这里使用不了。

页首 HTML 代码

<!--导航logo -->
<script type="text/javascript" language="javascript">
　　var linkObject = document.createElement('link');
　　linkObject.rel = "shortcut icon";
　　linkObject.href = "https://images.cnblogs.com/cnblogs_com/gh110/1594163/o_200210085840543108.png";
　　document.getElementsByTagName("head")[0].appendChild(linkObject);
</script><br>
<!--这个是博客园的最上面的logo图标，自行更改里面的链接-->

页脚 HTML 代码

<!--心知天气网页调用源码-->
<div id="tp-weather-widget"></div>
  <script>
    (function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10)));
    window.SeniverseWeatherWidget('show', {
      flavor: "bubble",
      location: "WQRM38NMHR7P",
      geolocation: false,
      language: "zh-Hans",
      unit: "c",
      theme: "auto",
      token: "73d557f0-764f-4890-acf0-ceb9aeded57a",
      hover: "enabled",
      container: "tp-weather-widget"
    })
  </script>
  
<!--鼠标点击烟花特效-->
<script src="https://files.cnblogs.com/files/gh110/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

点击保存！！！！很重要。
成品！
详细教程

https://www.cnblogs.com/wkfvawl/category/1208226.html

可乐汉堡薯条？

发布了32 篇原创文章 · 获赞 15 · 访问量 1万+

私信关注

准备工作

js权限申请，很关键！！！

博客美化

补充

猜你喜欢