为博客添加目录

主要参考来源：http://www.cnblogs.com/xuehaoyue/p/6650533.html#_labelTop

---

 

---

 在文章左边角添加目录导航

　　1. 申请开通js权限

　　　　 默认是不支持，需要打开博客园后台，进入“设置”标签页，点击“申请开通js权限”，并注明用途

　　　 如果想加快申请速度，也可以再向官方发个邮件（邮箱是contact@cnblogs.com），邮件也需要注明用途，快的话1小时就能搞定了

　　2. 添加css代码到“页面定制CSS代码”

/*生成博客目录的CSS*/
#uprightsideBar{
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    text-align:left;
    position:fixed;/*将div的位置固定到距离top:50px，left:0px的位置，这样div就会处在最左边的位置，距离顶部50px*/
    top:320px;
    left:0px;
    width: auto;
    height: auto; 
}
#sideBarTab{
    float:left;
    width:30px; 
    border:1px solid #e5e5e5;
    border-right:none;
    text-align:center;
    background:#ffffff;
}

#sideBarContents{
    float:left;
    overflow:auto; 
    overflow-x:hidden;!important;
    width:200px;
    min-height:108px;
    max-height:460px;
    border:1px solid #e5e5e5;
    border-right:none; 
    background:#ffffff;
}
#sideBarContents dl{
    margin:0;
    padding:0;
}

#sideBarContents dt{
    margin-top:5px;
    margin-left:5px;
}

#sideBarContents dd, dt {
    cursor: pointer;
}

#sideBarContents dd:hover, dt:hover {
    color:#A7995A;
}
#sideBarContents dd{
    margin-left:20px;
}
/*以上是博客导航目录的样式-----------------------------------------------------------------------------------------------------------------------*/

View Code