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