博客園美化指南

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

準備工作

• 首先你得有個cnblogs博客，自行註冊博客園。
• 申請js權限
• 插入相關代碼文件。

js權限申請，很關鍵！！！

• 登陸後依次點擊“我的博客” → “管理” → “設置”，在下拉後找到“博客側邊欄公告”，後方有一個“申請js權限”。
  

• 或者也可進博客園園子頁面(https://home.cnblogs.com/feed/all/)，髮狀態@博客園團隊，申請開通js權限。

• 也可發個郵件到[email protected]申請js權限。

• 申請時內容模板已爲你備好:

尊敬的博客園管理員：

本人請求申請開通js權限，希望能夠把博客修飾的漂亮點，點綴自定義js插件效果，希望管理員可以批准，多謝~

• 提交完申請，會彈出提示:

• JS權限申請已提交，待審覈。

• 剩下的就是耐心等待了，一般來說挺快就會通過。如果設置頁面上公告欄標題右側不存在“申請js權限”，說明已成功開通js權限。

博客美化

1. 上傳相關素材，傳入你想要的壁紙圖片到博客園，每張不能超過2M。先新建一個相冊，存入文件。
   

2. 上傳已封裝好的文件包

3. 這裏圖中文件包，只會用到一部分，相關文件包，在：
   鏈接：https://pan.baidu.com/s/1J8_P-lEhhk_lz7_RZix_Mg
   提取碼：mrc1 　
   

4. 選擇易修改的主題
   

補充

• 有些同學可能對下面這一步有疑惑：
  

• 原文中所指的上傳後的URL地址即在文件選項卡下右鍵你剛剛上傳的JS文件選擇複製鏈接地址所獲得的地址。

• 然後替換原腳本引用中的地址即可。
  

4. 頁面定製 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;
}

5. 粘貼進相應的位置後，自行更改以下文件鏈接。也可以點擊我的鏈接去自行下載。

<!--存放壁紙的鏈接地址-->
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;

6. 博客側邊欄公告（支持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>

7. 音樂的更改可以去網易雲音樂申請外鏈，然後更改我上面的音樂的代碼。
   

• 點擊後，選擇如下選項，複製代碼即可。因爲iframe插件好像在這裏使用不了。

8. 頁首 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圖標，自行更改裏面的鏈接-->　　

9. 頁腳 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>

10. 點擊保存！！！！很重要。
    

11. 成品！
    

12. 詳細教程

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