博客园样式自定义

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

　　例如我的首页是这样的：

有以下几个修改：

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

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

这里贴出自己的样式。

1、博客侧边栏公告

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

 1 <style type="text/css">
 2 /*隐藏联系、订阅、新随笔菜单*/
 3 #MyLinks1_ContactLink,#MyLinks1_Syndication,#MyLinks1_NewPostLink,#MyLinks1_Admin{
 4     display: none;
 5 }
 6 #navigator,#blogTitle,#main,#footer{width: 1100px;}
 7 
 8 #mainContent{
 9     width: 850px;
10 }
11 
12 #header {
13     width: 100%;
14         height: 40px;
15     z-index: 100;
16         position: relative;
17     margin: 0 auto;
18         background-color:#2175bc;
19 }
20 
21 #navList li a:hover{
22        background-color:#52BFF5;
23     }
24 
25 /*返回顶部按钮*/
26 #gotoTop {
27     display: none;
28     position: fixed;
29     top: 90%;
30     left: 97%;
31     cursor: pointer;
32     margin-top: -50px;
33     margin-right: 20px;
34     padding: 9px 4px;
35     width: 20px;
36     text-align: center;
37     background: #fff;
38     color: #fff;
39     _position: absolute;
40        background: #2175bc;
41     _top: expression(documentElement.scrollTop + documentElement.clientHeight * 3/
42         4 + "px");
43 }
44 
45 #gotoTop.hover {
46     background: #5CB542;
47     color: black;
48     text-decoration: none;
49 }
50 
51 .aligncenter {
52 clear: both;
53 display: block;
54 margin:auto;
55 }
56 </style>
57 
58 <div><img class="aligncenter" src="http://images.cnblogs.com/cnblogs_com/yangtze-yufei/860899/o_fishlog.png" alt="logo" /><div>
59 <p><span style="color:#F77908;">做一个有情怀的人。</span></p>
60 <a  class="menu" rel="nofollow" href="https://i.cnblogs.com/">博客管理</a></li>

2、页首Html代码

 1 <script>
 2          $("#navList").append("<li><a  class='menu' href='http://www.cnblogs.com/yangtze-yufei/p/3564076.html'>读书</a></li>");
 3 
 4          //滚动，菜单栏不变
 5          // 定义菜单栏离页面顶部的距离，默认为100    
 6          var divOffsetTop = 100;
 7         //页面加载完之后，计算菜单栏到页面顶部的实际距离
 8         var divMenu = document.getElementById("header");
 9         divOffsetTop = divMenu.offsetTop;
10         gotoTop();//加载“返回顶部按钮”
11         $(window).scroll(function() {
12             //滚动固定菜单栏
13             // 计算页面滚动了多少（需要区分不同浏览器）    
14             var topVal = 0;
15             if (window.pageYOffset) {//这一条滤去了大部分， 只留了IE678    
16                 topVal = window.pageYOffset;
17             } else if (document.documentElement.scrollTop) {//IE678 的非quirk模式    
18                 topVal = document.documentElement.scrollTop;
19             } else if (document.body.scrolltop) {//IE678 的quirk模式    
20                 topVal = document.body.scrolltop;
21             }
22             if (topVal <= divOffsetTop) {
23                 divMenu.style.position = "";
24             } else {
25                 divMenu.style.position = "fixed";
26                                 divMenu.style.top = 0;//清除掉滚动时top
27             }
28         });
29 
30 　　function gotoTop(min_height) {
31       // 预定义返回顶部的html代码，它的css样式默认为不显示
32       var gotoTop_html = '<div id="gotoTop">返回顶部</div>';
33       // 将返回顶部的html代码插入页面上id为page的元素的末尾
34       $("body").append(gotoTop_html);
35       $("#gotoTop").click(// 定义返回顶部点击向上滚动的动画
36       function() {
37         $('html,body').animate({
38             scrollTop : 0
39         }, 700);
40        }).hover(// 为返回顶部增加鼠标进入的反馈效果，用添加删除css类实现
41        function() {
42         $(this).addClass("hover");
43        }, function() {
44         $(this).removeClass("hover");
45        });
46        // 获取页面的最小高度，无传入值则默认为600像素
47        min_height ? min_height = min_height : min_height = 600;
48        // 为窗口的scroll事件绑定处理函数
49        $(window).scroll(function() {
50           // 获取窗口的滚动条的垂直位置
51           var s = $(window).scrollTop();
52           // 当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐
53           if (s > min_height) {
54             $("#gotoTop").fadeIn(100);
55           } else {
56             $("#gotoTop").fadeOut(200);
57           };
58        });
59     };
60 </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