自定义博客园，个性导航二级下拉菜单，访客统计，侧边栏分享，文章目录自动生成，全局/文章返回顶部...

最新推荐文章于 2024-08-26 16:58:13 发布

weixin_34267123

最新推荐文章于 2024-08-26 16:58:13 发布

阅读量729

点赞数

文章标签： javascript php 操作系统 ViewUI

一、写在前面

　　两个月前，第一次接触博客园。突然有了归属感，因为这是免费的平台，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;
    width:100%;
    font: 16px Geneva, Arial, Helvetica, sans-serif;
    background: #5CACEE;
    border-radius: 3px;
    min-width: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;
    width: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;
    width: 160px;
}
#blog_nav .site-name a{
    width: 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;
    width: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">&nbsp;</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="#">其他 &raquo;</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 οnclick=\"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 οnclick=\"javascript:focusFunction();\" href=\"javascript:void(0);\" style=\"font-weight: bold; padding-left: 5px;\">快速评论</a>&nbsp;&nbsp;<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-->