博客园页面美化源代码

看别人的博客总是花里胡哨，早已羡慕不已，花了点时间整理了下自己博客园的背景

参考原博主链接：https://www.cnblogs.com/Penn000/p/6947472.html，https://www.cnblogs.com/Tangent-1231/p/10393759.html

以下为源代码，可自行修改对应的功能：

1. 页面定制 CSS 代码

#home {margin: 0 auto;width: 80%;/*原始65*/min-width: 980px;/*页面顶部的宽度*/background-color: rgba(245, 245, 245, 0.7);padding: 30px;margin-top: 50px;margin-bottom: 50px;box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}body {background: rgba(12, 100, 129, 1) url('http://images.cnblogs.com/cnblogs_com/Penn000/1013849/o_fr.jpg') fixed no-repeat;background-position: 50% 5%;background-size: cover;
}#blogTitle {height: 100px;  /*高度*/clear: both;background-color: rgba(245, 245, 245, 0);
}#blogTitle h1 {font-size: 36px;font-weight: bold;line-height: 1.8em;/*原始 1.6em*/margin-top: 10px;/*原始 15px */color: #548B54;
}#blogTitle h2 {font-weight: normal;font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/line-height: 1.8;color: #111;font-weight: bold;text-align: right;float: right;
}#navigator{background-color: rgba(33, 160, 139, 0.9);
}#navList a:link, #navList a:visited, #navList a:active{color: #eee;font-size: 18px;font-weight: bold;
}.blogStats{color: #eee;
}.postTitle {border-left: 8px solid rgba(33, 160, 139, 0.68);margin-left: 10px;margin-bottom: 10px;font-size: 20px;float: right;width: 100%;clear: both;
}.postTitle a:link, .postTitle a:visited, .postTitle a:active {color: #21759b;transition: all 0.4s linear 0s;
}.postTitle a:hover {margin-left: 30px;color: #0f3647;text-decoration: none;
}.postCon {float: right;line-height: 1.5em;width: 100%;clear: both;padding: 10px 0;
}.day .postTitle a {padding-left: 10px;
}.day {background: rgba(255, 255, 255, 0.5);
}/*文章附加信息*/.postDesc {background: url(images/posted_time.png) no-repeat 0 1px;color: #757575;float: left;width: 100%;clear: both;text-align: left;font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;font-size: 13px;padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/margin-top: 20px;line-height: 1.8;padding-bottom: 35px;
}.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar{background: rgba(255, 255, 255, 0.5);margin-bottom: 35px;word-wrap: break-word;
}.CalTitle{background: rgba(255, 255, 255, 0);
}.catListTitle{background-color: rgba(33, 160, 139, 0.9);
}#topics{background: rgba(255, 255, 255, 0.5);
}.c_ad_block{display: none;
}#tbCommentBody{width: 100%;height: 200px;background: rgba(255, 255, 255, 0.5);
}#q{background: rgba(255, 255, 255, 0);}.CalNextPrev{background: rgba(255, 255, 255, 0);}.cnblogs_code{background: rgba(255, 255, 255, 0);
}.cnblogs_code div{background: rgba(255, 255, 255, 0);
}.cnblogs_code_toolbar{background: rgba(255, 255, 255, 0);
}.entrylist{background: rgba(255, 255, 255, 0.5);
}#main{
   min-width: 640px;
}

2. 博客侧边栏公告（支持HTML代码）

风格1：

<style>
#back-top { position: fixed; bottom: 10px; right: 5px; z-index: 99;
}#back-top span { width: 50px; height: 64px; display: block; background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
}#back-top a{outline:none}</style>
<script type="text/javascript">
$(function() {// hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(window).scroll(function() {
        if ($(this).scrollTop() > 500) {
            $('#back-top').fadeIn();} else {$('#back-top').fadeOut();}});
    // scroll body to 0px on click
    $('#back-top a').click(function() {$('body,html').animate({
            scrollTop: 0}, 800);
        return false;
    });
});
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3123414813,1502009474&fm=26&gp=0.jpg" alt="Penn000" class="img_avatar" width="210px" height="210px" style="border-radius:10%">

风格2：用以下代码实现小老鼠游戏控件和公告栏时钟控件

<!-- 小老鼠游戏控件 -->
<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="230" 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>

<!-- 公告栏时钟控件 -->
<embed wmode="transparent" src="https://files.cnblogs.com/files/jingmoxukong/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="230" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

3. 页首HTML代码暂时没使用，感兴趣可参考https://www.cnblogs.com/Penn000/p/6947472.html

4.页脚 HTML 代码    --小火箭

<script>!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+(255*Math.random())+","+(255Math.random())+","+~~(255Math.random())+")"}var d=[];e.requestAnimationFrame=function()}(),n()}(window,document);</script>