前言

想整合一下博客园美化的代码……

本人只会C++，所以本文代码均为从网上搜到的代码再加上自己各种摸索加以修改得到的。如有侵犯任何人的权益，请和我联系。

关于用法的讲解一部分在注释里写出来了，大家不要直接用啊，有的东西一定要按注释改改，不然没法用！而且我也不想看见别人的博客和我自己的一模一样啊！

整体页面定制（适用于SimpleMemory）（放在“页面定制 CSS 代码”里）

  1 /*simplememory*/
  2 #google_ad_c1, #google_ad_c2 {display:none;}
  3 .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {
  4 font-size: 14px!important;
  5 }
  6 #home {
  7 opacity: 0.80;
  8 margin: 0 auto;
  9 width: 85%;
 10 min-width: 950px;
 11 background-color: #fff;
 12 padding: 30px;
 13 margin-top: 30px;
 14 margin-bottom: 50px;
 15 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
 16 }
 17 #blogTitle h1 {
 18 font-size: 30px;
 19 font-weight: bold;
 20 font-family: "Comic Sans MS";
 21 line-height: 1.5em;
 22 margin-top: 20px;
 23 color: #515151;
 24 }
 25 #navList a:hover {
 26 color: #4C9ED9;
 27 text-decoration: none;
 28 }
 29 #navList a {
 30 display: block;
 31 width: 5em;
 32 height: 22px;
 33 float: left;
 34 text-align: center;
 35 padding-top: 18px;
 36 }
 37 #navigator {
 38 font-size: 15px;
 39 border-bottom: 1px solid #ededed;
 40 border-top: 1px solid #ededed;
 41 height: 50px;
 42 clear: both;
 43 margin-top: 25px;
 44 }
 45 .catListTitle {
 46 margin-top: 21px;
 47 margin-bottom: 10.5px;
 48 text-align: left;
 49 border-left: 10px solid rgba(82, 168, 236, 0.8);
 50 padding: 10px 0 14px 10px;
 51 background-color: #f5f5f5;
 52 }
 53 #ad_under_post_holder #google_ad_c1,#google_ad_c2{ 
 54 display: none !important;
 55 }
 56 body {
 57 color: #000;
 58 background: url(https:) fixed;
 59 /*在这里放背景图片链接*/
 60 background-size: 100%;
 61 background-repeat: no-repeat;
 62 font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
 63 font-size: 14px;
 64 min-height: 101%;
 65 }
 66 #topics .postTitle {
 67 border: 0px;
 68 font-size: 200%;
 69 font-weight: bold;
 70 float: left;
 71 line-height: 0;
 72 width: 100%;
 73 padding-left: 5px;
 74 }
 75 
 76 
 77 div.commentform p{
 78 margin-bottom:10px;
 79 }
 80 .comment_btn {
 81 padding: 5px 10px;
 82 height: 35px;
 83 width: 90px;
 84 border: 0 none;
 85 border-radius: 5px;
 86 background: #ddd;
 87 color: #999;
 88 cursor:pointer;
 89 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
 90 text-shadow: 0 0 1px #fff;
 91 display: inline !important;
 92 }
 93 .comment_btn:hover{
 94 padding: 5px 10px;
 95 height: 35px;
 96 width: 90px;
 97 border: 0 none;
 98 border-radius: 5px;
 99 background: #258fb8;
100 color: white;
101 cursor:pointer;
102 font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋体, Arial, sans-serif;
103 text-shadow: 0 0 1px #fff;
104 display: inline !important;
105 }
106 #commentform_title {
107 background-image:none;
108 background-repeat:no-repeat;
109 margin-bottom:10px;
110 padding:0;
111 font-size:24px;
112 }
113 #commentbox_opt,#commentbox_opt + p {
114 text-align:center;
115 }
116 .commentbox_title {
117 width: 100%;
118 }
119 #tbCommentBody {
120 font-family:'Microsoft Yahei', Microsoft Yahei, 宋体, sans-serif;
121 margin-top:10px;
122 max-width:100%;
123 min-width:100%;
124 background: url('https:') no-repeat;
125 /*在这里放评论区的背景图片链接*/
126 /*我评论区的友利是自己费劲扣的才不会给你呢自己做吧略略略*/
127 };
128 color:#333;
129 border:2px solid #fff;
130 box-shadow:inset 0 0 8px #aaa;
131 // padding:10px;
132 height:250px;
133 font-size:14px;
134 min-height:120px;
135 }
136 .feedbackItem {
137 font-size:14px;
138 line-height:24px;
139 margin:10px 0;
140 padding:20px;
141 background:#F2F2F2;
142 box-shadow:0 0 5px #aaa;
143 }
144 .feedbackListSubtitle {
145 font-weight:normal;
146 }
147 
148 #blog-comments-placeholder, #comment_form {
149 padding: 20px;
150 background: #fff;
151 -webkit-box-shadow: 1px 2px 3px #ddd;
152 box-shadow: 1px 2px 3px #ddd;
153 margin-bottom: 50px;
154 }
155 .feedback_area_title {
156 margin-bottom: 15px;
157 font-size: 1.8em;
158 }
159 .feedbackItem {
160 border-bottom: 1px solid #CCC;
161 margin-bottom: 10px;
162 padding: 5px;
163 background: rgb(248, 248, 248);
164 }
165 .color_shine {background: rgb(226, 242, 255);}
166 .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
167 #comment_form .title {
168 font-weight: normal;
169 margin-bottom: 15px;
170 }
171 
172  
173 .icon_favorite {
174     background: transparent url('http://files.cnblogs.com/files/jackson0714/kj.gif') no-repeat 0 0;
175     padding-left: 5px;
176 }
177  
178 #blog_post_info_block a {
179     text-decoration: none;
180     color: #5B9DCA;
181     padding: 3px;
182 }

