一、写在前面
两个月前，第一次接触博客园。突然有了归属感，因为这是免费的平台，IT开发者热衷的地方。
博客园的功能挺多，可以自定义很多东西，可以加入CSS、JS代码，但是这需要申请。
最近，无意间看到一些博主的主页很牛掰，反观我的，顿时逊色万分。于是，就想着要自己定义美化我的博客，让它变得高大上。是的，功夫不负有心人，我找到方法了。而且重要的是，经过我自定义后的博客，顿时也变得那么的高大上。多说无益，看教程吧！
二、自定义添加、隐藏导航菜单，让其固定在顶端
（一）蓝色菜单导航
1、隐藏、固定不需要的导航（页面定制css代码）
/*隐藏 联系、管理、新随笔*/ #blog_nav_contact{ display: none; } #blog_nav_newpost{ display: none; } #blog_nav_admin{ display: none; }
/*导航固顶*/
#header {
position: fixed;
top: 0px;
z-index: 1030;
}
#main {
top: 40px;
}
2、结合1的css代码，使用JS脚本自定义添加导航菜单（首页html代码）
<!-- 导航 Button BEGIN --> <script> addNag("关于我","http://www.cnblogs.com/dinphy/p/5738269.html",3); addNag("My github","https://www.github.com/dinphy-dev",3); addNag("Linux","http://www.cnblogs.com/dinphy/category/845796.html",3); addNag("Windows","http://www.cnblogs.com/dinphy/category/847249.html",3); addNag("Android","http://www.cnblogs.com/dinphy/category/845797.html",3); addNag("日常小知识","http://www.cnblogs.com/dinphy/category/845922.html",3); addNag("业余小作","http://www.cnblogs.com/dinphy/category/853424.html",3); function addNag(linkName,linkHref,linkLocation){ //获得导航DOM对象 var _navigator = document.getElementsByTagName("ul")[0]; //创建导航无序列表中的li var _link = document.createElement("li"); var _a = document.createElement("a"); _a.class="menu"; _a.href= linkHref; var _text = document.createTextNode(linkName); _a.appendChild(_text); _link.appendChild(_a); //添加至指定的位置 var _lis = _navigator.getElementsByTagName("li"); if(linkLocation > _lis.length && linkLocation > 0){ _navigator.appendChild(_link); }else{ _navigator.insertBefore(_link,_lis[linkLocation-1]); } } </script>
（二）蓝色JS特效下拉菜单导航（支持三级、四级菜单导航）
1、页面定制css代码
/*隐藏 联系、管理、新随笔*/ #blog_nav_contact{ display: none; } #blog_nav_newpost{ display: none; } #blog_nav_admin{ display: none; } #header{ display: none; } /* blog_nav */ #main{ top: 40px; } /* navigation style */ #blog_nav{ height: 39px; 100%; font: 16px Geneva, Arial, Helvetica, sans-serif; background: #5CACEE; border-radius: 3px; min-500px; margin-left: 0px; padding-left: 0px; position:fixed; top:0px; z-index: 1000; } #blog_nav li{ list-style: none; display: block; float: left; height: 40px; position: relative; } #blog_nav li a{ padding: 0px 30px 0px 30px; margin: 0px 0; line-height: 40px; text-decoration: none; height: 40px; color: #FFF; text-shadow: 1px 1px 1px #66696B; } #blog_nav ul{ background: #f2f5f6; padding: 0px; border-bottom: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; border-left:1px solid #DDDDDD; border-radius: 0px 0px 3px 3px; box-shadow: 2px 2px 3px #ECECEC; -webkit-box-shadow: 2px 2px 3px #ECECEC; -moz-box-shadow:2px 2px 3px #ECECEC; 170px; } #blog_nav .site-name,#blog_nav .site-name:hover{ padding-left: 10px; padding-right: 10px; color: #FFF; background: url(#/logo.png) no-repeat 10px 5px; 160px; } #blog_nav .site-name a{ 129px; overflow:hidden; } #blog_nav li.shouye{ background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px; } #blog_nav li.shouye:hover { background: url(http://keleyi.com/keleyi/phtml/jqmenu/4/facebook.png) no-repeat 9px 12px #6495ED; } #blog_nav li.daohang:hover { background: #6495ED; } #blog_nav li:hover{ background: #010101; } #blog_nav li a{ display: block; } #blog_nav ul li { border-right:none; border-bottom:1px solid #DDDDDD; 170px; height:39px; } #blog_nav ul li a { border-right: none; color:#6791AD; text-shadow: 1px 1px 1px #FFF; border-bottom:1px solid #FFFFFF; } #blog_nav ul li:hover{background:#DFEEF0;} #blog_nav ul li:last-child { border-bottom: none;} #blog_nav ul li:last-child a{ border-bottom: none;} /* Sub menus */ #blog_nav ul{ display: none; visibility:hidden; position: absolute; top: 40px; } /* Third-level menus */ #blog_nav ul ul{ top: 0px; left:170px; display: none; visibility:hidden; border: 1px solid #DDDDDD; } /* Fourth-level menus */ #blog_nav ul ul ul{ top: 0px; left:170px; display: none; visibility:hidden; border: 1px solid #DDDDDD; } #blog_nav ul li{ display: block; visibility:visible; } #blog_nav li:hover > ul{ display: block; visibility:visible; }
2、结合1的css代码，使用JS脚本自定义添加二级导航菜单（首页html代码）
<!-- 导航 Button BEGIN --> <script type="text/javascript" src="http://files.cnblogs.com/files/dinphy/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#blo"+"g_nav li").hover( function () { $(this).children('ul').hide(); $(this).children('ul').slideDown('fast'); }, function () { $('ul', this).slideUp('fast'); }); }); </script> <ul id="blog_nav"> <li class="site-name"><a href="http://cnblogs.com/dinphy"> </a></li> <li class="shouye"><a href="http://cnblogs.com/dinphy"><span>首页</span></a></li> <li class="daohang"> <a href="http://www.cnblogs.com/dinphy/category/853424.html"><span>业余小作</span></a> <ul> <li><a href="#" title="原创的诗词和随笔">诗词杂文</a></li> <li><a href="#">生活日记</a></li> <li><a href="#">其他 »</a> <ul> <li><a href="#">one</a></li> <li><a href="#">two</a></li> </ul> </li> </ul> </li> <li class="daohang"> <a target="_blank" href="http://www.cnblogs.com/dinphy/category/845922.html"><span>日常小知识</span></a> <ul> <li><a href="#" target="_blank">办公技巧</a></li> <li><a href="#" target="_blank" title="一些比较有用的教程">WEB知识</a></li> </ul> </li> <li class="daohang"> <a target="_blank" href="http://www.cnblogs.com/dinphy/category/847249.html"><span>操作系统</span></a> <ul> <li><a href="http://www.cnblogs.com/dinphy/category/845797.html" >Android</a></li> <li><a href="http://www.cnblogs.com/dinphy/category/845796.html" title="Unbuntu/Mint及其他">Linux</a></li> </ul> </li> <li class="daohang"> <a target="_blank" href="http://www.cnblogs.com/dinphy/p/5738269.html"><span>关于我</span></a> </li> <li class="daohang"> <a target="_blank" href="https://www.github.com/dinphy-dev"><span>My Github</span></a> </li> </ul> <!-- 导航 Button end -->
二、文章目录自动生成（页脚html代码）
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <script type="text/javascript"> //生成目录索引列表 //实现在<div id="cnblogs_post_body">下插入我们拼接的动态目录html内容 function GenerateContentList() { var jquery_h3_list = $('#cnblogs_post_body h3');//查找div id="cnblogs_post_body"下所有的h3节点 if(jquery_h3_list.length>0) { var content = '<a name="_labelTop"></a>'; //锚(#_labelTop):回到目录, content += '<div id="navCategory">'; content += '<p style="font-size:16px"><b>要点导航</b></p>'; content += '<ul>'; for(var i =0;i<jquery_h3_list.length;i++) { //功能1 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);//在每个h3节点封装jQuery对象,然后在前面插入新生成的"回到目录"html //功能2 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')取到jQuery对象 { $($('#cnblogs_post_body')[0]).prepend(content);//推测:$('#cnblogs_post_body')[0]取到html元素,在封装成jQuery对象 } //在div id="cnblogs_post_body"下插入动态生成html } } GenerateContentList(); </script>
三、侧边栏分享按钮
<!-- 右侧分享按钮 Button BEGIN --> <script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?move=0" charset="utf-8"></script> <!-- JiaThis Button END -->
更多的样式，请移步：http://www.jiathis.com/
四、固定添加快速评论、返回顶部、加关注、赞成与反对
（一）全局返回顶部（页脚html代码）
<!--全局返回顶部 Begin-->
<script src="http://files.cnblogs.com/files/dinphy/jquery.yestop.js"></script>
<script type="text/javascript">
$("#yestop").yestop({
"yes_image": "http://files.cnblogs.com/files/dinphy/topback.gif"
, "yes_width": "54px", "yes_height": "54px"
,"yes_bottom":"150px","yes_right":"105px","yes_title":"返回顶部"
})
</script>
<!--全局返回顶部 Block End-->
（二）文章中返回顶部，快速评论，关注我
1、固定赞成与反对在右下角（页面定制css代码）
/*固定赞成与反对*/ #div_digg { position: fixed; bottom: 0px; right: 5px; padding: 8px 8px 8px 10px; background-color: #fff; border: 1px solid #D9DBE1; }
2、结合1的css代码，使用JS脚本添加快速评论、返回顶部、加关注（首页html代码）
<!-- 加关注、返回顶部与快速评论 Button BEGIN --> <script type="text/javascript"> function focusFunction(){ document.getElementById("tbCommentBody").focus(); } /*在div_digg中添加关注链接*/ var div_digg = document.getElementById("div_digg"); var my_div = document.createElement("div"); my_div.style.padding="0 0 5px 0"; my_div.innerHTML = "<a onclick="javascript:c_follow"+"();" href="javascript:void(0);" style="font-weight: bold; padding-left: 5px;">关注 dinphy</a>" div_digg.insertBefore(my_div,div_digg.firstChild); /*添加关注链接结束*/ /*添加评论快速入口*/ document.getElementById("digg_tips").innerHTML = "<a onclick="javascript:focusFunction();" href="javascript:void(0);" style="font-weight: bold; padding-left: 5px;">快速评论</a> <a href="#top" style="font-weight: bold; padding-left: 5px;">返回顶部</a>"; </script> <!-- 加关注、返回顶部与快速评论 Button END -->
五、添加博客访问流量站长统计（页脚html代码）
统计的代码需要到站长统计（http://web.umeng.com/main.php?spm=0.0.0.0.CicC0p&c=user&a=index）注册并填写你的网站信息，然后获取对应的代码，添加到后台即可。
<!-- 站长统计 BEGIN --> <div style="text-align:center"> <script type="text/javascript"> var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cspan id='cnzz_stat_icon_1260359385'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1260359385%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E")); </script> </div> <!-- 站长统计 END-->
OK,到此教程结束！如有更多好的东西，我会继续补上。