html博客制作l代码,博客园博客排版（js样式实例）

昨天在博客园中看到一位大神发的博客园样式排版博客，我一看。妈呀，太漂亮了，二话不说赶快学起，昨天我花了一天的时间，终于把我的博客也弄得有一丢丢像样了，有好东西，当然要分享给各位；

大家如果想仔细研究每一个功能的实现就看一下大神的博客，想省事就看我的，简单，快捷，省事。当然我在他的基础上加了一些功能 如：背景音乐，背景图片，电子时间，鼠标点击特效等等

效果图如下：大家也可以访问我博客主页查看

博客排版

1.找到你博客的设置，位置如图

2.首先你得申请一下你博客园的js权限；

不申请，你们的js代码是没有用的，申请成功是这个样子的

3.找到页面定制CSS代码区域，勾选禁用默认CSS；

4.在里面粘贴下面代码css代码；

 

View Code

5.找到‘’博客侧边栏公告(支持HTML代码)(支持JS代码)‘’，在里面加入如下代码；

 

View Code

6.找到“页首Html代码”，加入下面的代码

 

View Code

7.找到“页脚Html代码”，加入下面的代码

 

View Code

8.点击保存，你的界面就将和我一样；

定制自己的界面

1.背景图片

在定制CSS代码区域，找到如下代码，将“https://files.cnblogs.com/files/clwydjgs/u%3D3285165615%2C2041443182%26fm%3D27%26gp%3D0.bmp”位置的代码更换为你想更改的“背景图片的地址”

body {

color: #000;

background: url(https://files.cnblogs.com/files/clwydjgs/u%3D3285165615%2C2041443182%26fm%3D27%26gp%3D0.bmp

) fixed;

background-size: 100%;

background-repeat: no-repeat;

font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;

min-height: 101%;

}

2.更换背景音乐

a.

在“博客侧边栏公告(支持HTML代码)(支持JS代码)”中找到如下代码；

b.

进入网易云官网，找到你想设置为背景音乐的音乐，点击"生成外链播放器"，假如是下面的这样子，说明要收费

c.

我们选择能够生成外链的歌曲，当然也可以选多首一起生成外链,就像这样

d.点击生成外链

我们选择flash插件的版本，粘贴HTML代码，替换我们找到的代码。大功告成。

9.15号以后，网易云音乐音乐也不予许设置外部链接。所以我又新弄了一个背景音乐如下：

3.替换右侧头像

a.

在“博客侧边栏公告(支持HTML代码)(支持JS代码)”中找到如下代码；

b.

将”https://files.cnblogs.com/files/clwydjgs/touxiang.bmp“替换成你头像的地址，将"https://www.cnblogs.com/clwydjgs/"替换为你点击头像想要链接的地址；

4.更换打赏里面的付款码

a.

在”页首Html代码“区域找到如下代码；

new tctip({

top: '20%',

button: {

id: 9,

type: 'dashang',

},

list: [

{

type: 'alipay',

qrImg: 'https://files.cnblogs.com/files/clwydjgs/zhifubao.bmp'

}, {

type: 'wechat',

qrImg: 'https://files.cnblogs.com/files/clwydjgs/weixin.bmp'

}

]

}).init()

b.

将自己的微信和支付宝的付款码，保存到网络上或者上传到文件中，如下(点击即可获取图片地址)

c.

将代码中的”https://files.cnblogs.com/files/clwydjgs/zhifubao.bmp“替换成你的支付宝付款码图片地址

将'https://files.cnblogs.com/files/clwydjgs/weixin.bmp'替换为你微信的付款码地址，大功告成

4.更换”置顶“图片

a.

在页面定制CSS代码区中找到如下CSS代码：

/*scroll to top*/

#scrollTop div{

left:0;

overflow:hidden;

position:absolute;

top:0;

width:149px;

margin:0;

padding:0

}

#scrollTop .level-2{

background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent;

display:none;

height:250px;

opacity:0;

z-index:1

}

#scrollTop .level-3{

background:none repeat scroll 0 0 transparent;

cursor:pointer;

display:block;

height:150px;

z-index:2

}

#scrollTop{ background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent;

cursor:default;

display:block;

height:180px;

overflow:hidden;

position:fixed;

right:0;

top:90%;

width:149px;

z-index:11;

margin:-125px 0 0;

padding:0

}

b.

跟换“http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png”和“http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png”为你想替换的图片的新地址

5.鼠标点击特效

在页首去加入下面代码

 

View Code

6.增加看板娘：

在博客侧边栏公告加入如下代码：

说了那么多，就是希望大家能够让自己的博客美观大方，谢谢大家，欢迎大家提意见。

欢迎大家关注公众号，不定时干货，只做有价值的输出

作者：Dawnzhang

出处：https://www.cnblogs.com/clwydjgs/p/9291283.html

版权：本文版权归作者

转载：欢迎转载，但未经作者同意，必须保留此段声明；必须在文章中给出原文连接；否则必究法律责任