页面定制

设置签名格式（放在“页面定制 CSS 代码”里）

样本见划到本页最下面的签名格式。

 1 /* 设置签名格式 */
 2 #MySignature {
 3     display: none;
 4     background-color: #87CEFA;
 5     border-radius: 10px;
 6     box-shadow: 1px 1px 1px #6B6B6B;
 7     padding: 10px;
 8     line-height: 1.5;
 9     text-shadow: 1px 1px 1px #FFF;
10     font-size: 16px;
11     font-family: 'Microsoft Yahei';
12 }

签名格式

更改各级标题样式（放在“页面定制 CSS 代码”里）

 1 #cnblogs_post_body
 2 {
 3     color: black;      
 4     font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
 5     font-size: 15px;
 6 }
 7 #cnblogs_post_body h1    {
 8     text-align:center;
 9     background: #333366;
10     border-radius: 6px 6px 6px 6px;
11     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
12     color: #FFFFFF;
13     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
14     font-size: 23px;
15     font-weight: bold;
16     height: 25px;
17     line-height: 25px;
18     margin: 18px 0 !important;
19     padding: 8px 0 5px 5px;
20     text-shadow: 2px 2px 3px #222222;
21 }
22 #cnblogs_post_body h2    {
23     text-align:center;
24     background: #006699;
25     border-radius: 6px 6px 6px 6px;
26     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
27     color: #FFFFFF;
28     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
29     font-size: 20px;
30     font-weight: bold;
31     height: 25px;
32     line-height: 25px;
33     margin: 18px 0 !important;
34     padding: 8px 0 5px 5px;
35     text-shadow: 2px 2px 3px #222222;
36 }
37 #cnblogs_post_body h3    {
38     background: #2B6695;
39     border-radius: 6px 6px 6px 6px;
40     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
41     color: #FFFFFF;
42     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
43     font-size: 18px;
44     font-weight: bold;
45     height: 25px;
46     line-height: 25px;
47     margin: 18px 0 !important;
48     padding: 8px 0 5px 5px;
49     text-shadow: 2px 2px 3px #222222;
50 }

标题样式

更改鼠标指针（放在“页面定制 CSS 代码”里）

 1 element {
 2 //element可以换成所有可能的元素以实现更改指定元素的指针
 3         cursor:kind;
 4 //kind可以替换成上面“可能的值”一表中的所有值（除url）以外
 5 }
 6  body {
 7         cursor:url("https:"),auto;
 8 //放ico格式的鼠标图标地址
 9 //我的蕾姆是自己扣的才不会给你略略略
10 }
11 a:hover {
12         cursor:url("https:"),auto;
13 //指向链接时指针改变
14  }

鼠标指针

