博客園定制化

設置博客主字體和風格

更改的地方如下代碼，主要改的為字體換為了微軟雅黑

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;
  width: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="width:100%;">當前瀏覽器不支持canvas，請更換瀏覽器后再試</canvas>
<script src="http://files.cnblogs.com/files/xiaohuochai/canvasTime.js"></script>