個性化定義博客園 (一)---基礎準備以及添加動態背景和音樂控件

寫在前面

      擁有博客僅僅只是開始，後續該怎樣美化博客？怎樣使博客更有個性？這都須要咱們一點點去作。由此，我總結出了一些方法，但願能對你有所幫助。咱們將以博客園美化來教你怎樣自定義博客，使它看起來更加的個性化。

一，準備工做

 

個人皮膚選擇的是SimpleMemory，本文也將選用這種主題進行美化。

 

皮膚預覽圖

選擇好了皮膚，必定不要忘記申請JS權限，動態背景和音樂等操做都須要經過JS實現。

 

 

在博客側欄公告裏把JS權限申請下來，這是已經申請經過的。至此，準備工做就作完了。

二，添加動態背景（Canvas）

       定義背景必定要有樣式，下面的樣式代碼插入頁面定製CSS代碼

#c{ position: fixed; top:0; left: 0; z-index:-1; opacity:0.8;
}

View Code

 

       有了樣式必定就要有一個控件在頁首，下面的控件代碼要插入頁首Html代碼

<canvas id="c"></canvas>

View Code

 

        這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>

View Code

 

      所有代碼

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>

View Code

 

 

 

效果圖

三，添加音樂控件（網易雲音樂）

      先去網易雲音樂（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 }

View Code

 

      有了樣式必定就要有一個控件在頁腳，下面的控件代碼要插入頁腳Html代碼

1 <div id="div_digg1" align="center"><p id="bfq"  ></p></div>

View Code

 

      最後代碼最核心的部分就是這段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>

View Code

 

      所有代碼

 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>

View Code

 

 

 

效果圖

      這樣動態背景和音樂控件就能夠添加到你的博客裏了，下一篇個性化定義博客裏要介紹怎樣實現鼠標點擊效果和頁首效果。