昨天在博客园中看到一位大神发的博客园样式排版博客，我一看。妈呀，太漂亮了，二话不说赶快学起，昨天我花了一天的时间，终于把我的博客也弄得有一丢丢像样了，有好东西，当然要分享给各位；
大神的链接：https://www.cnblogs.com/hafiz/p/9276689.html，里面讲的很细很细，每一个功能的讲解都有。
大家如果想仔细研究每一个功能的实现就看一下大神的博客，想省事就看我的，简单，快捷，省事。当然我在他的基础上加了一些功能 如：背景音乐，背景图片，电子时间，鼠标点击特效等等
效果图如下：大家也可以访问我博客主页查看
博客排版
1.找到你博客的设置，位置如图
2.首先你得申请一下你博客园的js权限；
不申请，你们的js代码是没有用的，申请成功是这个样子的
3.找到页面定制CSS代码区域，勾选禁用默认CSS；
4.在里面粘贴下面代码css代码；
1 @font-face { 2 font-family: 'FontAwesome'; 3 font-style: normal; 4 font-weight: normal; 5 src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format('truetype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg'); 6 } 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 body { 12 background: #eee; 13 color: #444; 14 font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; 15 font-size: 14px; 16 text-shadow: 0 0 1px transparent; 17 color:#505050; 18 } 19 @media screen and (max-width: 1260px) { 20 body { 21 margin: 0px; 22 } 23 } 24 @media screen and (max-width: 600px) { 25 body { 26 font-size: 13px; 27 } 28 } 29 h1,h2,h3,h4,h5,h6 { 30 font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; 31 } 32 h1 { 33 font-size: 1.8em; 34 } 35 h2 { 36 font-size: 1.5em; 37 } 38 h3 { 39 font-size: 1.3em; 40 } 41 a { 42 text-decoration: none; 43 color: #258fb8; 44 } 45 a:hover { 46 text-decoration: underline; 47 } 48 #home{ 49 margin: 0 auto; 50 width: 85%; 51 background-color: #fff; 52 padding: 30px; 53 margin-top: 50px; 54 margin-bottom: 50px; 55 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); 56 border-radius: 20px; 57 } 58 #tbCommentBody {width: 100%;} 59 #blogTitle {width:23%;margin-top: -10px;text-align: center;} 60 .alignright {float: right;} 61 #header, #main, #footer {width: 100%;margin: 0 auto;} 62 @media screen and (max-width: 1260px) { 63 #main { 64 width: 95%; 65 } 66 } 67 #mainContent { 68 width: 75%; 69 float: left; 70 margin-left: 10px; 71 } 72 @media screen and (max-width: 1260px) { 73 #main-col { 74 width: 100%; 75 margin-right: -300px; 76 } 77 } 78 @media screen and (max-width: 900px) { 79 #main-col { 80 margin-right: 0; 81 float: none; 82 } 83 } 84 @media screen and (max-width: 1260px) { 85 #wrapper { 86 margin-right: 300px; 87 } 88 } 89 @media screen and (max-width: 900px) { 90 #wrapper { 91 margin-right: 0; 92 } 93 } 94 #header { 95 text-shadow: 0 0 1px #fff; 96 margin: 20px auto 30px; 97 position: relative; 98 height: 60px; 99 color: #999; 100 } 101 #header a { 102 color: #999; 103 } 104 #header a:hover { 105 color: #258fb8; 106 text-decoration: none; 107 } 108 #header h1 { 109 font-weight: normal; 110 font-size: 30px; 111 } 112 #header h2 { 113 font-weight: normal; 114 font-size: 0.9em; 115 margin-top: 10px; 116 margin-left: 30px; 117 } 118 #header #navigator { 119 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 120 width: 100%; 121 font-size: 16px; 122 border-bottom: 1px solid #ededed; 123 border-top: 1px solid #ededed; 124 height: 50px; 125 line-height: 50px; 126 clear: both; 127 margin-top: 25px; 128 } 129 #header #navigator ul { 130 list-style: none; 131 } 132 #header #navigator ul li { 133 float: left; 134 width: 10%; 135 text-align: center; 136 margin-right: 15px; 137 } 138 #header .blogStats { 139 float: right; 140 font-size: 13px; 141 } 142 .topicListFooter { 143 margin-top:30px; 144 margin-bottom: 30px; 145 margin-right: 0 !important; 146 } 147 .topicListFooter a { 148 display: inline !important; 149 padding: 10px 20px; 150 background: #ddd; 151 color: #999; 152 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 153 text-shadow: 0 0 1px #fff; 154 border-radius: 5px; 155 } 156 .topicListFooter a:hover { 157 background: #258fb8; 158 color: #fff; 159 text-decoration: none; 160 text-shadow: none; 161 } 162 .topicListFooter .prev:before { 163 content: '\f053'; 164 padding-right: 10px; 165 font-family: FontAwesome; 166 } 167 .topicListFooter .next:after { 168 content: '\f054'; 169 padding-left: 10px; 170 font-family: FontAwesome; 171 } 172 article { 173 -webkit-box-shadow: 1px 2px 3px #ddd; 174 box-shadow: 1px 2px 3px #ddd; 175 background: #fff; 176 } 177 article.page { 178 padding-left: 20px; 179 } 180 article.page .icon { 181 display: none; 182 } 183 .postIcon:before { 184 content: '\f016'; 185 } 186 article.photo .icon:before { 187 content: '\f030'; 188 } 189 article.link .icon:before { 190 content: '\f0c1'; 191 } 192 article.link .title a:after { 193 content: '\f08e'; 194 color: #999; 195 font: 12px FontAwesome; 196 padding-left: 10px; 197 vertical-align: super; 198 } 199 /******************************************以下自定义样式***********************************************/ 200 #MySignature{ 201 border-top: 2px solid #ccc; 202 padding-top: 20px; 203 } 204 .pager{ 205 border-bottom: 1px dashed #ddd; 206 padding-bottom: 30px; 207 margin-bottom: -10px; 208 } 209 #blog-calendar{ 210 width:0px; 211 height:0px; 212 display: none !important; 213 } 214 #TopViewPostsBlock ul li{ 215 white-space: nowrap; 216 overflow: hidden; 217 text-overflow: ellipsis; 218 width: 100%; 219 display: inline-block; 220 height: 30px; 221 line-height: 30px; 222 } 223 .day .dayTitle{ 224 display: none !important; 225 } 226 /* 去掉广告 */ 227 #ad_t2,#opt_under_post,.c_ad_block,#under_post_news,#under_post_kb{ 228 display: none !important; 229 } 230 /******************************************以上自定义样式***********************************************/ 231 .postTitle, .entrylistPosttitle { 232 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 233 font-size: 1.8em; 234 padding: 20px 20px 15px 0px; 235 background: #fff; 236 border-radius: 10px 10px 0px 0px; 237 white-space: nowrap; 238 overflow: hidden; 239 text-overflow: ellipsis; 240 } 241 .entrylistPostSummary, .postCon, .postBody { 242 padding: 0 20px 15px 0px; 243 -webkit-box-shadow: 1px 2px 3px #ddd; 244 box-shadow: 0 2px 0 #ddd; 245 background: #fff; 246 position: relative; 247 } 248 .postDesc, .entrylistItemPostDesc { 249 padding: 0px 20px 15px 0px; 250 color: #999; 251 font-size: 0.9em; 252 line-height: 16px; 253 position: relative; 254 min-height: 16px; 255 background: #fff; 256 border-bottom: 1px dashed #ccc; 257 } 258 /* 去掉博客园自带日历控件 */ 259 #blog-calendar { 260 display: none; 261 } 262 @media screen and (max-width: 600px) { 263 .postCon { 264 padding-left: 0px; 265 } 266 } 267 .postIcon { 268 height: 0px; 269 margin-right: 25px; 270 position: relative; 271 top: 25px; 272 left: 25px; 273 color: #258fb8; 274 } 275 @media screen and (max-width: 600px) { 276 article header .icon { 277 display: none; 278 } 279 } 280 .postIcon:before { 281 position: absolute; 282 font: 32px FontAwesome; 283 top: 0; 284 left: 0; 285 width: 32px; 286 text-align: center; 287 } 288 article header time { 289 color: #999; 290 font: 0.9em "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 291 margin-bottom: 5px; 292 display: block; 293 line-height: 1; 294 } 295 article header .title { 296 font-weight: normal; 297 } 298 article header .title a { 299 color: #444; 300 } 301 article header .title a:hover { 302 color: #258fb8; 303 text-decoration: none; 304 } 305 #cnblogs_post_body { 306 text-align: justify; 307 line-height: 1.6; 308 } 309 #cnblogs_post_body p, 310 #cnblogs_post_body blockquote, 311 #cnblogs_post_body ul, 312 #cnblogs_post_body ol, 313 #cnblogs_post_body dl, 314 #cnblogs_post_body table, 315 #cnblogs_post_body iframe, 316 #cnblogs_post_body h3, 317 #cnblogs_post_body h4, 318 #cnblogs_post_body h5, 319 #cnblogs_post_body h6, 320 #cnblogs_post_body .video-container { 321 margin-top: 15px; 322 } 323 #cnblogs_post_body blockquote { 324 border-top: 1px solid #ddd; 325 border-bottom: 1px solid #ddd; 326 font-style: italic; 327 font-family: "Georgia", serif; 328 font-size: 1.2em; 329 padding: 0 30px 15px; 330 } 331 #cnblogs_post_body blockquote footer { 332 border-top: none; 333 font-size: 0.8em; 334 line-height: 1; 335 margin: 20px 0 0; 336 padding-top: 0; 337 } 338 #cnblogs_post_body blockquote footer cite:before { 339 content: '—'; 340 color: #ccc; 341 padding: 0 0.5em; 342 } 343 #cnblogs_post_body code, 344 #cnblogs_post_body pre { 345 font-family: Monaco, Menlo, Consolas, Courier New, monospace; 346 } 347 #cnblogs_post_body code { 348 background: #eee; 349 color: #666; 350 padding: 0 5px; 351 margin: 0 2px; 352 font-size: 0.9em; 353 border: 1px solid #ddd; 354 -webkit-border-radius: 3px; 355 border-radius: 3px; 356 } 357 #cnblogs_post_body pre { 358 background: #eee; 359 overflow: auto; 360 padding: 7px 15px; 361 -webkit-border-radius: 2px; 362 border-radius: 2px; 363 } 364 #cnblogs_post_body pre code { 365 background: none; 366 padding: 0; 367 margin: 0; 368 border: none; 369 -webkit-border-radius: 0; 370 border-radius: 0; 371 } 372 #cnblogs_post_body ul ul, 373 #cnblogs_post_body ol ul, 374 #cnblogs_post_body dl ul, 375 #cnblogs_post_body ul ol, 376 #cnblogs_post_body ol ol, 377 #cnblogs_post_body dl ol, 378 #cnblogs_post_body ul dl, 379 #cnblogs_post_body ol dl, 380 #cnblogs_post_body dl dl { 381 margin-top: 0; 382 } 383 #cnblogs_post_body h1, 384 #cnblogs_post_body h2 { 385 font-weight: bold; 386 border-bottom: 1px solid #ddd; 387 padding-bottom: 10px; 388 margin-top: 20px; 389 } 390 #cnblogs_post_body h3, 391 #cnblogs_post_body h4, 392 #cnblogs_post_body h5, 393 #cnblogs_post_body h6 { 394 font-weight: normal; 395 background: #eee; 396 border-radius: 6px; 397 color: Red; 398 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; 399 min-height: 25px; 400 line-height: 25px; 401 margin: 18px 5px !important; 402 padding: 8px; 403 opacity: 0.8; 404 border: 1px dashed #aaa; 405 } 406 #cnblogs_post_body h4 { 407 padding-left:20px !important; 408 color:Green !important; 409 } 410 .postBody img, 411 .entrylistPostSummary img, .postCon img, 412 .postBody video { 413 max-width: 100%; 414 height: auto; 415 border: none; 416 } 417 #cnblogs_post_body iframe { 418 border: none; 419 } 420 #cnblogs_post_body .caption { 421 display: block; 422 margin-top: 5px; 423 color: #999; 424 position: relative; 425 font-size: 0.9em; 426 padding-left: 25px; 427 } 428 #cnblogs_post_body .caption:before { 429 content: '\f040'; 430 position: absolute; 431 font: 1.3em FontAwesome; 432 position: absolute; 433 left: 0; 434 top: 3px; 435 } 436 #cnblogs_post_body .video-container { 437 position: relative; 438 padding-bottom: 56.25%; 439 padding-top: 30px; 440 height: 0; 441 overflow: hidden; 442 } 443 #cnblogs_post_body .video-container iframe, 444 #cnblogs_post_body .video-container object, 445 #cnblogs_post_body .video-container embed { 446 position: absolute; 447 top: 0; 448 left: 0; 449 width: 100%; 450 height: 100%; 451 margin-top: 0; 452 } 453 #cnblogs_post_body .pullquote { 454 float: right; 455 border: none; 456 padding: 0; 457 margin: 1em 0 0.5em 1.5em; 458 text-align: left; 459 width: 45%; 460 font-size: 1.5em; 461 } 462 #blog-comments-placeholder, #comment_form { 463 padding: 20px; 464 background: #fff; 465 -webkit-box-shadow: 1px 10px 10px #ddd; 466 box-shadow: 10px 10px 10px #ddd; 467 margin-bottom: 50px; 468 border: 1px solid #ccc; 469 padding-top:0; 470 } 471 .feedback_area_title { 472 margin-bottom: 15px; 473 font-size: 1.8em; 474 } 475 .feedbackItem { 476 border-bottom: 1px dashed #CCC; 477 margin-bottom: 10px; 478 padding: 5px; 479 } 480 .color_shine { 481 background: rgb(226, 242, 255); 482 } 483 .feedbackItem:hover { 484 -webkit-animation-name: color_shine; 485 -webkit-animation-duration: 2s; 486 -webkit-animation-iteration-count: infinite; 487 } 488 #comment_form .title { 489 font-weight: normal; 490 margin-bottom: 15px; 491 } 492 #ad_under_post_holder { 493 display: none; 494 } 495 .entrylistTitle { 496 color: #999; 497 font-weight: normal; 498 margin-bottom: 30px; 499 text-shadow: 0 0 1px #fff; 500 } 501 .entrylistTitle:before { 502 font-family: FontAwesome; 503 content: '\f07b'; 504 padding-right: 15px; 505 } 506 .archive { 507 -webkit-box-shadow: 1px 2px 3px #ddd; 508 box-shadow: 1px 2px 3px #ddd; 509 border-bottom: 1px solid #ddd; 510 margin-bottom: 50px; 511 } 512 .archive article { 513 -webkit-box-shadow: none; 514 box-shadow: none; 515 } 516 .archive article .post-content { 517 margin-bottom: 0; 518 } 519 #sideBar{ 520 width: 22%; 521 line-height: 1.8em; 522 float: right; 523 } 524 @media screen and (max-width: 900px) { 525 #sideBar { 526 float: none; 527 width: 100%; 528 } 529 } 530 .catListLink, 531 .catListMyTeams, 532 .catListComment, 533 .catListFeedback { 534 display: none; 535 } 536 .search, 537 .newsItem, 538 .catListPostCategory, 539 .catListPostArchive, 540 .catListTag, 541 .catListView, 542 .catListBlogRank { 543 background: #fff; 544 -webkit-box-shadow: 1px 2px 3px #ddd; 545 box-shadow: 10px 10px 10px #ddd; 546 margin-bottom: 30px; 547 word-wrap: break-word; 548 border-radius: 10px; 549 margin-top: 10px; 550 border: 1px solid #ddd; 551 } 552 #blog-sidecolumn h3, .newsItem h3 { 553 padding: 15px 20px; 554 font-size: 1em; 555 border-bottom: 1px solid #ddd; 556 font-weight: normal; 557 } 558 #blog-sidecolumn ul, .newsItem #blog-news { 559 font-size: 0.9em; 560 padding: 15px 20px; 561 } 562 #blog-sidecolumn ul, 563 #blog-sidecolumn ol, 564 #blog-sidecolumn dl { 565 list-style: none; 566 } 567 #blog-sidecolumn ul ul, 568 #blog-sidecolumn ol ul, 569 #blog-sidecolumn dl ul, 570 #blog-sidecolumn ul ol, 571 #blog-sidecolumn ol ol, 572 #blog-sidecolumn dl ol, 573 #blog-sidecolumn ul dl, 574 #blog-sidecolumn ol dl, 575 #blog-sidecolumn dl dl { 576 list-style: disc; 577 margin-left: 20px; 578 } 579 #q { 580 background: #fff; 581 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 582 font-style: italic; 583 font-size: 1em; 584 padding: 10px 15px; 585 border: 1px solid #ddd; 586 width: 100%; 587 -webkit-box-sizing: border-box; 588 -moz-box-sizing: border-box; 589 box-sizing: border-box; 590 color: #999; 591 height: 100%; 592 } 593 #q:focus { 594 color: #444; 595 } 596 /*隐藏搜索框中的无用组件*/ 597 .mySearch { 598 display: none; 599 } 600 601 #sideBar .tag small { 602 margin-left: 15px; 603 color: #999; 604 } 605 #sideBar .tag small:before { 606 content: '('; 607 } 608 #sideBar .tag small:after { 609 content: ')'; 610 } 611 #sideBar .twitter li { 612 border-bottom: 1px solid #ddd; 613 padding: 15px 20px; 614 font-size: 0.9em; 615 } 616 #sideBar .twitter li:last-of-type { 617 border-bottom: none; 618 } 619 #sideBar .twitter small { 620 display: block; 621 margin-top: 10px; 622 color: #999; 623 line-height: 1; 624 } 625 #sideBar .tagcloud .entry { 626 padding-right: 5px; 627 } 628 #sideBar .tagcloud a { 629 margin-right: 10px; 630 display: inline-block; 631 } 632 #footer { 633 color: #999; 634 margin-bottom: 50px; 635 font: 0.9em/1.6 "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 636 text-shadow: 0 0 1px #fff; 637 text-align:center; 638 margin: 30px 0px 50px; 639 } 640 .entry .gist { 641 background: #eee; 642 border: 1px solid #ddd; 643 margin-top: 15px; 644 padding: 7px 15px; 645 -webkit-border-radius: 2px; 646 border-radius: 2px; 647 text-shadow: 0 0 1px #fff; 648 line-height: 1.6; 649 overflow: auto; 650 color: #666; 651 } 652 .entry .gist .gist-file { 653 border: none; 654 font-family: inherit; 655 margin: 0; 656 font-size: 0.9em; 657 } 658 .entry .gist .gist-file .gist-data { 659 background: none; 660 border-bottom: none; 661 } 662 .entry .gist .gist-file .gist-data pre { 663 padding: 0 !important; 664 font-family: Monaco, Menlo, Consolas, Courier New, monospace; 665 } 666 .entry .gist .gist-file .gist-meta { 667 background: none; 668 color: #999; 669 margin-top: 5px; 670 padding: 0; 671 text-shadow: 0 0 1px #fff; 672 font-size: 100%; 673 } 674 .entry .gist .gist-file .gist-meta a { 675 color: #258fb8; 676 } 677 .entry .gist .gist-file .gist-meta a:visited { 678 color: #258fb8; 679 } 680 figure.highlight { 681 background: #eee; 682 border: 1px solid #ddd; 683 margin-top: 15px; 684 padding: 7px 15px; 685 -webkit-border-radius: 2px; 686 border-radius: 2px; 687 text-shadow: 0 0 1px #fff; 688 line-height: 1.6; 689 overflow: auto; 690 position: relative; 691 font-size: 0.9em; 692 } 693 figure.highlight figcaption { 694 color: #999; 695 margin-bottom: 5px; 696 text-shadow: 0 0 1px #fff; 697 } 698 figure.highlight figcaption a { 699 position: absolute; 700 right: 15px; 701 } 702 figure.highlight pre { 703 border: none; 704 padding: 0; 705 margin: 0; 706 } 707 figure.highlight table { 708 margin-top: 0; 709 border-spacing: 0; 710 } 711 figure.highlight .gutter { 712 color: #999; 713 padding: 7px 10px 7px 5px !important; 714 border-right: 1px solid #ddd; 715 text-align: right; 716 } 717 figure.highlight .code { 718 padding: 7px 7px 7px 10px !important; 719 border-left: 1px solid #fff; 720 color: #666; 721 } 722 pre .comment, 723 pre .template_comment, 724 pre .diff .header, 725 pre .doctype, 726 pre .pi, 727 pre .lisp .string, 728 pre .javadoc { 729 color: #93a1a1; 730 font-style: italic; 731 } 732 pre .keyword, 733 pre .winutils, 734 pre .method, 735 pre .addition, 736 pre .css .tag, 737 pre .request, 738 pre .status, 739 pre .nginx .title { 740 color: #859900; 741 } 742 pre .number, 743 pre .command, 744 pre .string, 745 pre .tag .value, 746 pre .phpdoc, 747 pre .tex .formula, 748 pre .regexp, 749 pre .hexcolor { 750 color: #2aa198; 751 } 752 pre .title, 753 pre .localvars, 754 pre .chunk, 755 pre .decorator, 756 pre .built_in, 757 pre .identifier, 758 pre .vhdl, 759 pre .literal, 760 pre .id { 761 color: #268bd2; 762 } 763 pre .attribute, 764 pre .variable, 765 pre .lisp .body, 766 pre .smalltalk .number, 767 pre .constant, 768 pre .class .title, 769 pre .parent, 770 pre .haskell .type { 771 color: #b58900; 772 } 773 pre .preprocessor, 774 pre .preprocessor .keyword, 775 pre .shebang, 776 pre .symbol, 777 pre .symbol .string, 778 pre .diff .change, 779 pre .special, 780 pre .attr_selector, 781 pre .important, 782 pre .subst, 783 pre .cdata, 784 pre .clojure .title { 785 color: #cb4b16; 786 } 787 pre .deletion { 788 color: #dc322f; 789 } 790 .feedbackManage { 791 width: 160px; 792 position: absolute; 793 right: 0; 794 text-align: right; 795 } 796 .cnblogs_code_toolbar { 797 display: none; 798 } 799 #cnblogs_post_body { 800 overflow: hidden; 801 } 802 #cnblogs_post_body ol { 803 padding-left: 40px; 804 } 805 #cnblogs_post_body ul { 806 margin-left: 35px; 807 } 808 .fixedReadRank { 809 position: fixed; 810 top: 20px; 811 width: 270px; 812 } 813 .fixedRecRank { 814 position: fixed; 815 top: 360px; 816 width: 270px; 817 } 818 figure.highlight { 819 margin-top: 0; 820 padding: 0; 821 } 822 figure table { 823 width: 100%; 824 margin: 0 !important; 825 } 826 #cnblogs_post_body pre { 827 padding: 0; 828 } 829 #cnblogs_post_body th, 830 #cnblogs_post_body td { 831 padding: 0; 832 } 833 .cnblogs_code pre { 834 padding: 7px 15px !important; 835 background: #f5f5f5; 836 border: 0; 837 margin-top: 0; 838 } 839 .cnblogs_code th { 840 border: 1px solid silver; 841 padding: 3px; 842 } 843 .cnblogs_code { 844 padding: 0; 845 } 846 /*评论标题*/ 847 .feedback_area_title { 848 padding:10px; 849 font-size:24px; 850 font-weight:bold; 851 color:#aaa; 852 border-bottom:1px dashed #ccc; 853 } 854 .feedbackListSubtitle { 855 font-size:12px; 856 color:#888; 857 } 858 .feedbackListSubtitle a { 859 color:#888; 860 } 861 .comment_quote { 862 background: #eee; 863 padding: 15px; 864 border: 1px dashed #aaa; 865 border-radius: 5px; 866 } 867 #commentform_title { 868 color:#aaa; 869 background-image:none; 870 background-repeat:no-repeat; 871 margin-bottom:10px; 872 padding:10px 20px 10px 10px; 873 font-size:24px; 874 font-weight:bold; 875 border-bottom:1px dashed #ccc; 876 } 877 /*评论框*/ 878 #comment_form { 879 margin:10px 0; 880 padding:25px; 881 border-radius: 10px; 882 height: 343px; 883 overflow: hidden; 884 } 885 .commentform { 886 margin:10px 0; 887 padding:10px 20px; 888 background:#fff; 889 } 890 /*评论输入域*/ 891 #tbCommentBody { 892 font-family:'MIcrosoft Yahei'; 893 margin-top:10px; 894 background:white; 895 color:#333; 896 border:2px solid #fff; 897 box-shadow:inset 0 0 8px #aaa; 898 height:120px; 899 font-size:14px; 900 min-height:120px; 901 border-radius: 10px; 902 } 903 /*评论条目*/ 904 .feedbackItem { 905 font-size:14px; 906 line-height:24px; 907 margin:10px 0; 908 padding:20px; 909 padding-top:5px; 910 } 911 .feedbackListSubtitle { 912 font-weight:normal; 913 } 914 915 /*green_channel*/ 916 #green_channel { 917 text:align:right; 918 padding-left:0px; 919 font-weight:normal; 920 font-size:13px; 921 width:100%; 922 border:1px dashed #ccc; 923 color:#fff; 924 border-radius:4px; 925 margin:5px auto; 926 } 927 @media screen and (max-width: 768px) { 928 body { 929 font-size: 13px; 930 } 931 #main{ 932 padding:0px !important; 933 } 934 #mainContent{ 935 width: 96%; 936 float: left; 937 margin: 0px 2%; 938 } 939 #sideBar { 940 display: none; 941 } 942 #blogTitle { 943 width: 100%; 944 float:none; 945 margin: 20px auto 0 !important; 946 } 947 #header { 948 height:auto !important; 949 margin: 20px auto 5px; 950 } 951 #header #navigator { 952 width: 100%; 953 text-align: center; 954 float:none; 955 } 956 #header #navigator ul { 957 width: 100%; 958 margin-left: 6%; 959 } 960 #header #navigator ul li { 961 float: left; 962 width: 25%; 963 text-align: center; 964 margin-right:0px; 965 } 966 .postTitle, .entrylistPosttitle { 967 font-size:14px; 968 padding: 20px 20px 15px 0px; 969 } 970 .postDesc, .entrylistItemPostDesc { 971 padding: 0px 20px 15px 0px; 972 } 973 #green_channel { 974 padding:0px !important; 975 } 976 #blog_stats { 977 display: none; 978 } 979 } 980 #blog-news label { 981 box-shadow:5px 5px 5px #cccccc; 982 text-shadow:5px 5px 5px #cccccc; 983 border-radius:5px; 984 } 985 div.commentform textarea.comment_textarea { 986 padding: 10px; 987 } 988 #tbCommentBody{ 989 width:98%; 990 } 991 #cnblogs_post_body h3:hover { 992 color: green; 993 font-size: large; 994 font-weight: bold; 995 } 996 997 998 999 /* 文章title自定义带动画样式 */ 1000 .postTitle { 1001 font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; 1002 clear: both; 1003 background-color: #FBF9F9; 1004 margin-bottom: 8px; 1005 padding-top: 5px; 1006 padding-bottom: 5px; 1007 margin-top: 20px; 1008 border-left: 3px solid #21759b; 1009 padding-left: 20px; 1010 font-size: 20px; 1011 border-radius:0px; 1012 } 1013 .postTitle a:hover { 1014 text-decoration: none; 1015 margin-left: 20px; 1016 color: #E00000; 1017 } 1018 .postTitle a:link, 1019 .postTitle a:visited, 1020 .postTitle a:active { 1021 transition: all 0.4s linear 0s; 1022 } 1023 1024 /*scroll to top*/ 1025 #scrollTop div{ 1026 left:0; 1027 overflow:hidden; 1028 position:absolute; 1029 top:0; 1030 width:149px; 1031 margin:0; 1032 padding:0 1033 } 1034 #scrollTop .level-2{ 1035 background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent; 1036 display:none; 1037 height:250px; 1038 opacity:0; 1039 z-index:1 1040 } 1041 #scrollTop .level-3{ 1042 background:none repeat scroll 0 0 transparent; 1043 cursor:pointer; 1044 display:block; 1045 height:150px; 1046 z-index:2 1047 } 1048 #scrollTop{ 1049 background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent; 1050 cursor:default; 1051 display:block; 1052 height:180px; 1053 overflow:hidden; 1054 position:fixed; 1055 right:0; 1056 top:90%; 1057 width:149px; 1058 z-index:11; 1059 margin:-125px 0 0; 1060 padding:0 1061 } 1062 1063 1064 /*目录样式*/ 1065 #sideCatalog a{ 1066 font-size:12px; 1067 font-weight:normal !important; 1068 } 1069 1070 /*好看的滚动条*/ 1071 ::-webkit-scrollbar{ 1072 width:10px!important; 1073 height:10px!important; 1074 -webkit-appearance:none; 1075 } 1076 ::-webkit-scrollbar-thumb{ 1077 height:5px;border:1px solid transparent; 1078 border-top:none;border-bottom:none; 1079 -webkit-border-radius:6px; 1080 background-color:rgba(0,0,0,.3); 1081 background-clip:padding-box; 1082 } 1083 1084 #div_digg{ 1085 padding: 5px; 1086 border-radius: 5px; 1087 position: fixed; 1088 left: 0; 1089 bottom: 80px; 1090 width:80px; 1091 z-index:100; 1092 } 1093 .diggit{ 1094 background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat; 1095 width: 60px; 1096 height: 60px; 1097 } 1098 #div_digg .diggnum{ 1099 position: absolute; 1100 bottom: -20px; 1101 left: 6px; 1102 background: #D0D0D0; 1103 padding: 2px 0; 1104 display: block; 1105 color: #555; 1106 font-size: 12px; 1107 text-align: center; 1108 width: 60px; 1109 -moz-border-radius: 4px; 1110 -webkit-border-radius: 4px; 1111 font-weight: bold; 1112 } 1113 /* 删除反对按钮,有点邪恶了 */ 1114 .buryit{ 1115 display: none; 1116 } 1117 1118 img { 1119 border: 0; 1120 height: 146px; 1121 width: inherit; 1122 max-width: 80%; 1123 } 1124 1125 body { 1126 color: #000; 1127 background: url(https://files.cnblogs.com/files/clwydjgs/u%3D3285165615%2C2041443182%26fm%3D27%26gp%3D0.bmp 1128 ) fixed; 1129 background-size: 100%; 1130 background-repeat: no-repeat; 1131 font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; 1132 min-height: 101%; 1133 } 1134 1135 #blogLogo{ 1136 height: 0; 1137 } 1138 1139 h2 { 1140 text-align: center; 1141 box-shadow: 10px 10px 5px #888888; 1142 background-color: #5FBDCE; 1143 color: #015666; 1144 }
5.找到‘’博客侧边栏公告（支持HTML代码）（支持JS代码）‘’，在里面加入如下代码；
1 <style> 2 #clock { 3 font-family: 'Share Tech Mono', monospace; 4 color: #ffffff; 5 text-align: center; 6 position: absolute; 7 left: 83%; 8 top: 45%%; 9 margin-top: 70px; 10 max-width: 80%; 11 -webkit-transform: translate(-50%, -50%); 12 transform: translate(-50%, -50%); 13 color: #25a9da; 14 text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0); 15 } 16 #clock .time { 17 letter-spacing: 0.05em; 18 font-size: 45px; 19 padding: 5px 0; 20 } 21 #clock .date { 22 letter-spacing: 0.1em; 23 font-size: 24px; 24 } 25 #clock .text { 26 letter-spacing: 0.1em; 27 font-size: 12px; 28 padding: 20px 0 0; 29 } 30 </style> 31 <script type="text/javascript" src="https://blog-static.cnblogs.com/files/clwydjgs/vue.min.js"></script> 32 <script> 33 var clock = new Vue({ 34 el: '#clock', 35 data: { 36 time: '', 37 date: '' 38 } 39 }); 40 41 var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; 42 var timerID = setInterval(updateTime, 1000); 43 updateTime(); 44 function updateTime() { 45 var cd = new Date(); 46 clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2); 47 clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()]; 48 }; 49 50 function zeroPadding(num, digit) { 51 var zero = ''; 52 for(var i = 0; i < digit; i++) { 53 zero += '0'; 54 } 55 return (zero + num).slice(-digit); 56 } 57 </script> 58 59 <div style="border-top: 1px dashed #ccc;padding: 5px;border-bottom: 1px dashed #ccc;height: 120px;"> 60 <div id="clock"> 61 <p class="date">{{ date }}</p> 62 <p class="time">{{ time }}</p> 63 </div> 64 </div> 65 66 67 68 <script type="text/javascript"> 69 //以下是锚点JS，自动生成目录 70 var a = $(document); 71 a.ready(function() { 72 var commentDiv = $("#blog-comments-placeholder"); 73 if (commentDiv.length <= 0) { 74 return; 75 } 76 var b = $('body'), 77 d = 'sideToolbar', 78 e = 'sideCatalog', 79 f = 'sideCatalog-catalog', 80 g = 'sideCatalogBtn', 81 h = 'sideToolbar-up', 82 i = '<div id="sideToolbar"style="display:none;bottom:150px;">\<div class="sideCatalogBg"id="sideCatalog">\<div id="sideCatalog-sidebar">\<div class="sideCatalog-sidebar-top"></div>\<div class="sideCatalog-sidebar-bottom"></div>\</div>\<div id="sideCatalog-catalog">\<ul class="nav"style="width:225px;zoom:1;list-style: none;">\</ul>\</div>\</div>\<a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable" style="position:absolute;bottom:10px;"></a>\</div>', 83 j = '', 84 k = 500, 85 l = 0, 86 m = 0, 87 n = 0, 88 //限制存在个数，如数量过多，则只显示h2，不显示h3 89 //o, p = 13, 90 o, p = 100, 91 q = true, 92 r = true, 93 s = b; 94 if(s.length === 0) { 95 return 96 }; 97 b.append(i); 98 //指定获取目录的范围-------------这一点非常重要，因为每个人指定的范围都不一样，所以这是要修改的地方 99 //o = s.find(':header'); 100 o = $('#cnblogs_post_body').find(':header'); 101 if(o.length > p) { 102 r = false; 103 var t = s.find('h3'); 104 var u = s.find('h4'); 105 if(t.length + u.length > p) { 106 q = false 107 } 108 }; 109 o.each(function(t) { 110 var u = $(this), 111 v = u[0]; 112 113 var title = u.text(); 114 var text = u.text(); 115 116 u.attr('id', 'autoid-' + l + '-' + m + '-' + n) 117 //if (!u.attr('id')) { 118 // u.attr('id', 'autoid-' + l + '-' + m + '-' + n) 119 //}; 120 if(text.length > 12) text = text.substr(0, 12) + "..."; 121 if(v.localName === 'h3') { 122 l++; 123 m = 0; 124 //if(text.length > 12) text = text.substr(0, 12) + "..."; 125 j += '<li><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot" style="top:8px;"></span></li>'; 126 } else if(v.localName === 'h4') { 127 m++; 128 n = 0; 129 if(q) { 130 //if(text.length > 12) text = text.substr(0, 12) + "..."; 131 j += '<li class="h2Offset"><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>'; 132 } 133 } else if(v.localName === 'h5') { 134 n++; 135 if(r) { 136 j += '<li class="h3Offset"><a href="#' + u.attr('id') + '" title="' + title + '">' + u.text() + '</a></li>'; 137 } 138 } 139 }); 140 $('#' + f + '>ul').html(j); 141 b.data('spy', 'scroll'); 142 b.data('target', '.sideCatalogBg'); 143 $('body').scrollspy({ 144 target: '.sideCatalogBg' 145 }); 146 $sideCatelog = $('#' + e); 147 $sideToolbar = $('#' + d); 148 $('#sideCatalogBtn').hover(function () { 149 $sideCatelog.css('display', 'block'); 150 }); 151 $sideToolbar.hover(function(){}, function(){ 152 $sideCatelog.css('display', 'none'); 153 }); 154 $('#' + h).on('click', function() { 155 $("html,body").animate({ 156 scrollTop: 0 157 }, 500) 158 }); 159 a.on('scroll', function() { 160 var t = a.scrollTop(); 161 if(t > k) { 162 $sideToolbar.css('display', 'block'); 163 $('#gotop').show() 164 } else { 165 $sideToolbar.css('display', 'none') 166 $('#gotop').hide() 167 } 168 }) 169 }); 170 //以上是锚点JS 171 </script> 172 173 <embed src="//music.163.com/style/swf/widget.swf?sid=2307767639&type=0&auto=1&width=310&height=90" width="330" height="110" allowNetworking="all" hidden=ture></embed> 174 175 <a href="https://www.cnblogs.com/clwydjgs/"> 176 <img src="https://files.cnblogs.com/files/clwydjgs/touxiang.bmp"> 177 </a>
6.找到“页首Html代码”，加入下面的代码
1 <script src="http://static.tctip.com/tctip-1.0.0.min.js"></script> 2 <script> 3 new tctip({ 4 top: '20%', 5 button: { 6 id: 9, 7 type: 'dashang', 8 }, 9 list: [ 10 { 11 type: 'alipay', 12 qrImg: 'https://files.cnblogs.com/files/clwydjgs/zhifubao.bmp' 13 }, { 14 type: 'wechat', 15 qrImg: 'https://files.cnblogs.com/files/clwydjgs/weixin.bmp' 16 } 17 ] 18 }).init() 19 </script> 20 21 <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/feedback.css"> 22 <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/miangao/maodian.css"> 23 24 <script type="text/javascript"> 25 var a_idx = 0; 26 jQuery(document).ready(function($) { 27 $("body").click(function(e) { 28 var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 29 var $i = $("<span/>").text(a[a_idx]); 30 a_idx = (a_idx + 1) % a.length; 31 var x = e.pageX, 32 y = e.pageY; 33 $i.css({ 34 "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 35 "top": y - 20, 36 "left": x, 37 "position": "absolute", 38 "font-weight": "bold", 39 "color": "#ff6651" 40 }); 41 $("body").append($i); 42 $i.animate({ 43 "top": y - 180, 44 "opacity": 0 45 }, 46 1500, 47 function() { 48 $i.remove(); 49 }); 50 }); 51 }); 52 </script>
7.找到“页脚Html代码”，加入下面的代码
1 <script type="text/javascript"> 2 $(function(){ 3 $('#blogTitle h1').addClass('bounceInLeft animated'); 4 $('#blogTitle h2').addClass('bounceInRight animated'); 5 // 删除反对按钮 6 $('.buryit').remove(); 7 initCommentData(); 8 }); 9 function initCommentData() { 10 $('.feedbackItem').each(function() { 11 var text = $(this).find('.feedbackListSubtitle .layer').text(); 12 // 将楼层信息放到data里面 13 // $(this).find('.blog_comment_body').attr('data-louceng', text.replace(/^#/g, '')); 14 if($(this).find('.feedbackListSubtitle .louzhu').length>0) $(this).addClass('myself'); 15 var avatar = $(this).find('> .feedbackCon > span').html() || 'http://pic.cnitblog.com/face/sample_face.gif'; 16 $(this).find('> .feedbackCon > .blog_comment_body').append('<img class="user-avatar" src="'+avatar+'"/>') 17 }); 18 } 19 20 $(document).ajaxComplete(function(event, xhr, settings) { 21 // 监听获取评论ajax事件 22 if(settings.url.indexOf('/mvc/blog/GetComments.aspx') >= 0) { 23 initCommentData(); 24 } 25 }); 26 </script> 27 28 29 <script src="https://files.cnblogs.com/files/hafiz/jquery-migrate-1.2.1.js"></script> 30 <div id="scrollTop" style="display:none;"> 31 <div class="level-2"></div> 32 <div class="level-3"></div> 33 </div> 34 <script src="http://files.cnblogs.com/files/hafiz/scroll2top.js"></script> 35 <script type="text/javascript"> 36 UI.global_search(); 37 var uvOptions = {}; 38 // !important 39 (function() { 40 initScrollTop(); 41 })(); 42 </script> 43 44 <script src="https://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>
8.点击保存，你的界面就将和我一样；
定制自己的界面
1.背景图片
在定制CSS代码区域，找到如下代码，将“https://files.cnblogs.com/files/clwydjgs/u%3D3285165615%2C2041443182%26fm%3D27%26gp%3D0.bmp”位置的代码更换为你想更改的“背景图片的地址”
body {
color: #000;
background: url(https://files.cnblogs.com/files/clwydjgs/u%3D3285165615%2C2041443182%26fm%3D27%26gp%3D0.bmp
) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
min-height: 101%;
}
2.更换背景音乐
a.在“博客侧边栏公告（支持HTML代码）（支持JS代码）”中找到如下代码；
<embed src="//music.163.com/style/swf/widget.swf?sid=2307767639&type=0&auto=1&width=310&height=90" width="330" height="110" allowNetworking="all" hidden=ture></embed>
b.进入网易云官网，找到你想设置为背景音乐的音乐，点击"生成外链播放器"，假如是下面的这样子，说明要收费
c.我们选择能够生成外链的歌曲，当然也可以选多首一起生成外链,就像这样
d.点击生成外链，我们选择flash插件的版本，粘贴HTML代码，替换我们找到的代码。大功告成。
3.替换右侧头像
a.在“博客侧边栏公告（支持HTML代码）（支持JS代码）”中找到如下代码；
1 <a href="https://www.cnblogs.com/clwydjgs/"> 2 <img src="https://files.cnblogs.com/files/clwydjgs/touxiang.bmp"> 3 </a>
b.将”https://files.cnblogs.com/files/clwydjgs/touxiang.bmp“替换成你头像的地址，将"https://www.cnblogs.com/clwydjgs/"替换为你点击头像想要链接的地址；
4.更换打赏里面的付款码
a.在”页首Html代码“区域找到如下代码；
1 <script src="http://static.tctip.com/tctip-1.0.0.min.js"></script> 2 <script> 3 new tctip({ 4 top: '20%', 5 button: { 6 id: 9, 7 type: 'dashang', 8 }, 9 list: [ 10 { 11 type: 'alipay', 12 qrImg: 'https://files.cnblogs.com/files/clwydjgs/zhifubao.bmp' 13 }, { 14 type: 'wechat', 15 qrImg: 'https://files.cnblogs.com/files/clwydjgs/weixin.bmp' 16 } 17 ] 18 }).init() 19 </script>
b.将自己的微信和支付宝的付款码，保存到网络上或者上传到文件中，如下（点击即可获取图片地址）
c.将代码中的”https://files.cnblogs.com/files/clwydjgs/zhifubao.bmp“替换成你的支付宝付款码图片地址
将'https://files.cnblogs.com/files/clwydjgs/weixin.bmp'替换为你微信的付款码地址，大功告成
4.更换”置顶“图片
a.在页面定制CSS代码区中找到如下CSS代码：
1 /*scroll to top*/ 2 #scrollTop div{ 3 left:0; 4 overflow:hidden; 5 position:absolute; 6 top:0; 7 width:149px; 8 margin:0; 9 padding:0 10 } 11 #scrollTop .level-2{ 12 background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent; 13 display:none; 14 height:250px; 15 opacity:0; 16 z-index:1 17 } 18 #scrollTop .level-3{ 19 background:none repeat scroll 0 0 transparent; 20 cursor:pointer; 21 display:block; 22 height:150px; 23 z-index:2 24 } 25 #scrollTop{ 26 background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent; 27 cursor:default; 28 display:block; 29 height:180px; 30 overflow:hidden; 31 position:fixed; 32 right:0; 33 top:90%; 34 width:149px; 35 z-index:11; 36 margin:-125px 0 0; 37 padding:0 38 }
b.跟换“http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png”和“http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png”为你想替换的图片的新地址
5.鼠标点击特效
鼠标点击特效传送门 https://www.cnblogs.com/yadongliang/p/9318639.html
扫一扫
2741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
