我花里胡哨的博客园

之前一直使用的是优快云，因为优快云下资源方便，找资料就看博客园，前不久注册了一个博客园账号，就是这个，我只有一个想法‘技术大佬不在意表面注重内涵’...

我是一个水技术员还在学习中，所以我觉得还是应该自定义博客园，所以我现在的博客园就花里胡哨的。

1.页头的背景图片轮播

（1）

首先要做的是引用轮播的JS

但是需要注意的是不能写在--页首Html代码--这个里面因为页首Html代码是通过ajax加载的，另外将js代码引用中的http://链接改为//链接，不然通过https访问时将无法加载

所以就写在--页脚Html代码--这个里面

如下：<script src="//cdn.bootcss.com/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>

（2）

然后就要写实现轮播的JS代码了

<script type="text/javascript" >
window.onload = function () {

$('#header').backstretch(["http://images.cnblogs.com/cnblogs_com/ZxtIsCnblogs/1106236/o_b2.jpg","http://images.cnblogs.com/cnblogs_com/ZxtIsCnblogs/1106236/o_b3.jpg","http://images.cnblogs.com/cnblogs_com/ZxtIsCnblogs/1106236/o_b4.jpg","http://images.cnblogs.com/cnblogs_com/ZxtIsCnblogs/1106236/o_b5.jpg"],
{fade: 1000, duration: 2000});
}

</script>

就像这样就可以实现页首背景图片，这些图片是在网上下载了上传到博客园相册的。差不多就这样吧，不过我还写了一点关于这个的CSS代码，自己调整的。

2.侧边栏的功能实现

（1）天气控件

其实这个很简单，就随便百度就会有很多，点进去还自带生成代码，这样吧这个代码复制了加到--博客侧边栏公告（支持HTML代码）--这个里面就行了

（2）我的一些沟通方式

我在公告div下面加了几个沟通方式像优快云，QQ，微博，其实这个很简单去网上找了一些图片放到了博客园的相册，然后就用<a>标签调转就行了，当然代码还是写在--博客侧边栏公告（支持HTML代码）--这个里面就行了

（3）音乐播放器

我是用的网易云，可以先把想实现的音乐加高歌单，然后播放，打开播放列表，会发现一个像铁链子一样的图标，这个就是生产外部链接，点击过后可以设置想显示的样式，将代码复制到--博客侧边栏公告（支持HTML代码）--这个里面就行了

（4）时间小人

我的日历上面有一个当前时间，这个也是一个控件，网上一搜一大堆的代码，所以请随意，代码还是写在--博客侧边栏公告（支持HTML代码）--这个里面就行了

PS：向DIV添加代码格式，如：

　var div= document.getElementById("div名称");

　var html=div.innerHTML;//这个div原本的代码，如果是直接替换代码可以不要这个
    div.innerHTML = "需要添加的HTML代码（注意：如果有引号”需要更改为\"这种形式）"+html;//在原本的代码前添加代码

3.页脚的浏览次数记录

这个是我在一个网站上生成的，那个网站你可以选择你喜欢的样式生成代码，直接复制到--页脚Html代码--这个里面就行了

点我进入网站

 

除了这些呢我还对我的一些小地方进行了调整，基本上就写的CSS代码了，可以自己修改。

 

PS:小菜一只，请多多指教，不管是什么只要肯花时间什么都可以实现

转载于:https://www.cnblogs.com/ZxtIsCnblogs/p/8297831.html