博客园页面自定义美化分享。---------随时更新；

  1 /* 公共样式区域开始 */
  2 
  3 body,ol,ul,h1,h2,h3,h4,h5,h6,p,dl,dd,fieldset,legend,input,textarea,select {
  4     margin: 0;
  5     padding: 0;
  6 }
  7 
  8 body {
  9     font: 12px "幼圆";
 10     word-wrap: break-word;
 11 }
 12 
 13 /* 去掉线 */
 14 a,u,s,del {
 15     color: #666;
 16     text-decoration: none
 17 }
 18 
 19 /* 去掉默认属性 */
 20 
 21 i,em,b {
 22     font-style: normal;
 23     font-weight: 100;
 24 }
 25 
 26 /* 去掉上下结构时img下面的空隙 */
 27 
 28 img {
 29     vertical-align: middle;
 30 }
 31 
 32 /* 合并相邻边框(细线边框) */
 33 
 34 table {
 35     border-collapse: collapse;
 36 }
 37 
 38 /* 去除前面点 */
 39 
 40 li {
 41     list-style: none;
 42 }
 43 
 44 
 45 /* 公共样式区域结束 */
 46 
 47 
 48 /* ---------------------------  设置背景及样式 -----------------------------  */
 49 
 50 body {
 51     background: rgba(12, 100, 129, 1) url(‘https://images.cnblogs.com/cnblogs_com/jwyblogs/1576071/o_bg.jpg‘) fixed no-repeat;
 52     background-position: 50% 5%;
 53     background-size: cover;
 54 }
 55 
 56 
 57 /* ---------------------------  整个页面 -----------------------------  */
 58 
 59 #home {
 60     margin: 0 auto;
 61     width: 90%;
 62     /*原始65*/
 63     min-width: 980px;
 64     /*页面顶部的宽度*/
 65     background-color: rgba(245, 245, 245, 0.4);
 66     padding: 30px;
 67     margin-top: 50px;
 68     margin-bottom: 50px;
 69     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
 70 }
 71 
 72 /* --------------------------- 头部：标题加导航区域start-----------------------------  */
 73 
 74 #header {
 75     overflow: hidden;
 76 }
 77 
 78 #blogLogo {
 79     display: none;
 80 }
 81 
 82 /* 头部的标题区域 */
 83 
 84 #blogTitle {
 85     height: 100px;
 87     clear: both;
 88     background-color: rgba(240, 255, 255, 0.5);
 89     margin-top: 30px;
 90     width: 100%;
 91     overflow: hidden;
 92     border-radius: 5px;
 93 }
 94 
 95 #blogTitle h1 {
 96     font: 700 36px/36px "宋体";
 97     width: 50%;
 98     margin-top: 25px;
 99     overflow: hidden;
