博客园添加和隐藏导航菜单

1. 方法一: 纯css

效果   

在'页面定制CSS代码'中添加, left和top根据自己的皮肤自己调节

.addNav {
  position: absolute;
  top: 70px;
  left: 535px
}

在'页首Html代码'中添加, 只需将href内容换为自己的

<div id="navigator" class="addNav">
  <ul id="navList" class="addNavList">
    <li><a id="blog_nav_js" class="menu" rel="nofollow" href="http://www.cnblogs.com/floraCnblogs/p/fl-cnblogs-menu.html">菜单整合</a></li>
  </ul>
</div>

2. 方法二: js

效果:

申请js权限
待成功后
在管理中的'页首Html代码'中添加:

<script>
    var navBar = document.getElementById('navList');
    function addNav(linkName, linkClassName, linkHref, linkLocation, isExternalLinks){
        var navigation = document.createElement("li");
        var navigationLink = document.createElement("a");

        navigationLink.class = "menu";
        navigationLink.id = linkClassName;
        navigationLink.href = linkHref;
        if (isExternalLinks) {
            navigationLink.target="_blank";
        }
        var navigationName = document.createTextNode(linkName);
        navigationLink.appendChild(navigationName);

        navigation.appendChild(navigationLink);
        var navigations = navBar.getElementsByTagName("li");
        if (linkLocation > navigations.length && linkLocation > 0){
            navBar.appendChild(navigation);
        } else {
            navBar.insertBefore(navigation, navigations[linkLocation-1]);
        }
    }
    addNav("导航整合","blog_nav_total","http://www.cnblogs.com/floraCnblogs/p/fl-cnblogs-menu.html", 8, false);
    addNav("我的GitHub","blog_nav_github","https://github.com/FloraLi", 9, true);
</script>

3. 隐藏已有菜单栏

博客园默认菜单栏为博客园,首页,新随笔,联系,订阅,管理
分别对应css为blog_nav_sitehome,blog_nav_myhome,blog_nav_newpost,blog_nav_contact,blog_nav_rss,blog_nav_admin

以订阅为例,
在设置中的'页面定制css代码'中添加

#navList #blog_nav_rss{
   display: none;
}

 

转载于:https://www.cnblogs.com/floraCnblogs/p/setting-cnblogs-menu.html