博客园定制化
设置博客主字体和风格
更改的地方如下代码，主要改的为字体换为了微软雅黑
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="https://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="https://files.cnblogs.com/files/xiaohuochai/canvasTime.js"></script>