100 }
101 
102 
103 /* 昵称 */
104 
105 #blogTitle h1 #Header1_HeaderTitle {
106     margin-left: 30px;
107     color: #000;
108     text-shadow: #0d1218 1px 1px;
109 }
110 
111 
112 /* 签名 */
113 
114 #blogTitle h2.bounceInRight {
115     font: 17px/2 "幼圆";
116     color: #FF1493;
117     float: right;
118     width: 30%;
119 }
120 
121 
122 /* 第二块导航区域 */
123 
124 #navigator {
125     background-color: rgba(135, 206, 205, 0.5);
126     margin-top: 20px;
127     height: 54px;
128 }
129 
130 
131 /* 左边的导航 */
132 
133 #navList {
134     float: left;
135     margin-left: 20px;
136 }
137 
138 #navList li {
139     float: left;
140     margin: 0 20px;
141     font: 700 18px/3 "幼圆";
142 }
143 
144 #navList li a {
145     display: block;
146     padding: 0 15px;
147     height: 54px;
148     text-align: center;
149     color: #fff;
150 }
151 
152 #navList li a:hover {
153     background: #CC99FF;
154     color: #000;
155     transition-duration: .3s;
156     text-shadow: 0 0 1px #000;
157 }
158 
159 
160 /* 右边的count */
161 
162 .blogStats {
163     color: #eee;
164     float: right;
165     font: 12px/3 "幼圆";
166     margin: 10px 10px 0 0;
167     text-align: center;
168 }
169 
170 
171 /* --------------------------- 头部：标题加导航区域end-----------------------------  */
172 
173 
174 /* --------------------------- 主体区域start-----------------------------  */
175 
176 #main {
177     min-width: 640px;
178     clear: both;
179     margin-top: 20px;
180 }
181 
182 
183 /* --------------------------- 主体内容区域start-----------------------------  */
184 
185 #mainContent {
186     float: left;
187     width: 80%;
188     padding: 30px;
189     box-sizing: border-box;
190     background: rgba(255, 255, 255, 0.5);
191 }
192 
193 
194 /* 主体区域侧边栏 */
195 
196 #sideBar {
197     float: right;
198     width: 18%;
199 }
200 
201 
202 /* 主体区域博客列表— - - - >博客发布的日期 */
203 
204 .day {
205     /* .day表示整个博文的所有区域，包括标题，内容，统计 */
206     border-bottom: 1px dashed #FF0099;
207 }
208 
209 
210 /* 发布日期 */
211 
212 .day .dayTitle{
213     overflow:hidden;
214 
215 }
216 
217 .day .dayTitle a {
218     display: block;
219     font: 16px/2 "微软雅黑";
220     color: #9900FF;
221     text-align: right;
222     width: 15%;
223     float: right;
224 }
225 
226 
227 /* 标题 */
228 
229 .day .postTitle {
230     font: 700 20px/2 "幼圆";
231     width: 100%;
232     clear: both;
233 }
234 
235 .postTitle a {
236     color: #000000;
237     text-shadow: 0 0 1px #669966;
238 }
239 
240 .postTitle a:link,
241 .postTitle a:visited,
242 .postTitle a:active {
243     transition: all 0.4s linear 0s;
244 }
245 
246 .postTitle a:hover {
247     margin-left: 30px;
248     text-decoration: none;
249 }
250 
251 
252 /* 博客的简要内容 */
253 
254 .day .postCon {
255     width: 100%;
256     clear: both;
257     padding: 10px 0;
258     font: 14px/2 "微软雅黑";
259 }
260 
261 .day .postCon .c_b_p_desc {
262     text-indent: 20px;
263     margin-left: 15px;
264     font: 14px/2 "微软雅黑";
265 }
266 
267 
268 /* 阅读全文按钮 */
269 
270 .day .postCon .c_b_p_desc .c_b_p_desc_readmore {
271     display: block;
272     text-align: right;
273     font: 700 12px/2 "微软雅黑";
274     color: #FF0000;
275 }
276 
277 
278 /*附加信息*/
279 
280 .day .postDesc {
281     color: #757575;
282     width: 100%;
283     clear: both;
284     text-align: left;
285     font-family: "微软雅黑", "宋体", "黑体", Arial;
286     font-size: 13px;
287     padding-right: 20px;
288     line-height: 1.8;
289     padding-bottom: 35px;
290 }
291 
292 
293 /* --------------------------- 主体内容区域end-----------------------------  */
294 
295 
296 /* --------------------------- 侧边栏start-----------------------------  */
297 
298 
299 /* 侧边栏父元素公共样式 */
300 
301 #sidebar_news,#blog-calendar,#sidebar_search,#sidebar_shortcut,#sidebar_postcategory,#sidebar_postarchive,#sidebar_imagecategory,#sidebar_topviewedposts {
302     background: rgba(255, 255, 255, 0.5);
303     margin-bottom: 20px;
304     border-radius: 3px;
305 }
306 
307 #sidebar_news,#blog-calendar,#sidebar_search,#sidebar_shortcut,#sidebar_postcategory,#sidebar_postarchive,#sidebar_imagecategory,
308 #sidebar_topviewedposts ul li a {
309     text-indent: 9px;
310 }
311 
312 /* 侧边栏的h3.catListTitle公共样式 */
313 
314 .catListTitle {
315     background-color: rgba(255, 110, 180, 0.6);
316     font: 16px/2 "幼圆";
317     text-align: center;
318 }
319 
320 
321 /* ---------------------------   侧边栏公告 ------------------------------------ */
322 
323 #sidebar_news {
324     font: 14px/20px "幼圆";
325     margin-bottom: 20px;
326     text-indent: 0;
327 }
328 
329 #sidebar_news.newsItem #blog-news #profile_block {
330     padding: 0 9px;
331 }
332 
333 h3.catListTitle{
334      margin:0px;
335 }
336 /* --------  DIY头像 -------- */
337 .headimg{
338     display:block;
339     width:80px;
340     height:80px;
341     border-radius:50%;
342     margin: 12px auto;
343 }
344 
345 
346 /* ---------------------------   侧边栏日历 ------------------------------------ */
347 
348 
349 #blog-calendar td {
350     padding: 5px 3px;
351     font-size: 14px;
352 }
353 
354 #blog-calendar td a {
355     font-weight: bold;
356     color: #59a020;
357 }
358 
359 #blog-calendar table a:hover {
360     color: #59a020;
361     text-decoration: underline;
362     background: transparent;
363 }
364 
365 #blog-calendar table u {
366     text-decoration: none;
367 }
368 
369 
370 /* ---------------------------   侧边栏搜索 ------------------------------------ */
371 
372 
373 #sidebar_search {
374     text-indent: 0;
375 }
376 
377 #sidebar_search .div_my_zzk {
378     margin: 7px 0;
379     padding:0 5px;
380 }
381 
382 #sidebar_search .div_my_zzk .input_my_zzk {
383     width: 59%;
384     border: 1px solid #ccc;
385     background: #F4F4F7;
386     border-radius: 3px;
387     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
388     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
389     -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
390     -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
391     transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
392 }
393 
394 #sidebar_search .div_my_zzk .input_my_zzk:focus {
395     border-color: #66afe9;
396     outline: 0;
397     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
398     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
399 }
400 
401 
402 /* 按钮样式 */
403 
404 #sidebar_search  .btn_my_zzk {
405     position: relative;
406     display: inline-block;
407     font-weight: 400;
408     white-space: nowrap;
409     text-align: center;
410     background-image: none;
411     border: 1px solid transparent;
412     -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
413     box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
414     cursor: pointer;
415     -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
416     transition: all .3s cubic-bezier(.645, .045, .355, 1);
417     -webkit-user-select: none;
418     -moz-user-select: none;
419     -ms-user-select: none;
420     user-select: none;
421     -ms-touch-action: manipulation;
422     touch-action: manipulation;
423     border-radius: 4px;
424     color: rgba(0, 0, 0, 0.65);
425     background-color: #fff;
426     border-color: #d9d9d9;
427 }
428 
429 
430 /* 找找看的input */
431 
432 #q {
433     background: rgba(255, 255, 255, 0);
434     margin: 5px 0;
435     border: 1px solid #000;
436 }
437 
438 #google_q {
439     background: rgba(255, 255, 255, 0);
440     margin: 5px 0;
441     border: 1px solid #000;
442 }
443 
444 
445 /* ---------------------------   侧边栏常用链接 ------------------------------------ */
446 
447 
448 /* #sidebar_shortcut {
449     background: rgba(255, 255, 255, 0.5);
450     margin-bottom: 20px;
451 } */
452 
453 #sidebar_shortcut ul li a {
454     display: block;
455     font: 14px/2 "幼圆";
456     text-decoration: underline;
457     text-indent: 9px;
458 }
459 
460 
461 /* ---------------------------   侧边栏随笔分类------------------------------------ */
462 
463 
464 /*
465 #sidebar_postcategory {
466     background: rgba(255, 255, 255, 0.5);
467 } */
468 
469 #sidebar_postcategory ul li a {
470     display: block;
471     font: 14px/2 "幼圆";
472     text-decoration: underline;
473     text-indent: 9px;
474 }
475 
476 
477 /* ---------------------------   侧边栏随笔档案------------------------------------ */
478 
479 
480 /* #sidebar_postarchive {
481     background: rgba(255, 255, 255, 0.5);
482     margin-bottom: 20px;
483 } */
484 
485 #sidebar_postarchive ul li a {
486     font: 14px/2 "幼圆";
487 }
488 
489 
490 /* ---------------------------   侧边栏相册------------------------------------ */
491 
492 
493 /* #sidebar_imagecategory {
494     background: rgba(255, 255, 255, 0.5);
495     margin-bottom: 20px;
496 } */
497 
498 #sidebar_imagecategory ul li a {
499     display: block;
500     font: 14px/2 "幼圆";
501 }
502 
503 /* ---------------------------   侧边栏阅读排行榜----------------------------------- */
504 
505 
506 /* #sidebar_topviewedposts {
507     background: rgba(255, 255, 255, 0.5);
508     margin-bottom: 20px;
509 } */
510 
511 #sidebar_topviewedposts ul li{
512     margin:10px 0;
513 }
514 #sidebar_topviewedposts ul li a {
515     font: 14px/20px "幼圆";
516 
517 }
518 #TopViewPostsBlock{
519     padding:0  9px;
520 }
521 
522 
523 /* 个性签名 */
524 #MySignature {
525     box-shadow: 8px 1px 10px #989898;
526     padding: 10px;
527     text-shadow: 1px 1px 1px #FFF;
528     font-size: 17px;
529     border-left: solid 5px #55895B;
530     background: #F3F3F3;
531     border-radius: 10px 10px 50% 10px;
532     line-height: 2.4;
533     margin: 40px 0;
534 }
535 
536 #MySignature a {
537     text-decoration: none;
538     color: #4183c4;
539     font-weight: bold;
540 }
541 
542 #MySignature a:hover {
543     text-decoration: underline;
544     color: #f60;
545 }
546 
547 /*底部隐藏作者，隐藏推荐和反对*/
548 #author_profile {
549     display: none;
550 }
551 
552 #div_digg {
553     display: none;
554 }
555 
556 /*隐藏广告*/
557 #ad_t2, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb {
558     display: none;
559 }
560 
561 #footer{
562    font: 12px/2 "微软雅黑";
563    text-align: center;
564    margin-top:15px;
565 }