雪花（放在“侧边栏”里）

 1 <script type="text/javascript">
 2 (function($){
 3     $.fn.snow = function(options){
 4     var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
 5     documentHeight     = $(document).height(),
 6     documentWidth    = $(document).width(),
 7     defaults = {
 8         minSize        : 10,
 9         maxSize        : 15,
10         newOn        : 1000,
11         flakeColor    : "#FFC125" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
12     },
13     options    = $.extend({}, defaults, options);
14     var interval= setInterval( function(){
15     var startPositionLeft = Math.random() * documentWidth - 100,
16     startOpacity = 0.5 + Math.random(),
17     sizeFlake = options.minSize + Math.random() * options.maxSize,
18     endPositionTop = documentHeight - 200,
19     endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
20     durationFall = documentHeight * 10 + Math.random() * 5000;
21     $flake.clone().appendTo('body').css({
22         left: startPositionLeft,
23         opacity: startOpacity,
24         'font-size': sizeFlake,
25         color: options.flakeColor
26     }).animate({
27         top: endPositionTop,
28         left: endPositionLeft,
29         opacity: 0.2
30     },durationFall,'linear',function(){
31         $(this).remove()
32     });
33     }, options.newOn);
34     };
35 })(jQuery);
36 $(function(){
37     $.fn.snow({ 
38         minSize: 15, /* 定义雪花最小尺寸 */
39         maxSize: 30,/* 定义雪花最大尺寸 */
40         newOn: 600  /* 定义密集程度，数字越小越密集 */
41     });
42 });
43 </script>

雪花

每日一言（放在“侧边栏”里）

 1 <meta charset="utf-8"/>
 2      
 3             <center><h2><B>每日一言</B></h2><center>
 4             <div class="daily a pome">
 5               <div class="daily pome" id="qwq"></div>
 6               <script>
 7                   var st=["<center><h3>那只是，一份思念罢了<h3><br><center>      ——罗小黑战记 · 老君<br>",                         "<center><h3>Where you are is my home,<br>my only home.<h3><br><center>      ——英语学案<br>",                         ];
 8                   var num;
 9                   num=Math.floor((Math.random()*2));
10 //把这上面的数字改成添加的每日一言数量
11                   document.write(st[num]);
12                   var cli;
13                   
14               </script>
15               <div style="font-size: 1em; text-align: center; line-height: 1.5em; display: none; " id="qwq"></div>
16               <div style="text-align: right;  margin-top: 15px; font-size: 0.9em; color: #666; display: none; " id="qwq"></div>
17             </div>
18 
19 //名言都是自己找的，才不会给你按照格式自己加吧略略略

每日一言

看板娘（放在“侧边栏”里）

直接粘过去应该没问题，但是建议把里面的css和js文件都存到自己的博客文件里，重新加一遍链接，因为现在里面的都是直接连到我的博客文件的，万一哪天我整理下博客把文件改个名挪个地方你那里就崩了……

（想从右边挪到左边把waifu1.css改成waifu.css即可）

看板猫镇楼不想给你略略略……

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 4 <title>Live2D</title>
 5 
 6 
 7 <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/DarthVictor/waifu1.css"/>
 8 <script src="https://files.cnblogs.com/files/DarthVictor/jquery.min.js"></script>
 9 </head>
10 <body>
11 <div class="waifu" id="waifu">
12 <div class="waifu-tips" style="opacity: 1;"></div>
13 <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
14 <div class="waifu-tool">
15 <span class="fui-home"></span>
16 <span class="fui-chat"></span>
17 <span class="fui-eye"></span>
18 <span class="fui-user"></span>
19 <span class="fui-photo"></span>
20 <span class="fui-info-circle"></span>
21 <span class="fui-cross"></span>
22 </div>
23 </div>
24 <script src="https://files.cnblogs.com/files/DarthVictor/live2d.min.js"></script>
25 <script src="https://files.cnblogs.com/files/DarthVictor/waifu-tips.js"></script>
26 <script type="text/javascript">initModel()</script>
27 </body>
28 </html>
29 <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/DarthVictor/flat-ui.min.css"/>

看板娘

小人时钟（放在“侧边栏”里）

1 <!-- 小人时钟 -->
2 <embed allowscriptaccess="never" allownetworking="internal" invokeurls="false" src="https://files.cnblogs.com/files/mmzs/flashDate.swf"
3 pluginspage="https://files.cnblogs.com/files/mmzs/flashDate.swf" type="application/x-shockwave-flash" quality="high" autostart="0" wmode="transparent" width="220"
4 height="65" align="middle">
5 </div>

