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

写在前面

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

一，准备工作

 

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

 

      全部代码

//页面定制CSS代码
#c{position: fixed; top:0; left: 0; z-index:-1; opacity:0.8;}

//页首Html代码
<canvas id="c"></canvas>
<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代码

* {
    margin: 0;
    padding: 0;
    border: 0;
}
#div_digg1 {
    padding: 5px;
    position: fixed;
    _position: absolute;
    z-index: 1000;
    bottom: 5%;
    left: 3.5%;
    _left: 15px;
    border: 0;
}

 

      有了样式一定就要有一个控件在页脚，下面的控件代码要插入页脚Html代码

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

 

      最后代码最核心的部分就是这段JS代码了，更换歌曲也很简单，只要把src里的链接替换成和网易云生成的src链接即可，但是要保证符号一致。

      同样也是插入页脚Html代码中，要插入到y控件代码下面才能生效。

<script type="text/javascript">
var iii = document.createElement('iframe');
iii.src = '//music.163.com/outchain/player?type=2&id=32465166&auto=1&height=66';
iii.height = 86;
iii.width=280;
$("#bfq").after(iii);
</script>

 

      全部代码

//页面定制CSS代码
* {
    margin: 0;
    padding: 0;
    border: 0;
}
#div_digg1 {
    padding: 5px;
    position: fixed;
    _position: absolute;
    z-index: 1000;
    bottom: 5%;
    left: 3.5%;
    _left: 15px;
    border: 0;
}
//页脚Html代码
<div id="div_digg1" align="center"><p id="bfq"  ></p></div>
<script type="text/javascript">
var iii = document.createElement('iframe');
iii.src = '//music.163.com/outchain/player?type=2&id=32465166&auto=1&height=66';
iii.height = 86;
iii.width=280;
$("#bfq").after(iii);
</script>

 

效果图

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