<!-- 头像 -->
<img src="https://images.cnblogs.com/cnblogs_com/jwyblogs/1576071/o_img.jpg" class="headimg">

<!-- 看板娘 -->
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/clwydjgs/waifu.css"/>
  <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/clwydjgs/waifu.css"/>
      <div class="waifu" id="waifu">
          <div class="waifu-tips" style="opacity: 1;"></div>
          <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
          <div class="waifu-tool">
              <span class="fui-home"></span>
              <span class="fui-chat"></span>
             <span class="fui-eye"></span>
             <span class="fui-user"></span>
             <span class="fui-photo"></span>
             <span class="fui-info-circle"></span>
            <span class="fui-cross"></span>
         </div>
     </div>
     <script src="https://blog-static.cnblogs.com/files/clwydjgs/live2d.js"></script>
     <script src="https://blog-static.cnblogs.com/files/clwydjgs/waifu-tips.js"></script>
     <script type="text/javascript">initModel()</script>

<!-- 鼠标特效 -->
<script type="text/javascript">

(function() {
    var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"],
    index = Math.floor(Math.random() * coreSocialistValues.length);
    document.body.addEventListener(‘click‘,
    function(e) {
        if (e.target.tagName == ‘A‘) {
            return;
        }
        var x = e.pageX,
        y = e.pageY,
        span = document.createElement(‘span‘);
        span.textContent = coreSocialistValues[index];
        index = (index + 1) % coreSocialistValues.length;
        span.style.cssText = [‘z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ‘, y - 20, ‘px; left: ‘, x, ‘px;‘].join(‘‘);
        document.body.appendChild(span);
        animate(span);
    });
    function animate(el) {
        var i = 0,
        top = parseInt(el.style.top),
        id = setInterval(frame, 16.7);
        function frame() {
            if (i > 180) {
                clearInterval(id);
                el.parentNode.removeChild(el);
            } else {
                i += 2;
                el.style.top = top - i + ‘px‘;
                el.style.opacity = (180 - i) / 180;
            }
        }
    }
} ());
</script>

