我花里胡哨的博客园

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

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

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下面加了几个沟通方式像CSDN,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