博客园定制化

设置博客主字体和风格

更改的地方如下代码，主要改的为字体换为了微软雅黑

body {
    font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 2;
    color: #555;
}

博客标题

更改的地方主要有:
1.重新改了一下标题的margin
2.设置居中 text-align：center
css代码如下

/*博客标题*/
#blogTitle h1 {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.5em;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;

}

.headermaintitle {
    display: inline-block;
    vertical-align: top;
    line-height: 36px ！calc;
    font-size: 26px;
    font-weight: normal;
   color:#fff !important;
    font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
}

侧边公告栏添加头像

1.上传图像到博客园
2.复制地址到页面html
3.添加样式，设置图像居中

<div class="head_img"><img width="120" height="120" alt="我的头像" src="https://pic.cnblogs.com/avatar/1240314/20171205182931.png" 
class="img_avatar">
</div>

css样式

.head_img{
	text-align: center;
	}

侧边公告栏添加时钟

复制如下代码到侧边栏

<div id="myTime"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="honehoneclock" align="center">
<param name="allowScriptAccess" value="always" />
<param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" /><embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="center" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></object>
</div>

侧边公告栏添加访问统计

访问flagcounter.com，定制想要的样式，复制代码到侧边栏、

<div>
<a href="https://info.flagcounter.com/r4Wp"><img src="https://s05.flagcounter.com/count/r4Wp/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_0/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
</div>

添加打赏功能

1.上传二维码图片到图床
2.复制图片链接，到代码中
3.复制代码到页首

<!--打赏 Start--> 
<script>
    window.tctipConfig = {
            staticPrefix: "http://static.tctip.com",
            buttonImageId: 5,
            buttonTip:    "dashang",
            list:{
                alipay: { qrimg: "http://p0adfcb65.bkt.clouddn.com/zhifubao.png"},
                weixin: { qrimg: "http://p0adfcb65.bkt.clouddn.com/weixin.png"},
            }
        };
</script>
 
<script src="http://static.tctip.com/js/tctip.min.js" />
<!--打赏 End-->

添加自定义导航栏

导航是参照大神的博客做的
代码如下：

<script>
addNag("书单","http://www.cnblogs.com/mrwuzs/p/8047039.html",3);
addNag("关于我","http://www.cnblogs.com/mrwuzs/p/8047056.html",3);function addNag(linkName,linkHref,linkLocation){
                //获得导航DOM对象
                var _navigator = document.getElementsByTagName("ul")[0];
                //创建导航无序列表中的li
                var _link = document.createElement("li");
                var _a = document.createElement("a");
                _a.class="menu";
                _a.href= linkHref;
                var _text = document.createTextNode(linkName);
                _a.appendChild(_text);
                _link.appendChild(_a);
                //添加至指定的位置
                var _lis = _navigator.getElementsByTagName("li");
                if(linkLocation > _lis.length && linkLocation > 0){
                    _navigator.appendChild(_link);
                }else{
                    _navigator.insertBefore(_link,_lis[linkLocation-1]);
                }
            }
</script>

Markdown样式代码行号、版权信息、章节目录等

此处参照优化博客
代码链接
将style.css的代码复制到博客园后台管理的页面定制CSS代码中。
将footer.js的代码复制到博客园后台管理的页脚Html代码中

侧边栏标题样式

SimpleMemory主题的侧边栏模块标题都只是空荡荡的一串文本,我们可以对其设置Padding/Margin/Border.比如博主右侧的侧边栏就进行了一些自定义设置.代码如下:

.catListTitle {
    margin-top: 21px;
    margin-bottom: 10.5px;
    text-align: left;
    border-left: 10px solid rgba(82, 168, 236, 0.8);
    padding: 10px 0 14px 10px;
    background-color: rgba(245,245,245,0.3);
}

更改推荐按钮

在博客园后台的“设置”-“页面定制CSS代码”中添加下面的代码：

<style type="text/css"> 
#div_digg{
  position:fixed;
  bottom:5px;
  140px;
  right:390px;
  border:2px solid #6FA833;
  padding:10px;
  background-color:#fff;
  border-radius:5px 5px 5px 5px !important;
  box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}
</style>

评论带图像

1.css代码

.feedbackCon img:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
 
.feedbackCon img {
border-radius: 40px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

2.上传js文件
js文件
3.添加js代码到页脚

<script type="text/javascript" src="http://files.cnblogs.com/files/自己的博客名称/Comments.js"></script>

添加地址栏logo

<script type="text/javascript" language="javascript">
　　//Setting ico for cnblogs
　　var linkObject = document.createElement('link');
　　linkObject.rel = "shortcut icon";
　　linkObject.href = "https://files.cnblogs.com/files/mrwuzs/favicon.ico";
　　document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>

分享按钮

进入博客园-管理-设置-页首Html代码，将生成的代码复制到页首Html代码

<!-- 分享 -->
<!-- JiaThis Button BEGIN -->
<script type="text/javascript" >
var jiathis_config={
    siteNum:15,
    sm:"copy,qzone,tsina,weixin,tqq,tsohu,renren,cqq,tieba,douban,kaixin001,t163,yixin,51,copy",
    summary:"",
    boldNum:6,
    showClose:true,
    shortUrl:false,
    hideMore:false
}
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?btn=r.gif&move=0" charset="utf-8"></script>
<!-- JiaThis Button END -->

canvas粒子时钟

实现原理

公告栏展示

　将canvas粒子时钟js部分封装为canvasTime.js，在公告栏添加如下代码，即可以实现在公告栏插入时钟的效果

<canvas id="canvas" style="100%;">当前浏览器不支持canvas，请更换浏览器后再试</canvas>
<script src="http://files.cnblogs.com/files/xiaohuochai/canvasTime.js"></script>