博客美化之路

一直在美化自己的博客，但是看到别人比自己做的好的就想知道他们是怎么弄的。博客美化之路一直更新，希望把自己的博客做的更加艺术一些。

1 基本设置

本文是参照嘻哈烧饼和数据之巅 博文做出的总结。

若想尝试此样式的可以点击此处下载，另存为之后上传至你自己的博客园文件中，然后在 博客设置->设置->页首Html代码 中添加引用：

也可以复制下来粘贴到博客设置->设置->页面定制CSS代码，同样的效果。

"text/css" rel="stylesheet" href="https://files.cnblogs.com/files/mhq-martin/bundle-SimpleMemory-A5_v29.css"/>

2 自定义“推荐|反对”按钮

这个已经在上面的CSS样式里面，这里展示给大家一下代码。主要用fixed来约束此按钮的位置，将其置于屏幕右下角

#div_digg{
  position:fixed;
  bottom:5px;
  width:140px;
  right:30px;
  border:2px solid #085;
  padding:10px;
  background-color:#fff;
  opacity:0.3;
  border-radius:5px 5px 5px 5px !important;
  box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
  transition-duration: 0.5s;
}
#div_digg:hover{
  opacity:1;
}

3 自定义返回顶部小火箭

将下面的样式和Javascript直接复制到 博客设置->设置->页首Html代码：




"back-top" style="display:none">"#top">

4 添加博文目录

在 数据之巅 系列文章中介绍了两种形式的目录导航，按需索取即可。

将下面的Javascript直接复制到 博客设置->设置->页脚Html代码：

"viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

5 添加头像

侧边栏公告出显示自己的头像，首先将想要显示的图片上传至博客相册，然后将下面的引用复制到 博客设置->设置->博客侧边栏公告：

"http://images.cnblogs.com/cnblogs_com/mhq-martin/1211092/o_%e6%b3%b71.jpg" alt="mhq_martin的头像" class="img_avatar" width="250px" style="border-radius:50%">

6 添加自己的博客权限

 这个没有做好，希望博客园里的大神指导一下。

首先在博客设置->设置->页首Html代码：

然后每次写完博客后，再点击用HTML编写，末尾加上代码：

"container">

"leftContent">"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=747535597,1152462222&fm=27&gp=0.jpg" alt="" />


"rightContent">

友情提示


作者："http://www.cnblogs.com/mhq-martin/"> mhq_martin


博客园地址："http://www.cnblogs.com/mhq-martin/"> "color: red; font-size: xx-small;">http://www.cnblogs.com/mhq-martin/


本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

效果如图：

7 添加博客访问次数

在博客设置->设置->博客侧边栏公告添加：

8 添加动态日历

在博客设置->设置->博客侧边栏公告添加：


"http://www.blogclock.cn/swf/S100032437584a4-4.swf" Width="150px" Height="345px" type="application/x-shockwave-flash" quality="high" wmode="transparent">

9 添加qq加好友

在博客设置->设置->博客侧边栏公告添加：


"_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2713095133&site=qq&menu=yes">"0" src="http://wpa.qq.com/pa?p=1:2713095133:13" alt="有事您Q我" title="有事您Q我">

10 添加 Github 彩带

在博客设置->设置->页首Html代码添加：



"https://github.com/MartinWuQing">"position: absolute; top: 0; right: 0; border: 0; z-index: 999999999" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png">

11 爱心特效

鼠标点击页面出现爱心特效，可在博客设置页面博客侧边栏公告板块添加如下代码：

12 自己重新设置一下背景图片

要实现自定义图片即在后台【页面定制css代码】修改一段简短的代码即可

body { 
     background-color: #efefef;
     background-image: url(http://images.cnblogs.com/cnblogs_com/mhq-martin/1211149/o_timg.jpg);
     background-repeat: no-repeat; 
     background-attachment: fixed; 
     background-position: center 0; 
     background-size: cover; 
  }

 13 修改一级标题、二级标题样式

在博客设置->设置->页面定制CSS代码里面修改也可以：

14 评论区

1. 在页首HTML代码区中添加如下代码：

"text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/feedback.css">

2. 在页脚Html代码中添加如下JS代码：

3. 那就能看到仿微信聊天对话样式的评论区了，而且还有一个彩蛋是：鼠标经过评论区头像时，头像旋转。

15 小结

虽然没有像大神那样的前端技术，但是有一颗臭美的心，哈哈，再一次感谢博客园的大佬的帮助。这个博文系列将持续更新，进一步美化自己的博客，也进一步增强自己的前端技术。

参考链接：嘻哈烧饼  数据之巅  Zhaoxi Zhang

友情提示

作者： mhq_martin

博客园地址： http://www.cnblogs.com/mhq-martin/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

13前端博客美化

相关

标签