个性化定义博客园 (一)---基础准备以及添加动态背景和音乐控件

写在前面

      拥有博客仅仅只是开始，后续该怎样美化博客？怎样使博客更有个性？这都须要咱们一点点去作。由此，我总结出了一些方法，但愿能对你有所帮助。咱们将以博客园美化来教你怎样自定义博客，使它看起来更加的个性化。

一，准备工做

 

个人皮肤选择的是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

 

 

 

效果图

      这样动态背景和音乐控件就能够添加到你的博客里了，下一篇个性化定义博客里要介绍怎样实现鼠标点击效果和页首效果。