寫在前面
擁有博客僅僅只是開始，后續該怎樣美化博客？怎樣使博客更有個性？這都需要我們一點點去做。由此，我總結出了一些方法，希望能對你有所幫助。我們將以博客園美化來教你怎樣自定義博客，使它看起來更加的個性化。
一，准備工作
我的皮膚選擇的是SimpleMemory，本文也將選用這種主題進行美化。
皮膚預覽圖
選擇好了皮膚，一定不要忘記申請JS權限，動態背景和音樂等操作都需要通過JS實現。
在博客側欄公告里把JS權限申請下來，這是已經申請通過的。至此，准備工作就做完了。
二，添加動態背景（Canvas）
定義背景一定要有樣式，下面的樣式代碼插入頁面定制CSS代碼
#c{ position: fixed; top:0; left: 0; z-index:-1; opacity:0.8;
}
有了樣式一定就要有一個控件在頁首，下面的控件代碼要插入頁首Html代碼
<canvas id="c"></canvas>
這css和html已經就緒了就要考慮JS里的文件了，這就是我讓你提前申請JS權限的原因，由於使用的是canvas方法，這個是html5里的方法，接下來通過canvas實現動態背景圖。這里有和的背景一樣的已經寫好的腳本，可以直接配合使用，canvas制作的背景圖有很多，例如櫻花雨和煙花雨的都有，替換語句里src這個腳本的鏈接就可以，腳本代碼同樣要插入頁首Html代碼中，要插入到控件代碼下面才能生效。
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/Steven-Tim/hk01.js" ></script>
全部代碼
1 //頁面定制CSS代碼 2 #c{position: fixed; top:0; left: 0; z-index:-1; opacity:0.8;} 3
4 //頁首Html代碼 5 <canvas id="c"></canvas>
6 <script type="text/javascript" src="https://blog-static.cnblogs.com/files/Steven-Tim/hk01.js" ></script>
效果圖
三，添加音樂控件（網易雲音樂）
先去網易雲音樂（https://music.163.com），搜索歌曲生成一個外鏈播放器。如果有版權保護就會生成失敗。
外鏈播放器有兩種，基於Html的iframe插件播放器和Flash的embed插件播放器。
因為博客園出於安全考慮已經禁用了iframe插件的插入，而embed插件在不是IE的瀏覽器上是不會自動加載的，iframe插件的好處是可以自定義播放器大小，而embed插件卻不能，那如何在博客園里使用iframe插件呢？經過查找與嘗試，找到了下面這種曲線完成的的方式，成功的插入了音樂控件。
定義插件要有樣式，下面的樣式代碼插入頁面定制CSS代碼
1 * { 2 margin: 0; 3 padding: 0; 4 border: 0; 5 } 6 #div_digg1 { 7 padding: 5px; 8 position: fixed; 9 _position: absolute; 10 z-index: 1000; 11 bottom: 5%; 12 left: 3.5%; 13 _left: 15px; 14 border: 0; 15 }
有了樣式一定就要有一個控件在頁腳，下面的控件代碼要插入頁腳Html代碼
1 <div id="div_digg1" align="center"><p id="bfq" ></p></div>
最后代碼最核心的部分就是這段JS代碼了，更換歌曲也很簡單，只要把src里的鏈接替換成和網易雲生成的src鏈接即可，但是要保證符號一致。
同樣也是插入頁腳Html代碼中，要插入到y控件代碼下面才能生效。
1 <script type="text/javascript">
2 var iii = document.createElement('iframe'); 3 iii.src = '//music.163.com/outchain/player?type=2&id=32465166&auto=1&height=66'; 4 iii.height = 86; 5 iii.width=280; 6 $("#bfq").after(iii); 7 </script>
全部代碼
1 //頁面定制CSS代碼 2 * { 3 margin: 0; 4 padding: 0; 5 border: 0; 6 } 7 #div_digg1 { 8 padding: 5px; 9 position: fixed; 10 _position: absolute; 11 z-index: 1000; 12 bottom: 5%; 13 left: 3.5%; 14 _left: 15px; 15 border: 0; 16 } 17 //頁腳Html代碼 18 <div id="div_digg1" align="center"><p id="bfq" ></p></div> 19 <script type="text/javascript"> 20 var iii = document.createElement('iframe'); 21 iii.src = '//music.163.com/outchain/player?type=2&id=32465166&auto=1&height=66'; 22 iii.height = 86; 23 iii.width=280; 24 $("#bfq").after(iii); 25 </script>
效果圖
這樣動態背景和音樂控件就可以添加到你的博客里了，下一篇個性化定義博客里要介紹怎樣實現鼠標點擊效果和頁首效果。