草根IT对博客模板MaterialDesign的优化

 

  来源：原创    作者：大风    本文地址：http://www.cnblogs.com/caogenit/p/5891704.html

 

     刚刚注册博客园，找了好多模板都不大满意，最后找到了rocket1184兄共享的一个MaterialDesign风格模板，博文安装地址：http://www.cnblogs.com/rocket1184/p/material-cnblogs.html

     安装后接下来我开始优化这个模板成我自己喜欢的样子：

1. 首先我增加了一段CSS，主要可以去除广告、调整一些宽度

   .newsItem h3,#blog-calendar::before {margin:0;}
   h3.catListTitle{margin:0;}
   div#sidebar_myteams{display:none;}
   div#sidebar_recentcomments{display:none;}
   div#sideBarMain{width:325px;}
   .sidebar-block ul{padding-left:6px;}
   #main{width:1245px;}
   #sideBar{width:325px;}
   #ad_t2{display:none;}
   #ad_c1{display:none;}
   #ad_c2{display:none;}
   .c_b_p_desc{font-size: 14px;}
   .c_b_p_desc a{float: right;text-decoration: underline;}
   .postDesc{font-size: 14px;padding-left:15px;}
   .postDesc a{text-decoration: underline;padding-left:20px;}

   主要修改点：a、博客名称跟副标题的高度调整b、博客首页列表的字体大小进行了一些调整c、文章详情页面加宽了45px看起来d、隐藏了详情页面的广告内容
2. 然后我写了一个自己的固定格式的摘要

   摘要正文摘要正文摘要正文摘要正文摘要正文摘要正文摘要正文摘要正文摘要正文摘要正文摘要正文<br>
   <span style="font-size: 10px; color: red;">作者：桥帮主&nbsp;&nbsp; &nbsp;&nbsp;来源：原创</span>

   公草根IT的作者不是一个人，而是一个团队，因此我们在列表上增加了一个作者，只能从摘要下手了，效果如下图
3. 最后我自己增加了一个文章作者署名的模板

   <div>&nbsp;</div>
   <div class="cnblogs_code" style="border-top: #cccccc 1px solid; border-right: #cccccc 1px solid; border-bottom: #cccccc 1px solid; padding-left: 5px; border-left: #cccccc 1px solid; padding-right: 5px; background-color: #f5f5f5" align="left">
   &nbsp;&nbsp;来源：原创&nbsp;&nbsp;&nbsp;&nbsp;作者：大风&nbsp;&nbsp;&nbsp;&nbsp;本文地址：
   <a href="http://www.cnblogs.com/caogenit/p/5891704.html">
   http://www.cnblogs.com/caogenit/p/5891704.html
   </a>
   </div>
   <p>&nbsp;</p>

   是草根IT的作者不是一个人，而是一个团队，因此我们在每篇文章的开头增加了署名，效果如下图

   最后：为了避免rocket118兄更新了样式导致我的优化不生效，做个下载备份：MaterialCnblogs-master.zip