关于博客园的一些设置

　　今天看了http://www.cnblogs.com/luzhihua55/archive/2013/10/30/CustmerizeBlog.html

这位兄台的设置，觉得非常的阴吹思婷~ 有时间的话自己好好研究一下，虽然我不是学CSS的，但是我可以偷取别人的成果么，感觉自己坏坏滴，好的，直奔主题

1.首先我选的主题是LoveGiveHeart

2."通过CSS代码定制代码页面风格".  定制文章标题和文章内容的样式

　　1> 修改博客标题和副标题。通过F12查找到标题的id为“blogTitle”，所以将其字体改为segoe ui(Metro风格要求的字体)

#blogTitle{
    dipplay:inline-block;
    font-family:"Segoe UI Semibold","Segoe UI",Tahoma,Helvetica,sans-serif;
}

　　2>修改文章标题的样式

.postTitle{
    background-color:#4169E1;
    dipplay:inline-block;
    font-family:"Segoe UI Semibold","Segoe UI",Tahoma,Helvetica,sans-serif;
    font-size:16px;
    font-color:#ffffff;
}

.postTitle a{
    color:#ffffff !important;
}

　　3>修改文章内容的样式，将背景色设置成眼睛保护色

.postBody{
    background-color:#CCFFCC;
    font-family:"Segoe UI Semibold","Segoe UI",Tahoma,Helvetica,sans-serif;
    font-size:13px;
}
.postCon {
    background-color:#CCFFCC;
    font-family:"Segoe UI Semibold","Segoe UI",Tahoma,Helvetica,sans-serif;
    font-size:13px;
}

3.增加动画时钟，访问者分布图和微软翻译控件，将下列代码贴入“博客侧边栏公告（支持HTML代码”)

　　1>动画时钟

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

　　　　第四行中http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf是时间Flash的网 　　址，http://chabudai.sakura.ne.jp/blogparts/honehoneclock/下还有一些时间Flash，大家可选择。

　　　　1.1其他时间

　　　　当然网上还有很多时间的Flash代码，比如：

<embed width="180" height="180" align="middle" wmode="transparent" quality="high" src="http://images.cnblogs.com/cnblogs_com/csharp/clock.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">

　　　　大家还可以添加更多模块，比如天气、广告什么的。如果你发现别人博客中的模块比较漂亮，那么那就研究下那部分的HTML源码吧（FireBug或审查元素）。当然，简洁也是一种美，适度最好了

　　

　　2>访问者分布图

　　　　需要去http://www.clustrmaps.com/index.htm 这个网站注册自己的博客网址和帐户，然后把得到的代码贴入即可。注意博客园默认只支持HTML代码，JS代码会忽略。

　　3>微软翻译控件

　　　　参见http://www.cnblogs.com/luzhihua55/p/Translator.html

4.找到页脚html部分，粘贴进下面的代码：

<div class="scrollBtn" id="scrollBtn">
  <ul class="clearfix"><li class="sB-goTop" id="goTop" style="display: list-item;">
      <a href="#top" title="回顶部"></a>
    </li>
  </ul>
</div>
<script language="javascript" type="text/javascript">
  //生成目录索引列表
  function GenerateContentList() {
    var jquery_h3_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h4,只需要将这里的h4换掉即可
    if (jquery_h3_list.length > 0) {
      var content = '';
      content += '<div id="navCategory" style="background-color: #BDBDBD;padding:10px 5px;">';
      content += '<p style="font-size:18px;margin:0;line-height:30px;"><b>阅读目录</b></p>';
      content += '<ul>';
      for (var i = 0; i < jquery_h3_list.length; i++) {
        var go_to_top = '<div style="text-align: right;    text-align: right;height: 0;padding: 0;overflow: hidden;visibility: hidden;"><a name="_label' + i + '"></a></div>';
        $(jquery_h3_list[i]).before(go_to_top);
        var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
        content += li_content;
      }
      content += '</ul>';
      content += '</div>';
      if ($('#cnblogs_post_body').length != 0) {
        $($('#cnblogs_post_body')[0]).prepend(content);
      }
    }
  }
  GenerateContentList();
</script>

<!-- JiaThis Button BEGIN -->
<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?move=0" charset="utf-8"></script>
<!-- JiaThis Button END -->

这段js包含了返回顶部，分享组件以及博文页面生成目录的功能。需要注意的是这个生成目录的功能，它的原理是去博文里面寻找h2元素把它作为每一个目录项，所以你在编辑博客的时候，大的标题一定是要用h2，小的标题应该用h3，不能混用，推荐使用live writter编辑博客，在编辑的时候，它的标题2和标题3在源代码中显示的就是h2和h3