博客园美化

博客园美化

作者：凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/

首先应该获得JS权限，之后才能进行如下操作。

1. 小人时间

在“设置”->“博客侧边栏公告（支持HTML代码）（支持JS代码）”中写入

2. 博主头像以及个人信息

博主头像地址：凯鲁嘎吉的主页 - 博客园中右击鼠标，查看源代码，将头像的地址复制过来即可。

在“设置”->“页面定制CSS代码”中写入

img {
max-width:90%;
}

在“设置”->“博客侧边栏公告（支持HTML代码）（支持JS代码）”中写入

关于我：宅女宅出新高度~
联系我：[email protected]
Weibo：weibo.com/kailugaji

3. 背景鼠标点击动态线条

在“设置”->“博客侧边栏公告（支持HTML代码）（支持JS代码）”中写入

动态线条

 动态线条end

4. 页首个性签名

在“设置”->“页首Html代码”中写入

凯鲁嘎吉

用书写铭记日常，最迷人的不在远方

5. 鼠标点击彩色字体

在“设置”->“页脚Html代码”中写入

详见主页：凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/

6. 自动生成目录

在“设置”->“页脚Html代码”中写入

levels of contents

　　

 7. 回到顶部

样式一

在“设置”->“页面定制CSS代码”中写入

.returntop{
            height:85px;width:30px;background:deepskyblue;position: fixed;bottom:0;right:22px;
            text-align: center;color:white;cursor: pointer;border-radius:6px;font-size:16px;display:none;
        }

在“设置”->“博客侧边栏公告（支持HTML代码）（支持JS代码）”中写入

样式二

在“设置”->“页首Html代码”中写入

8. 美化博客内容

在“设置”->“页面定制CSS代码”中写入

/* 设置博客正文一二三级标题格式 */
/* 一级标题 */
#cnblogs_post_body h1 {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    color: black;
    margin: 10px 0;
}
/* 二级标题 */
#cnblogs_post_body h2 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
    color: whitesmoke;
    background-color: royalblue;
    margin: 10px 0;
}
/* 三级标题 */
#cnblogs_post_body h3 {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    color: whitesmoke;
    background-color: dimgrey;
}
/*  正文 */
#cnblogs_post_body p {
    font-size: 12pt;
}

9. 屏蔽广告

在“设置”->“页面定制CSS代码”中写入

/* adblock */
#ad_t2 {
    display: none;
}
.c_ad_block {
    display: none;
}

10. 添加版权信息

在“管理”->“博客签名”，进入到制作签名的页面。在“内容”的文本框输入如下信息并替换相应的文字

作者：凯鲁嘎吉
出处：http://www.cnblogs.com/kailugaji/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文链接，否则保留追究法律责任的权利。 

在“设置”->“页面定制CSS代码”中写入

#MySignature{　　
 border:solid 1px #E5E5E5;
 padding:10px;
 background:#E5EEF7 url(http://images.cnblogs.com/cnblogs_com/grenet/226272/o_o_o_info.png) no-repeat scroll 15px 50%;
 padding-left:80px;}

#MySignature div{
  line-height: 20px;
}

11. 推荐与反对框

在“设置”->“页面定制CSS代码”中写入

/*推荐和反对 粘在CSS框*/
#div_digg {
    padding: 10px;
    position: fixed;
    _position: absolute;
    z-index: 1000;
    bottom: 5px;
    right: 0;
    _right: 10px;
    border: 1px solid #D9DBE1;
    background-color: #FFFFFF;
    filter: alpha(Opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

.icon_favorite {
    background: transparent url('http://files.cnblogs.com/files/jackson0714/kj.gif') no-repeat 0 0;
    padding-left: 5px;
}

#blog_post_info_block a {
    text-decoration: none;
    color: #5B9DCA;
    padding: 3px;
}

12. 隐藏反对框

在“设置”->“页面定制CSS代码”中写入

.buryit { 
  display: none;
} 
.comment_bury {  
  display: none; 
}

13. 侧边栏小老鼠控件

在“设置”->“博客侧边栏公告（支持HTML代码）（支持JS代码）”中写入

14. 天气插件

注册心知天气账户，创建天气

自动生成安装代码

将其复制到“设置”->“页脚Html代码”中

　　

15. 音乐插件

在网易云音乐中搜索一首自己喜欢的音乐，生成外链播放器，复制代码即可。我选取的是Fade国风古典(Dodie Remix)

将代码复制到“设置”->“博客侧边栏公告（支持HTML代码）（支持JS代码）”中

最终效果如下所示，有一个缺陷：网易云音乐这个插件没法调整宽度，显示不完整。