美化博客园

 首先感谢林老师给我的代码，嘻嘻！！！

美化完毕后的效果如下：

章节1

章节1的内容

章节2

章节2的内容

章节3

章节3的内容

章节4

章节4的内容

 

美化的方法如下：

1. 开通js权限

管理-设置-博客侧边栏公告（支持HTML代码）（支持JS代码）  开通后就会显示（支持js代码）

2.添加css

管理-设置-页面定制CSS代码  粘贴以下的代码

<style type="text/css">
    #cnblogs_post_body
    {
        color: black;      
        font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
        font-size: 16px;
    }
    #cnblogs_post_body h1    {
        background: #2B6695;
        border-radius: 6px 6px 6px 6px;
        box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
        color: #FFFFFF;
        font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
        font-size: 27px;
        font-weight: bold;
        height: 41px;
        line-height: 37px;
        margin: 18px 0 !important;
        padding: 8px 0 5px 5px;
        text-shadow: 2px 2px 3px #222222;
    }
 #cnblogs_post_body h2{
        background: #2B6600;
        border-radius: 6px 6px 6px 6px;
        box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
        color: #FFFFFF;
        font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
        font-size: 17px;
        font-weight: bold;
        height: 29px;
        line-height: 27px;
        margin: 12px 0 !important;
        padding: 5px 0 5px 10px;
        text-shadow: 2px 2px 3px #222222;
    }
 #cnblogs_post_body h3{
        background: #4A708B;
        border-radius: 6px 6px 6px 6px;
        box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
        color: #FFFFFF;
        font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
        font-size: 16px;
        font-weight: bold;
        height: 24px;
        line-height: 23px;
        margin: 12px 0 !important;
        padding: 5px 0 5px 10px;
        text-shadow: 2px 2px 3px #222222;
    }
 #cnblogs_post_body h4{
        background: #4F4F4F;
        border-radius: 6px 6px 6px 6px;
        box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
        color: #FFFFFF;
        font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
        font-size: 13px;
        font-weight: bold;
        height: 24px;
        line-height: 23px;
        margin: 12px 0 !important;
        padding: 5px 0 5px 10px;
        text-shadow: 2px 2px 3px #222222;
    }
</style>

3.添加页脚html

管理-设置-页脚Html代码  粘贴以下的代码

<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList()
{
  var jquery_h3_list = $('#cnblogs_post_body h1,h2,h3,h4').not('.catListTitle').not('#blogTitle h1');//如果你的章节标题不是h4,只需要将这里的h4换掉即可
  if(jquery_h3_list.length>0)
  {
    var content = '<a name="_labelTop"></a>';
    content    += '<div id="navCategory">';
    content    += '<p style="font-size:25px"><b>阅读目录</b></p>';
    content    += '<ul>';
    for(var i =1;i<jquery_h3_list.length;i++)
    {
      var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
      $(jquery_h3_list[i]).before(go_to_top);
      var li_content = '<li><a href="#_label' + i + '"style="color: darkseagreen;text-decoration:none;font-size:18px">' + $(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>

4.效果监测

如上的例子   小标题用 标题3