博客园页面美化

前言

个人不喜欢特别花里胡哨的样式，因此只是添加了几个常用的快捷功能。喜欢的朋友可以按照我的代码来自定义博客页面样式。

申请JS权限

重要提示：在进行美化之前首先需要申请JS权限，如图：

1. 点击设置

1. 点击下图红色框的位置申请JS权限

我这边已经申请过了，所以是显示的支持JS代码，如果你还没有申请需要先点击申请。

自动生成目录

页脚Html代码

<script type="text/javascript">
/*生成博客园目录
*/
var BlogDirectory = {/*获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）*/getElementPosition:function (ele) {        var topPosition = 0;var leftPosition = 0;while (ele){              topPosition += ele.offsetTop;leftPosition += ele.offsetLeft;        ele = ele.offsetParent;     }  return {top:topPosition, left:leftPosition}; },/*获取滚动条当前位置*/getScrollBarPosition:function () {var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;return  scrollBarPosition;},/*移动滚动条，finalPos 为目的位置，internal 为移动速度*/moveScrollBar:function(finalpos, interval) {// 若不支持此方法，则退出if(!window.scrollTo) {return false;}// 窗体滚动时，禁用鼠标滚轮window.onmousewheel = function(){return false;};// 清除计时if (document.body.movement) { clearTimeout(document.body.movement); } var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置var dist = 0; if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出window.onmousewheel = function(){return true;}return true; } if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离dist = Math.ceil((finalpos - currentpos)/10); currentpos += dist; } if (currentpos > finalpos) { dist = Math.ceil((currentpos - finalpos)/10); currentpos -= dist; }var scrTop = BlogDirectory.getScrollBarPosition();// 获取滚动条当前位置window.scrollTo(0, currentpos);// 移动窗口if(BlogDirectory.getScrollBarPosition() == scrTop)// 若已到底部，则解禁鼠标滚轮，并退出{window.onmousewheel = function(){return true;}return true;}// 进行下一步移动var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; document.body.movement = setTimeout(repeat, interval); },htmlDecode:function (text){var temp = document.createElement("div");temp.innerHTML = text;var output = temp.innerText || temp.textContent;temp = null;return output;},/*创建博客目录，id表示包含博文正文的 div 容器的 id，mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），interval 表示移动的速度*/createBlogDirectory:function (id, mt, st, interval){// 获取博文正文div容器var elem = document.getElementById(id);if(!elem) return false;// 获取div中所有元素结点var nodes = elem.getElementsByTagName("*");// 创建博客目录的div容器var divSideBar = document.createElement('DIV');divSideBar.className = 'uprightsideBar';divSideBar.setAttribute('id', 'uprightsideBar');var divSideBarTab = document.createElement('DIV');divSideBarTab.setAttribute('id', 'sideBarTab');divSideBar.appendChild(divSideBarTab);var h2 = document.createElement('H2');divSideBarTab.appendChild(h2);var txt = document.createTextNode('目录导航');h2.appendChild(txt);var divSideBarContents = document.createElement('DIV');divSideBarContents.style.display = 'none';divSideBarContents.setAttribute('id', 'sideBarContents');divSideBar.appendChild(divSideBarContents);// 创建自定义列表var dlist = document.createElement("dl");divSideBarContents.appendChild(dlist);var num = 0;//统计找到的mt和stmt = mt.toUpperCase();// 转化成大写st = st.toUpperCase();// 转化成大写//遍历所有元素结点for(var i=0; i<nodes.length; i++){if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)    {//获取标题文本var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签nodetext = nodetext.replace(/ /ig, "");//替换掉所有的 nodetext = BlogDirectory.htmlDecode(nodetext);//插入锚        nodes[i].setAttribute("id", "blogTitle" + num);var item;switch(nodes[i].nodeName){case mt:    //若为主标题 item = document.createElement("dt");break;case st:    //若为子标题item = document.createElement("dd");break;}//创建锚链接var itemtext = document.createTextNode(nodetext);item.appendChild(itemtext);item.setAttribute("name", num);item.onclick = function(){        //添加鼠标点击触发函数var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;};            //将自定义表项加入自定义列表中dlist.appendChild(item);num++;}}if(num == 0) return false; /*鼠标进入时的事件处理*/divSideBarTab.onmouseenter = function(){divSideBarContents.style.display = 'block';}/*鼠标离开时的事件处理*/divSideBar.onmouseleave = function() {divSideBarContents.style.display = 'none';}document.body.appendChild(divSideBar);}};window.onload=function(){/*页面加载完成之后生成博客目录*/BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);
}
</script>

页面定制CSS代码

/*生成博客目录的CSS*/
#uprightsideBar{font-size:14px;font-family:Arial, Helvetica, sans-serif;text-align:left;position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/top:400px;right:273px;width: auto;height: auto; 
}#sideBarTab{float:left;width:30px; border:1px solid #e5e5e5;border-right:none;text-align:center;background:rgb(238, 130, 238); /*目录字体在鼠标悬浮时的颜色*/
}#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;
}

返回顶部按钮

页面定制CSS代码：

#back-to-top {background-color: #00CD00;bottom: 0;box-shadow: 0 0 6px #00CD00;color: #444444;padding: 10px 10px;position: fixed;left: 50px;cursor: pointer;
}

页脚Html代码

<span id="back-to-top"><a href="#top">TOP</a></span>

推荐和反对

将下面的代码放到页面CSS代码区

/*推荐和反对*/
#div_digg {padding: 10px;position: fixed;_position: absolute;z-index: 1000;bottom: 20px;right: 273px;_right: 17px;border: 1px solid #D9DBE1;background-color: #FFFFFF;filter: alpha(Opacity=80);-moz-opacity: 0.8;opacity: 0.8;
}.icon_favorite {background: transparent url('http://files.cnblogs.com/files/jackson0714/kj.gif') no-repeat 0 0;padding-left: 16px;
}#blog_post_info_block a {text-decoration: none;color: #5B9DCA;padding: 3px;
}