博客园样式自定义

　　博客园尽管有很多模板可以选择，来改变样式。但是已有的样式总有些不是太满意，然后也想尝试一下自己写样式的感觉。博客园登录之后，在设置中，可以写入htmlcssjs代码，来改变样式。

　　例如我的首页是这样的：

有以下几个修改：

1. 菜单栏去掉了默认的新随笔、管理、订阅等，增加了读书。
2. 增加了页面滚动，菜单栏不变。
3. 页面滚动后，增加了“返回顶部”按钮。
4. 页面展示区域变宽。
5. 公告栏，增加了图片和文字、链接。

只需要在博客侧边栏公告、页首Html代码等栏目中增加自己写的样式及html、js即可。CSS是后面的样式会覆盖前面的，要隐藏掉默认的菜单，设置菜单为display:none，即可。对应的元素id可以通过查看页面源代码获得。

这里贴出自己的样式。

1、博客侧边栏公告

　　图片是先长传到相册中，再写入图片链接即可。

<style type="text/css">
/*隐藏联系、订阅、新随笔菜单*/
#MyLinks1_ContactLink,#MyLinks1_Syndication,#MyLinks1_NewPostLink,#MyLinks1_Admin{
    display: none;
}
#navigator,#blogTitle,#main,#footer{width: 1100px;}

#mainContent{
    width: 850px;
}

#header {
    width: 100%;
        height: 40px;
    z-index: 100;
        position: relative;
    margin: 0 auto;
        background-color:#2175bc;
}

#navList li a:hover{
       background-color:#52BFF5;
    }

/*返回顶部按钮*/
#gotoTop {
    display: none;
    position: fixed;
    top: 90%;
    left: 97%;
    cursor: pointer;
    margin-top: -50px;
    margin-right: 20px;
    padding: 9px 4px;
    width: 20px;
    text-align: center;
    background: #fff;
    color: #fff;
    _position: absolute;
       background: #2175bc;
    _top: expression(documentElement.scrollTop + documentElement.clientHeight * 3/
        4 + "px");
}

#gotoTop.hover {
    background: #5CB542;
    color: black;
    text-decoration: none;
}

.aligncenter {
clear: both;
display: block;
margin:auto;
}
</style>

<div><img class="aligncenter" src="http://images.cnblogs.com/cnblogs_com/yangtze-yufei/860899/o_fishlog.png" alt="logo" /><div>
<p><span style="color:#F77908;">做一个有情怀的人。</span></p>
<a  class="menu" rel="nofollow" href="https://i.cnblogs.com/">博客管理</a></li>

2、页首Html代码

<script>
         $("#navList").append("<li><a  class='menu' href='http://www.cnblogs.com/yangtze-yufei/p/3564076.html'>读书</a></li>");

         //滚动，菜单栏不变
         // 定义菜单栏离页面顶部的距离，默认为100    
         var divOffsetTop = 100;
        //页面加载完之后，计算菜单栏到页面顶部的实际距离
        var divMenu = document.getElementById("header");
        divOffsetTop = divMenu.offsetTop;
        gotoTop();//加载“返回顶部按钮”
        $(window).scroll(function() {
            //滚动固定菜单栏
            // 计算页面滚动了多少（需要区分不同浏览器）    
            var topVal = 0;
            if (window.pageYOffset) {//这一条滤去了大部分， 只留了IE678    
                topVal = window.pageYOffset;
            } else if (document.documentElement.scrollTop) {//IE678 的非quirk模式    
                topVal = document.documentElement.scrollTop;
            } else if (document.body.scrolltop) {//IE678 的quirk模式    
                topVal = document.body.scrolltop;
            }
            if (topVal <= divOffsetTop) {
                divMenu.style.position = "";
            } else {
                divMenu.style.position = "fixed";
                                divMenu.style.top = 0;//清除掉滚动时top
            }
        });

　　function gotoTop(min_height) {
      // 预定义返回顶部的html代码，它的css样式默认为不显示
      var gotoTop_html = '<div id="gotoTop">返回顶部</div>';
      // 将返回顶部的html代码插入页面上id为page的元素的末尾
      $("body").append(gotoTop_html);
      $("#gotoTop").click(// 定义返回顶部点击向上滚动的动画
      function() {
        $('html,body').animate({
            scrollTop : 0
        }, 700);
       }).hover(// 为返回顶部增加鼠标进入的反馈效果，用添加删除css类实现
       function() {
        $(this).addClass("hover");
       }, function() {
        $(this).removeClass("hover");
       });
       // 获取页面的最小高度，无传入值则默认为600像素
       min_height ? min_height = min_height : min_height = 600;
       // 为窗口的scroll事件绑定处理函数
       $(window).scroll(function() {
          // 获取窗口的滚动条的垂直位置
          var s = $(window).scrollTop();
          // 当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐
          if (s > min_height) {
            $("#gotoTop").fadeIn(100);
          } else {
            $("#gotoTop").fadeOut(200);
          };
       });
    };
</script>

 其他修改方式：

1、设置中，禁用模板默认CSS

2、这时候博客就没有任何样式了，可以完全手写css，或者拷贝其他的css到页面定制CSS代码中。

代码高亮：

下载代码：syntaxhighlighter，解压后将shThemeRDark.css和shCoreRDark.css文件上传到博客园，或者选择想要的样式对应的 CSS 代码上传！

设置"页首Html代码"或者"页脚Html代码"，添加上面的两个css

<link type="text/css" rel="stylesheet" href="https://.../shCoreRDark.css"/>
<link type="text/css" rel="stylesheet" href="https://.../shThemeRDark.css"/>

直接插入代码就显示效果了，注意通过插入代码第二个实现

详细参考：

https://www.cnblogs.com/alex-bn-lee/p/8271044.html