博客园博客排版（js样式实例）

最新推荐文章于 2024-08-08 07:08:13 发布

dawnzhang_zj

最新推荐文章于 2024-08-08 07:08:13 发布

阅读量5.5k

点赞数

本文链接：https://blog.csdn.net/weixin_42718460/article/details/81108066

版权

昨天在博客园中看到一位大神发的博客园样式排版博客，我一看。妈呀，太漂亮了，二话不说赶快学起，昨天我花了一天的时间，终于把我的博客也弄得有一丢丢像样了，有好东西，当然要分享给各位；

大神的链接：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 }

View Code

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>

View Code

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>

View Code

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>

View Code

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 }