<script type="text/javascript">
$(function(){
    $(‘#blogTitle h1‘).addClass(‘bounceInLeft animated‘);
    $(‘#blogTitle h2‘).addClass(‘bounceInRight animated‘);
    // 删除反对按钮
    $(‘.buryit‘).remove();
    initCommentData();
});
function initCommentData() {
    $(‘.feedbackItem‘).each(function() {
        var text = $(this).find(‘.feedbackListSubtitle .layer‘).text();
        // 将楼层信息放到data里面
        // $(this).find(‘.blog_comment_body‘).attr(‘data-louceng‘, text.replace(/^#/g, ‘‘));
        if($(this).find(‘.feedbackListSubtitle .louzhu‘).length>0) $(this).addClass(‘myself‘);
        var avatar = $(this).find(‘> .feedbackCon > span‘).html() || ‘http://pic.cnitblog.com/face/sample_face.gif‘;
        $(this).find(‘> .feedbackCon > .blog_comment_body‘).append(‘<img class="user-avatar" src="‘+avatar+‘"/>‘)
    });
}

$(document).ajaxComplete(function(event, xhr, settings) {
  // 监听获取评论ajax事件
  if(settings.url.indexOf(‘/mvc/blog/GetComments.aspx‘) >= 0) {
    initCommentData();
  }
});
</script>


<script src="https://files.cnblogs.com/files/hafiz/jquery-migrate-1.2.1.js"></script>


<div id="scrollTop" style="display:none;">
      <div class="level-2"></div>
      <div class="level-3"></div>
</div>
<script src="http://files.cnblogs.com/files/hafiz/scroll2top.js"></script>
<script type="text/javascript">
    UI.global_search();
    var uvOptions = {};
    // !important
    (function() {
        initScrollTop();
    })();
</script>