小人时钟

仓鼠（放在“侧边栏”里）

1 </script>
2 <!-- 小老鼠游戏控件 -->
3 <div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;" data="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2F&up_tailColor=E6DEBE&" width="200" height="160"><param name="movie" value="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2E&up_tailColor=E6DEBE&"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"></object></div>

仓鼠

回到顶部（放在“页首”里）

怎么调位置自己琢磨吧，我调了半天现在忘了咋调了……

 1 <style>
 2 #back-top {
 3      position: fixed;
 4      bottom: 60px;
 5      right: 1360px;
 6      z-index: 99;
 7 }
 8 #back-top span {
 9      width: 50px;
10      height: 64px;
11      display: block;
12      background:url(http:) no-repeat center center;
13 //上面放回到顶部图标的网址
14 }
15 #back-top a{outline:none}
16 </style>
17 <script type="text/javascript">
18 $(function() {
19     // hide #back-top first
20     $("#back-top").hide();
21     // fade in #back-top
22     $(window).scroll(function() {
23         if ($(this).scrollTop() > 500) {
24             $('#back-top').fadeIn();
25         } else {
26             $('#back-top').fadeOut();
27         }
28     });
29     // scroll body to 0px on click
30     $('#back-top a').click(function() {
31         $('body,html').animate({
32             scrollTop: 0
33         }, 800);
34         return false;
35     });
36 });
37 </script>
38 <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

回到顶部

点击特效（放在“页脚”里）

 1 <script type="text/javascript">
 2 /* 鼠标特效 */
 3 var a_idx = 0;
 4 jQuery(document).ready(function($) {
 5     $("body").click(function(e) {
 6         var a = new Array("welcome","博客园");
 7 //内容自己加
 8         var $i = $("<span></span>").text(a[a_idx]);
 9         a_idx = (a_idx + 1) % a.length;
10         var x = e.pageX,
11         y = e.pageY;
12         $i.css({
13             "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
14             "top": y - 20,
15             "left": x,
16             "position": "absolute",
17             "font-weight": "bold",
18             "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
19         });
20         $("body").append($i);
21         $i.animate({
22             "top": y - 180,
23             "opacity": 0
24         },
25         1500,
26         function() {
27             $i.remove();
28         });
29     });
30 });

点击特效

底部小鱼（放在“页脚”里）

1 </script>
2 <!-- 底部加了小鱼<?)))><<~ -->
3   <div id="jsi-flying-fish-container" class="container"></div>
4   <script src='https://blog-static.cnblogs.com/files/elkyo/fish.js'></script>
5   <style>
6   @media only screen and (max-width: 767px){
7   #sidebar_search_box input[type=text]{width:calc(100% - 24px)}
8   }
9   </style>

小鱼

生成索引目录（放在“页脚”里）

本来点击目录是可以跳转到相应章节的，但是不知道为啥加了下面的音乐播放器之后跳转不了了，只是生成了个目录……

 1 <script src="http://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>
 2 <script language="javascript" type="text/javascript">
 3 //生成目录索引列表
 4 function GenerateContentList()
 5 {
 6     var jquery_h3_list = $('#cnblogs_post_body h1');//如果你的章节标题不是h3,只需要将这里的h3换掉即可
 7     if(jquery_h3_list.length>0)
 8     {
 9         var content = '<a name="_labelTop"></a>';
10         content    += '<div id="navCategory">';
11         content    += '<p style="font-size:18px"><b>阅读目录</b></p>';
12         content    += '<ul>';
13         for(var i =0;i<jquery_h3_list.length;i++)
14         {
15             var go_to_top = '<div style="text-align: right"><a href="#_labelTop"></a><a name="_label' + i + '"></a></div>';
16             $(jquery_h3_list[i]).before(go_to_top);
17             var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
18             content += li_content;
19         }
20         content    += '</ul>';
21         content    += '</div>';
22         if($('#cnblogs_post_body').length != 0 )
23         {
24             $($('#cnblogs_post_body')[0]).prepend(content);
25         }
26     }    
27 }
28 GenerateContentList();
29 </script>

索引目录

原文地址：https://www.cnblogs.com/DarthVictor/p/12743678.html

博客美化代码整理

前言