博客园除了有丰富的模板外，还支持定制CSS，支持添加侧边栏和底部html，在html中可以添加js，除部分特殊的js函数被禁用了外，基本jquery的函数都支持。
博客所用css（用less语法编写的），在后台设置->页面定制CSS代码中添加
1 @main-color: #efefef; 2 @top-color: #444; 3 @hlink-color : hsl(0, 0%, 0%); 4 @odd-hlink-color : lighten( @hlink-color,30%); 5 @hlink-hover-color : lighten(@top-color,80%); 6 @body-font-size : 14px; 7 @side-bar-width : 242px; 8 9 /* 基础元素开始 */ 10 hr { 11 margin-top: 20px; 12 margin-bottom: 20px; 13 border: 0; 14 border-top: 1px solid rgba(102, 128, 153, .45); 15 } 16 17 body { 18 background: url(http://files.cnblogs.com/files/lvyahui/b28.gif) repeat fixed; 19 text-shadow: .02em .02em .02em #3c3c3c; 20 font-size: 14px; 21 font-family: "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 22 } 23 24 /* 基础元素结束 */ 25 26 /* *div */ 27 #home { 28 border-radius: 0 0 8px 8px; 29 box-shadow: 0 16px 23px rgba(0, 0, 0, .5); 30 } 31 32 /* 头部 */ 33 #header { 34 position: relative; 35 margin-top: 1.5em; 36 padding-top: 2em; 37 border-radius: 8px; 38 background: @top-color; 39 } 40 41 #navList { 42 li { 43 a.menu { 44 margin: 18px 10px; 45 text-decoration: none; 46 } 47 a.menu:after { 48 position: absolute; 49 margin-left: 23px; 50 padding-top: 4px; 51 color: #fff; 52 content: "*"; 53 font-weight: 700; 54 } 55 a.menu:link, a.menu:visited, a.menu:active { 56 text-shadow: 1px 1px 1px lighten(@top-color,30%); 57 } 58 } 59 li:last-child { 60 a.menu:after { 61 content: ""; 62 } 63 } 64 li:nth-child(odd) { 65 a.menu { 66 color: @odd-hlink-color; 67 } 68 } 69 li:nth-child(even) { 70 a.menu { 71 color: @hlink-color; 72 } 73 } 74 li:hover { 75 background-color: @top-color; 76 a.menu { 77 color: @hlink-hover-color; 78 } 79 } 80 } 81 82 #navigator { 83 overflow: hidden; 84 margin-top: 10px; 85 height: auto; 86 background-color: @main-color; 87 li { 88 float: left; 89 overflow: hidden; 90 color: @main-color; 91 text-decoration: none; 92 margin-right: 10px; 93 margin-left: 10px; 94 height: 100%; 95 } 96 } 97 98 a#Header1_HeaderTitle { 99 color: #fafafa; 100 text-shadow: 1px 2px 8px #333; 101 letter-spacing: 0; 102 } 103 104 /* 头部结束 */ 105 /* 主体开始 */ 106 #main { 107 position: relative; 108 background-color: rgba(255, 255, 255, 1); 109 } 110 111 #mainContent { 112 background: 0; 113 } 114 115 #blogTitle h1 { 116 width: 100%; 117 a { 118 display: block; 119 height: 80px; 120 background: url(http://files.cnblogs.com/files/lvyahui/title.gif) no-repeat; 121 text-decoration: none; 122 text-transform: capitalize; 123 text-shadow: 2px 2px 8px #333; 124 font-weight: 400; 125 font-size: 0; 126 } 127 a:hover { 128 text-shadow: 0 0 30px #888; 129 animation: opaAnm 1s; 130 -webkit-animation: opaAnm 1s; 131 } 132 } 133 134 /* 文章正文开始 */ 135 #cnblogs_post_body { 136 p img { 137 max-width: 100% !important; 138 } 139 h2 { 140 text-align: center; 141 font-weight: 700; 142 font-size: 21px; 143 } 144 h2:after { 145 float: right; 146 margin: 0 auto; 147 padding: 5px 0; 148 width: 100%; 149 height: 10px; 150 background: url(http://files.cnblogs.com/files/lvyahui/bookmark-bottom.gif) 50% 50% no-repeat; 151 content: " "; 152 } 153 } 154 .postTitle { 155 padding: 10px 10px; 156 a:active, a:link, a:visited { 157 color: #222; 158 } 159 border-left: 8px solid @main-color; 160 } 161 #topics h1.postTitle{ 162 padding-left:10px; 163 } 164 .postBody { 165 font-size: 14px; 166 blockquote { 167 margin: 0 0 15px; 168 padding: 15px 20px; 169 min-height: initial; 170 border: 0 @main-color; 171 border-left: 8px solid; 172 background-color: rgba(102, 128, 153, .05); 173 font-size: 14px; 174 line-height: normal; 175 } 176 } 177 .cnblogs-markdown code { 178 padding: 2px 4px; 179 border-radius: 4px; 180 background: #f9f2f4 0 0; 181 color: #c7254e; 182 font-size: 90%; 183 } 184 span.cnblogs_code_copy > a:link, span.cnblogs_code_copy > a:link > img { 185 padding: 1px 4px; 186 background: 0 0 !important; 187 } 188 .cnblogs_code { 189 padding: 1px; 190 border-radius: 5px; 191 background-color: #999; 192 pre, span { 193 font-family: Consolas, "DejaVu Sans Mono", "Microsoft Yahei Mono", serif !important; 194 } 195 pre { 196 padding-left: 3px; 197 background-color: #fff; 198 } 199 .code_img_closed, .code_img_opened { 200 padding: 2px 12px; 201 } 202 .cnblogs_code_toolbar { 203 display: none; 204 margin: 0; 205 background-color: #ccc; 206 } 207 } 208 /* 文章正文结束 */ 209 210 211 .topicListFooter { 212 margin-top: 2em; 213 margin-bottom: 3em; 214 } 215 /* 主体结束 */ 216 217 218 219 /* 博文统计信息 */ 220 .postDesc { 221 a:active, a:link, a:visited { 222 color: #666; 223 } 224 a:hover { 225 color: @top-color; 226 } 227 } 228 229 /* 侧边栏开始 */ 230 #blog-sidecolumn .catListTitle, .catListArticleArchive h3, .catListComment h3, .catListEssay h3, .catListFeedback h3, .catListImageCategory h3, .catListLink h3, .catListNoteBook h3, .catListPostArchive h3, .catListPostCategory h3, .catListTag h3, .catListView h3, .mySearch h3, .newsItem .catListTitle { 231 border: none; 232 background: 0; 233 } 234 235 /* 个人信息和公告 */ 236 #profile_block { 237 text-align: center; 238 } 239 div#profile_block > a { 240 color: @top-color; 241 } 242 243 div#p_b_follow > a, input.btn_my_zzk { 244 width: 70px; 245 height: 25px; 246 border: solid 1px #454545; 247 background: #454545; 248 background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#444444)); 249 background: -moz-linear-gradient(top, #454545, #444444); 250 color: #faddde; 251 font-weight: 700; 252 font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 253 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#444444'); 254 } 255 256 div#p_b_follow > a:hover, input.btn_my_zzk:hover { 257 background: @top-color; 258 background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#444444)); 259 background: -moz-linear-gradient(top, #454545, #444444); 260 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#444444'); 261 } 262 /* 关注按钮 */ 263 div#p_b_follow > a { 264 float: right; 265 margin-top: 4px; 266 padding: 1px 4px; 267 width: 245px !important; 268 border-radius: 4px; 269 text-decoration: none; 270 } 271 272 /* 日历 */ 273 // 将日历隐藏 274 div#blog-calendar{ 275 display: none; 276 table{ 277 display: none; 278 } 279 } 280 .CalTodayDay { 281 color: @top-color; 282 } 283 284 .CalTitle { 285 background: 0; 286 } 287 288 /* 输入搜索框开始 */ 289 div#sidebar_search_box{ 290 padding-left:18px; 291 292 } 293 input.input_my_zzk { 294 width: 100%; 295 height: 32px; 296 border: 0; 297 box-shadow: inset 1px 1px 11px rgba(0, 0, 0, .3); 298 font-size: 16px; 299 } 300 301 input#google_q, input#q { 302 padding: 3px; 303 width: 168px; 304 outline: 0; 305 border: 1px solid #eee; 306 font-weight: 700; 307 font-size: 12px; 308 font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 309 } 310 311 input#google_q:focus, input#q:focus { 312 outline-style: none; 313 border-color: #E73434; 314 } 315 /* 输入搜索框结束 */ 316 317 318 .catListTag > ul, .catListTag > ul > li { 319 float: left; 320 min-height: 22px; 321 } 322 323 .catListTag { 324 display: inline-block; 325 } 326 327 #sidebar_categories ul { 328 overflow: hidden; 329 > li { 330 float: left; 331 display: block; 332 width: 40%; 333 } 334 } 335 336 div.catListLink { 337 height: 80px; 338 ul li { 339 float: left; 340 } 341 } 342 343 div#sidebar_recentposts{ 344 a { 345 width:@side-bar-width; 346 text-overflow: ellipsis; 347 white-space: nowrap; 348 overflow: hidden; 349 display: block; 350 } 351 } 352 /*隐藏常用链接*/ 353 div#sidebar_shortcut{ 354 display: none; 355 } 356 /* 侧边栏结束 */ 357 358 /* 右侧浮动目录 */ 359 div#article-menu { 360 position: fixed; 361 top: 40%; 362 right: 0; 363 z-index: 1000; 364 > ul { 365 border-radius: 5px 0 0 5px; 366 background-color: rgba(255, 255, 255, .65); 367 box-shadow: 0 0 50px rgba(0, 0, 0, .5); 368 > li { 369 display: block; 370 overflow: hidden; 371 padding: 0 30px; 372 width: 100px; 373 text-overflow: ellipsis; 374 white-space: nowrap; 375 line-height: 26px; 376 cursor: pointer; 377 } 378 > li:hover, .current { 379 background-color: rgba(211, 211, 211, .65); 380 } 381 > li:last-child { 382 color: red; 383 } 384 } 385 } 386 387 /* 左侧浮动按键 */ 388 div#info { 389 position: fixed; 390 top: 40%; 391 padding: 3px; 392 width: 30px; 393 background-color: rgba(255, 255, 255, .65); 394 box-shadow: 0 0 50px rgba(0, 0, 0, .5); 395 > .icon { 396 float: right; 397 margin: 5px 7px; 398 > img { 399 width: 20px; 400 height: 20px; 401 border-radius: 3px; 402 } 403 } 404 } 405 406 /* 浮动点赞 */ 407 #div_digg { 408 position: fixed; 409 bottom: 0; 410 left: 0; 411 z-index: 200; 412 margin-left: 15px; 413 padding: 20px; 414 width: 115px; 415 border-radius: 5px; 416 background-color: rgba(255, 255, 255, .65); 417 box-shadow: 0 0 50px rgba(0, 0, 0, .5); 418 } 419 420 /* 顶部展示代码框 */ 421 #code { 422 position: absolute; 423 top: 11px; 424 right: 11px; 425 overflow-y: auto; 426 padding: 5px 15px; 427 width: 300px; 428 height: 115px; 429 outline: 0; 430 border-left: #ADADAD solid 30px; 431 border-radius: 0 8px 8px 0; 432 background: #fff; 433 box-shadow: inset 1px 1px 27px rgba(0, 0, 0, .3); 434 font-family: Consolas, serif; 435 .comments { 436 color: #3f7f5f; 437 } 438 .space { 439 margin-left: 7px; 440 } 441 .keyword { 442 color: #7f0055; 443 font-weight: 700; 444 } 445 .string { 446 color: #2a36ff; 447 } 448 .placeholder { 449 margin-left: 28px; 450 } 451 } 452 453 /* 底部 */ 454 #footer { 455 margin-top: 0; 456 padding-top: 15px; 457 padding-bottom: 15px; 458 border-radius: 0 0 8px 8px; 459 background: @top-color; 460 } 461 462 /* 动画效果 */ 463 464 @keyframes opaAnm { 465 from { 466 opacity: 1; 467 } 468 469 to { 470 opacity: .4; 471 } 472 } 473 474 @-moz-keyframes opaAnm { 475 from { 476 opacity: 1; 477 } 478 479 to { 480 opacity: .4; 481 } 482 } 483 484 @-webkit-keyframes opaAnm { 485 from { 486 opacity: 1; 487 } 488 489 to { 490 opacity: .4; 491 } 492 } 493 494 @-o-keyframes opaAnm { 495 from { 496 opacity: 1; 497 } 498 499 to { 500 opacity: .4; 501 } 502 } 503 504 /* 屏蔽广告 */ 505 #ad_c1, #ad_c2, #ad_t2, .c_ad_block, div#google_ad_c1 { 506 display: none; 507 } 508 509 #site_nav_under, div#google_ad_c2, div#google_ad_c3, div#under_post_kb, div#under_post_news { 510 display: none; 511 } 512 513 /* 已失效 */ 514 .diggit { 515 position: absolute; 516 top: 20px; 517 left: 20px; 518 width: 46px; 519 } 520 .entrylistPosttitle { 521 border-left: 5px solid @top-color; 522 } 523 524 a#MyLinks1_HomeLink { 525 display: none; 526 }
页脚html代码（含javascript代码），在后台设置->页脚Html代码中添加
1 <audio src='http://sc.111ttt.com/up/mp3/13271/EB90ADBD89F9FB0B477B5412674A9A96.mp3' id="music" loop="loop" preload="none" hidden="hidden"></audio> 2 <script> 3 (function(f){f.fn.jrumble=function(g){var a=f.extend({x:2,y:2,rotation:1,speed:15,opacity:false,opacityMin:0.5},g);return this.each(function(){var b=f(this),h=a.x*2,i=a.y*2,k=a.rotation*2,g=a.speed===0?1:a.speed,m=a.opacity,n=a.opacityMin,l,j,o=function(){var e=Math.floor(Math.random()*(h+1))-h/2,a=Math.floor(Math.random()*(i+1))-i/2,c=Math.floor(Math.random()*(k+1))-k/2,d=m?Math.random()+n:1,e=e===0&&h!==0?Math.random()<0.5?1:-1:e,a=a===0&&i!==0?Math.random()<0.5?1:-1:a;b.css("display")==="inline"&&(l=true,b.css("display","inline-block"));b.css({position:"relative",left:e+"px",top:a+"px","-ms-filter":"progid:DXImageTransform.Microsoft.Alpha(Opacity="+d*100+")",filter:"alpha(opacity="+d*100+")","-moz-opacity":d,"-khtml-opacity":d,opacity:d,"-webkit-transform":"rotate("+c+"deg)","-moz-transform":"rotate("+c+"deg)","-ms-transform":"rotate("+c+"deg)","-o-transform":"rotate("+c+"deg)",transform:"rotate("+c+"deg)"})},p={left:0,top:0,"-ms-filter":"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)",filter:"alpha(opacity=100)","-moz-opacity":1,"-khtml-opacity":1,opacity:1,"-webkit-transform":"rotate(0deg)","-moz-transform":"rotate(0deg)","-ms-transform":"rotate(0deg)","-o-transform":"rotate(0deg)",transform:"rotate(0deg)"};b.bind({startRumble:function(a){a.stopPropagation();clearInterval(j);j=setInterval(o,g)},stopRumble:function(a){a.stopPropagation();clearInterval(j);l&&b.css("display","inline");b.css(p)}})})}})(jQuery); 4 $.fn.typewriter=function(){this.each(function(){var d=$(this),c=d.html(),b=0;d.html("");var e=setInterval(function(){var f=c.substr(b,1);if(f=="<"){b=c.indexOf(">",b)+1}else{b++}d.html(c.substring(0,b)+(b&1?"_":""));if(b>=c.length){clearInterval(e)}},100)});return this}; 5 </script> 6 <script type="text/javascript" src="http://files.cnblogs.com/files/lvyahui/console.min.js"></script> 7 <script type="text/javascript" src="http://files.cnblogs.com/files/lvyahui/index.js"></script> 8 <script> 9 setTimeout(function(){ 10 $('#sideBar a').each(function(){$(this).attr('title',$(this).text())}); 11 },2000); 12 $('#navList').append('<li><a class="menu" target="_blank" href="http://movesun.com">我的网站</a></li>') 13 .append('<li><a class="menu" target="_blank" href="http://www.cnblogs.com/lvyahui/p/4009963.html">此博客制作</a></li>'); 14 (function($) { 15 $('.cnblogs_code').css('padding','1px 1px 1px 1px'); 16 function inView($ele){ 17 return $ele && $ele.offset().top + $ele.height() >= $(window).scrollTop() && 18 $ele.offset().top + $ele.height() < $(window).scrollTop() + document.documentElement.clientHeight 19 } 20 $(document).ready(function(){ 21 var cct = $('#code-ct'), 22 code = cct.html(); 23 cct.empty(); 24 $('#header').append(code); 25 var c = $('#code'); 26 c.show(); 27 c.typewriter(); 28 $('pre span').css('background','#fff'); 29 30 var $artMenu = $('#article-menu'), 31 $h2 = $('#cnblogs_post_body h2'), 32 $ul = $('<ul>'), 33 $body = $("html,body"), 34 $comment = $('#comment_form_container'), 35 $comLi = $('<li>'), 36 $current = false; 37 $h2.each(function(){ 38 var $h2i = $(this), 39 $li = $('<li>'); 40 $li.html($h2i.text()).attr('title',$h2i.text()); 41 $li.click(function(){ 42 $body.animate({scrollTop:$h2i.offset().top},600); 43 }) 44 $li.appendTo($ul); 45 $(window).scroll(function(){ 46 if(inView($h2i)){ 47 if($current != $h2i && !inView($current)){ 48 $li.addClass('current');$current = $h2i; 49 } 50 }else{ 51 if($h2i != $current){ 52 $li.removeClass('current'); 53 } 54 } 55 }); 56 }); 57 if($comment.size()){ 58 $comLi.html('留言评论').attr('title','留言评论'); 59 $comLi.click(function(){ 60 $body.animate({scrollTop:$comment.offset().top},600); 61 }); 62 $comLi.appendTo($ul); 63 } 64 $ul.appendTo($artMenu); 65 $artMenu.css('top',(document.documentElement.clientHeight - $artMenu.height())/2); 66 }); 67 })($ || jQuery); 68 (function(){ 69 window.onload = function(){ 70 var musicNode = document.getElementById('music'), 71 musicCtrl = document.getElementsByClassName('music-ctrl')[0], 72 playCtrl = musicCtrl.children[0], 73 resUrl = 'http://files.cnblogs.com/files/lvyahui/', 74 playImg = 'play2.ico', 75 stopImg = 'stop2.ico', 76 paddingImg = 'loading.ico'; 77 if(typeof musicNode.paused !== 'undefined'){ 78 // musicNode.src = ; 79 musicNode.volume = 0.3; 80 var lister, 81 padding = function () { 82 83 }, 84 play = function(){ 85 musicNode.play(); 86 if(musicNode.readyState !== 4){ 87 playCtrl.src = resUrl + paddingImg; 88 var lister = musicNode.addEventListener('canplaythrough',function(){ 89 playCtrl.src = resUrl + stopImg; 90 musicNode.removeEventListener('canplaythrough',lister); 91 },false); 92 } 93 else{ 94 playCtrl.src = resUrl + stopImg; 95 } 96 }, 97 pause = function () { 98 musicNode.pause(); 99 playCtrl.src = resUrl + playImg; 100 }; 101 musicCtrl.onclick = function(){ 102 if(musicNode.paused){ 103 play(); 104 }else{ 105 pause(); 106 } 107 }; 108 109 } 110 }; 111 })(); 112 </script>
其他地方也是类似。
另外如果文件没地方存放，可以在后台设置->文件 中上传就可以得到访问地址，如
点击就可以看到文件地址
http://files.cnblogs.com/files/lvyahui/qrcode_for_gh_e0e9b15ea93a_344.gif
参考文章