这次对博客进行了美化，主要有：

1. 背景随机图片
2. 增加时钟，音乐等
3. 更改标签之间的距离
4. 网页模板更换

第一次弄，大部分借鉴于各位园友，实际上对CSS/HTML 也不是很懂--萌新求照顾，但“万丈高楼平地起”，后期加油，毕竟前端挺好玩的。

附上源码：

<!-- 添加公告栏时钟 -->
<div id="clockdiv">
<canvas id="dom" width="120" height="120">时钟canvas</canvas>
</div>
<script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>
<p>签名：</p>
<blockquote ><b  style="front-family:verdana;color:red"><br />"书不记，熟读可记;义不精，细思可精;惟有志不立，直是无着力处。"<br /><br /></b></blockquote>
<hr />
<!--把“XXXXXXXX”替换成你的QQ号-->
<a target="_blank" href="tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=1024593536" target="_blank""><img border="0" src="http://wpa.qq.com/pa?p=1:10245935:13" alt="有事您Q我" title="有事您Q我"></a>
<embed src="//music.163.com/style/swf/widget.swf?sid=29544794&type=2&auto=1&width=320&height=66" width="340" height="86"  allowNetworking="all"></embed>
<p>我的微信在这~WMITLV【加好友请注明姓名和来源。】</p>
<address>
Written by <a href="mailto:1024593536@qq.com">Mayfly</a><p>(点击发送邮件)</p><br />
</address>
<a href="https://info.flagcounter.com/XRTq"><img src="https://s04.flagcounter.com/count2/XRTq/bg_FFFFFF/txt_0A0202/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_0/pageviews_0/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
<!-- 为页面添加爱心特效 -->
<script type="text/javascript">
(function(window,document,undefined){
var hearts = [];
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){
css(".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: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.onclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){
var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}
catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){
return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);
</script>
<link href="http://lib.baomitu.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://lib.baomitu.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</div></div>

body {
color: #000;
background: url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_pic2.jpg) fixed;
background-size: cover;
background-repeat: repeat;
font-family: "微软雅黑","Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}
#blogTitle h1 {
font-size: 50px;
font-family: Consolas;
font-weight: bold;
font-style: italic;
margin-top: 20px;
}
.catListTitle {
margin-top: 21px;
margin-bottom: 10.5px;
text-align: left;
border-left: 10px solid rgba(82, 168, 236, 0.8);
padding: 5px 0 5px 10px;
background-color: rgba(245,245,245,0.3);
}
#home {
margin: 0 auto;
width: 65%;
min-width: 950px;
background-color: rgba(255,255,255,0.8);
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {
background: none;
margin-bottom: 35px;
word-wrap: break-word;
}
#blog-calendar td {
font-size: 12px;
font-family: Consolas;
}
.input_my_zzk {
border: 1px solid #ccc;
background: none;
width: 100%;
height: 25px;
padding-right: 30px;
padding-left: 5px;
outline: 0;
}
.CalDayHeader {
background: rgba(245,245,245,0.3) !important;
font-weight: 100;
color: #5E5F63;
}
.CalTitle {
background: none;
width: 100%;
height: 25px;
text-align: center;
font-size: 14px;
font-weight: bold;
padding: 5px 0;
color: #FFF;
}
.CalTitle td {
background: rgba(245,245,245,0.3) !important;
border: 0px !important;
color: #5E5F63;
font-family: "Comic Sans MS";
}
a:link {
color: cornflowerblue;
}
a:visited {
color: cornflowerblue;
}
a:hover {
color:cadetblue;
}
a:active {
color:black;
}
.CalTodayDay {
background: rgba(247,247,247,0.3) !important;
color: #FFF;
font-weight: bold;
}
.cnblogs_code {
background-color: rgba(247,247,247,0.3);
font-family: Consolas !important;
font-size: 12px!important;
border: 1px solid #ccc;
padding: 5px 10px;
overflow: auto;
margin: 5px 0;
color: #000;
}
.cnblogs_code div {
background-color: rgba(247,247,247,0.3);
}
.cnblogs_code_collapse {
border-right: gray 1px solid;
border-top: gray 1px solid;
border-left: gray 1px solid;
border-bottom: gray 1px solid;
background-color: rgba(247,247,247,0.3);
padding: 2px;
}
blockquote {
background: rgba(247,247,247,0.3);
border: 2px solid #efefef;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
div.commentform input.author, div.commentform input.email, div.commentform input.url {
background-image: url(http://static.cnblogs.com/images/icon_form.gif);
border: 1px solid white !important;
padding: 4px 4px 4px 30px;
width: 300px;
font-size: 13px;
background-color: rgba(247,247,247,0.3);
}
#comment_form_container .comment_textarea {
width: 362px;
height: 200px;
font-size: 13px;
padding: 8px;
margin-bottom: 10px;
color: #555;
border: 1px solid white;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: rgba(247,247,247,0.3);
}
.cnblogs_code pre {
font-family: Consolas !important;
font-size: 12px!important;
word-wrap: break-word;
white-space: pre-wrap;
}
.cnblogs_code span {
font-family: Consolas !important;
font-size: 12px!important;
line-height: 1.5!important;
}
div#cnblogs_c2 {
display: none;
}
div#cnblogs_c1 {
display: none;
}
div#under_post_news {
display: none;
}
div#ad_t2 {
display: none;
}
div#under_post_kb {
display: none;
}
.feedbackItem {
margin: 10px 5px 0px;
padding: 5px;
box-shadow: 0 0 10px 0 #AAA;
}
#topics .postTitle {
font-size:230%;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #21759b;
transition: all 0.4s cubic-bezier(0, 0, 0.12, 1) 0s;
}
#cnblogs_post_body h2 {
border-left: 10px solid rgba(82, 168, 236, 0.3);
background: rgba(247,247,247, 0.3);
padding: 3px 10px;
}
#cnblogs_post_body h3{
border-left: 5px solid rgba(0, 235, 255, 0.3);
padding: 2px 5px;
background: rgba(247,247,247,0.3);
}
#cnblogs_post_body h4{
border-left: 5px solid rgba(222, 101, 114,0.3);
padding-left: 5px;
background: rgba(247,247,247,0.3);
}
#cnblogs_post_body h1{
background: rgba(247,247,247,0.3);
border-left: 15px solid rgba(0, 122, 255, 0.3);
padding: 3px 10px;
font-size: 175%;
border-right: 15px solid rgba(0, 122, 255, 0.3);
}
.buryit {
display: none;
}
#div_digg {
float: right;
position: fixed;
width: auto;
bottom: 10px;
left: 70%;
margin-bottom: 10px;
background: rgba(247,247,247,0.3);
margin-right: 30px;
font-size: 12px;
box-shadow: 0 0 10px 0 #AAA;
padding: 10px;
border: 2px solid rgba(82, 168, 236, 0.8);
text-align: center;
margin-top: 10px;
}
textarea {
background: rgba(247,247,247,0.3);
}
body{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
A{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
#navigatorTitleDiv
{
padding: 3px;
position: fixed;
top:244px;
right:304px;
font-weight:bold;
cursor:pointer;
background-color: antiquewhite;
}
#navigatorDiv
{
border-style:double;
padding: 10px;
padding-top:30px;
position: fixed;
top:240px;
right:300px;
background-color: antiquewhite;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Three.js自定义图像悬停</title>
<style>
html {margin: 0;
padding: 0;
}
html,
body {width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
font-family: 'Lato', sans-serif;
font-size: 16px;
}
.social-icon a {position: fixed;
background: white;
color: white;
display: inline-block;
width: 100px;
height: 100px;
transform: translate(-50%, -50%) rotate(45deg);
transition: .15s ease;
z-index: 30;
}
.social-icon i {position: absolute;
font-size: 1.8em;
pointer-events: none;
z-index: 1000;
}
.social-icon:hover a {transform: translate(-50%, -50%) rotate(45deg) scale(1.05);
}
.youtube a {top: 100%;
left: 0%;
box-shadow: 0px 0px 15px 5px rgba(230, 33, 23, 0.5);
}
.youtube i {left: 8px;
bottom: 8px;
color: #E62117;
}
.github a {top: 100%;
left: 100%;
box-shadow: 0px 0px 15px 3px rgba(126, 126, 126, 0.5);
}
.github i {right: 8px;
bottom: 8px;
}
#canvas-container-1{height: 100%;
width: 100%;
background: black;
}
#canvas-1{display: block;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#site-link{color: #0099ff;
display: inline-block;
position: fixed;
bottom: 4%;
left: 50%;
transform: translate(-50%, 0%);
font-variant: small-caps;
}
/* 定制返回顶部按键 */
#toTop {background: url(//http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_toTop.bmp) no-repeat 0px top;
width: 57px;
height: 57px;
overflow: hidden;
position: fixed;
right: 180px;
bottom: 20px;
cursor: pointer;
}
/* 定制推荐和反对按键 */
#div_digg{position:fixed;
bottom:-10px;
width:120px;
right:20px;
box-shadow: 0 0 6px #0000FF;
border:2px solid #FF0000;
padding:4px;
background-color:#fff;
border-radius:4px 4px 4px 4px !important;
}
.icon_favorite {background: transparent url('http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_kj.gif') no-repeat 0 0;
padding-left: 15px;
}
#blog_post_info_block a {text-decoration: none;
color: #5B9DCA;
padding: 3px;
}
/* 定制公告栏时钟位置 */
#clockdiv {/* left, center, right */
text-align: center;
}
<!-- 为页面添加爱心特效 -->
<script type="text/javascript">
(function(window,document,undefined){var hearts = [];
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){css(".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: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){var old = typeof window.οnclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}
catch(ex){style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);
</script>

<!DOCTYPE html>
<html>
<body>
<style>
#Canvas{position:fixed;
top:0px;
left:0px;
}
</style>
<canvas id="Canvas"></canvas>
<style>
#nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% }
</style>
<script>
window.requestAnimFrame=
window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
function(callback){window.setTimeout(callback, 1000/10);};
var W=document.body.scrollWidth,H=document.body.scrollHeight;
var ca=document.getElementById("Canvas"),el=ca.getContext("2d");
var num=0,SpeedBasic=3,SpeedRand=0.8,angleBasic=0.5,timer,lline=20;
var x=new Array(),y=new Array(),speed=new Array(),angle=new Array(),t=new Array(),TT=new Array();
var img1=new Image(),img2=new Image(),img3=new Image(),img4=new Image();
function RandomNum(Min,Max){
var Range=Max-Min;
var Rand=Math.random();
return(Min+Math.round(Rand * Range));
}
function RandomReal(Min,Max){
return Min+(Max-Min)*Math.random();
}
function abs(W){return W<=0?-W:W;}
function drawtail(px,py,an){
an=Math.atan(an);
for (var i=0;i<10;i++){
var X,Y;
Y=Math.sqrt(RandomReal(0,lline*lline));
X=RandomReal(-Y*5/lline,Y*5/lline)+RandomReal(-Y*5/lline,Y*5/lline);
Y=lline-Y;
X+=10;
el.fillRect(px+(X*Math.cos(an)-Y*Math.sin(an)),py-(X*Math.sin(an)+Y*Math.cos(an)),2,2);
}
}
function drawstar(px,py,ti){
if (ti==1) el.drawImage(img1,px,py,20,20);else
if (ti==2) el.drawImage(img2,px,py,20,20);else
if (ti==3) el.drawImage(img3,px,py,20,20);else
if (ti==4) el.drawImage(img4,px,py,20,20);
}
function drawline(sx,sy,px,py){
el.beginPath();
el.moveTo(sx,sy);
el.lineTo(px,py);
el.stroke();
el.closePath();
}
function dis(sx,sy,px,py){
return Math.sqrt((px-sx)*(px-sx)+(py-sy)*(py-sy));
}
function work(timestamp){
if (RandomNum(0,5)==0){
x.push(RandomNum(0,W));
y.push(RandomNum(0,H));
t.push(0);
TT.push(RandomNum(3,10));
speed.push(SpeedBasic+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand));
angle.push(RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic));
for (;;){
if (Math.random()<=0.7) y[num]=0;else{
y[num]%=200;
if (Math.random()<=0.5) x[num]=0,angle[num]=abs(angle[num]);else x[num]=W-1,angle[num]=-abs(angle[num]);
}
var i;
for (i=0;i<num;i++) if (dis(x[i],y[i],x[num],y[num])<20) break;
if (i==num) break;
x[num]=RandomNum(0,W);y[num]=RandomNum(0,H);
}
num++;
}
el.clearRect(0,0,W,H);
el.fillStyle="#7B68EE";
var tmp;
for (var i=0;i<num;i++)
for (var j=i+1;j<num;j++)
if (dis(x[i],y[i],x[j],y[j])<20){
tmp=speed[i];
speed[i]=speed[j];
speed[j]=tmp;
tmp=angle[i];
angle[i]=angle[j];
angle[j]=tmp;
}
for (var i=0;i<num;i++){
//el.fillRect(x[i],y[i],10,10);
drawtail(x[i],y[i],angle[i]);
drawstar(x[i],y[i],(parseInt(t[i]/TT[i])%4)+1);
y[i]+=speed[i];x[i]+=(speed[i]*angle[i]);
t[i]++;
if (y[i]>=H||x[i]<0||x[i]>=W){
num--;
x[i]=x[num];y[i]=y[num];speed[i]=speed[num];angle[i]=angle[num];t[i]=t[num];TT[i]=TT[num];
x.pop();y.pop();speed.pop();angle.pop();t.pop();TT.pop();
i--;
}
}
timer=requestAnimationFrame(work);
}
timer=requestAnimationFrame(work);
var sta=1;
function control(){
if (sta==1){
cancelAnimationFrame(timer);
ca.style.opacity="0";
sta=0;
}else{
timer=requestAnimationFrame(work);
ca.style.opacity="1";
sta=1;
}
}
function ShowTab(){
dx=document.getElementById("MagicArray");
if (dx.style.width=="200px"){
dx.style.width="0px";
dx.style.height="0px";
dx.style.bottom="100px";
dx.style.right="100px";
dx.style.transform="rotate(0deg)";
}else{
dx.style.width="200px";
dx.style.height="200px";
dx.style.bottom="0px";
dx.style.right="0px";
dx.style.transform="rotate(180deg)";
}
dy=document.getElementsByName("Tab");
for (var i=0;i<y.length;i++){
dx=dy[i];
if (dx.style.fontSize=="15px"){
dx.style.fontSize="0px";
dx.style.transitionDelay="0s";
}else{
dx.style.fontSize="15px";
dx.style.transitionDelay="0.8s";
}
}
}
function ShowPicture(){
dx=document.getElementById("main");
if (dx.style.opacity=="0") dx.style.opacity="0.9";else dx.style.opacity="0";
}
function ChangePicture(){
dx=document.body;
dy=RandomNum(0,14);
if (dy==0){
dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Mayfly-nymph/1233628/o_pic2.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==1){
dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_picture1.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==2){
dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_ghostblade_by_wlop_d8i94nx-fullview.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==3){
dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_164404qas98559n01slq07.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==4){
dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_darvb38-6e015fe5-ca69-4e7f-bfce-9a515a26ba37.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==5){
dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_dba1c7d-ef42bfde-ec75-42d3-8e77-0534f4bcc528.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==6){
dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_dbjz9lh-829f3d6d-50d3-404d-bcd9-9099e59076e2.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==7){
dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Mayfly-nymph/1233628/o_dc4f3ik-1183f349-fc4f-4b07-a3e3-2b238ddb9adb.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==8){
dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_dcauzp2-3acd9be8-5ac6-4747-9b72-f95fe1c3c730.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==9){
dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_fall_by_wlop_dbmfxto-fullview.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==10){
dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_dccxg4s-28ec7113-ec88-4688-96f0-dd8c28e587f5.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==11){
dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_WLOP%20%e9%ac%bc%e5%88%80%20%e5%b0%8f%e7%bb%bf%204K%e5%a3%81%e7%ba%b8.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==12){
dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_wlop%e9%ac%bc%e5%88%80%e9%ab%98%e6%b8%85%e5%a3%81%e7%ba%b81920x1241.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==13){
dx.style.background="url(https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_%e5%a5%b3%e5%ad%a9%e5%92%8c%e7%8c%ab6k%e5%8a%a8%e6%bc%ab%e5%9b%be%e7%89%87.jpg) no-repeat fixed";
dx.style.backgroundSize="cover";
}else if (dy==14){
dx.style.background="url(http://images.cnblogs.com/cnblogs_com/Mayfly-nymph/1233628/o_627cdf7f0c228c9748674e157a179820.png) no-repeat fixed";
dx.style.backgroundSize="cover";
}
}
ChangePicture();
</script>
</body>
</html>

源码下载地址：https://www.lanzous.com/i2a123i

附加（可以自行选择添加）：

仓鼠，小狗等插件源码获取地址：http://abowman.com/

博客时钟：http://www.blogclock.cn/index.aspx

我右上角的旋转方块代码

<style type="text/css">
html,body{height: 120%;}
.wrap{height: 50%;position: relative;
-webkit-transform-style:preserve-3d;
-webkit-perspective:0px;
-moz-transform-style:preserve-3d;
-moz-perspective:0px;
-webkit-animation:mydhua 5s ease infinite;
-moz-animation:mydhua 5s ease infinite;
}
.box{width: 150px;height: 150px;position: absolute;top: 50%;left: 50%;
margin:-100px 0 0 -100px; line-height: 200px;text-align: center;font-size: 48px;color: white;
}
.box1{-webkit-transform:rotatey(90deg) translatez(-75px);
-moz-transform:rotatey(90deg) translatez(-75px);
background: rgba(139, 139, 205, 0.5);
}
.box2{-webkit-transform:rotatey(90deg) translatez(75px);
-moz-transform:rotatey(90deg) translatez(75px);
background: rgba(178, 170, 113, 0.59);
}
.box3{-webkit-transform:rotatex(90deg) translatez(75px);
-moz-transform:rotatex(90deg) translatez(75px);
background: rgba(190, 136, 136, 0.5);
}
.box4{-webkit-transform:rotatex(90deg) translatez(-75px);
-moz-transform:rotatex(90deg) translatez(-75px);
background: rgba(0,204,255,.5);
}
.box5{-webkit-transform: translatez(-75px);
-moz-transform:translatez(-75px);
background: rgba(153,204,255,.5);
}
.box6{-webkit-transform: translatez(75px);
-moz-transform:translatez(75px);
background: rgba(0,255,255,.5);
}
@-webkit-keyframes mydhua{0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
100%{-webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);-webkit-transform-origin: center center; }
}
@-moz-keyframes mydhua{0%{-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
100%{-moz-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg); -webkit-transform-origin: center center;}
}
img {border-radius: 10px;
}
</style>

<div class="wrap">
<div class="box1 box">
<img src="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(14).png"></img>
</div>
<div class="box2 box">
<img src="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(10).png"></img>
</div>
<div class="box3 box">
<img src="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(8).png"></img>
</div>
<div class="box4 box">
<img src="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(6).png"></img>
</div>
<div class="box5 box">
<img src="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(40).png"></img>
</div>
<div class="box6 box">
<img src="https://www.cnblogs.com/images/cnblogs_com/Mayfly-nymph/1233628/o_644%20(10).png"></img>
</div>
</div>

这里面的图片可以自己选择，但是要注意大小哦，如果做博客园博客的美化可以直接把图片放相册，如果是私人博客美化，可以选择床图。

设置侧边栏与主题的位置

（加到页面定制CSS代码）

#mainContent {
min-height: 200px;
padding: 0px 0px 10px 0;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
float: right;
margin-left: -22em;
width: 100%;
}
#sideBar {
margin-top: -15px;
width: 230px;
min-height: 200px;
padding: 0px 0 0px 5px;
float: left;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
}

设置版权信息

加到“页首html”

<script language="javascript" type="text/javascript">
jQuery(document).on('copy', function(e)
{
var selected = window.getSelection();
var copyFooter = '<br>---------------------<br>著作权归作者所有。<br>'
+ '商业转载请联系作者获得授权，非商业转载请注明出处。<br>'
+ '作者：Hk_Mayfly<br> 源地址：' + document.location.href
+ '<br>来源：博客园cnblogs<br>© 版权声明：本文为博主原创文章，转载请附上博文链接！';
var copyHolder = $('<div>', {html: selected + copyFooter, style: {position: 'absolute', left: '-99999px'}});
$('body').append(copyHolder);
selected.selectAllChildren( copyHolder[0] );
window.setTimeout(function() {
copyHolder.remove();
},0);
});
</script>

图片放大

添加进 页面CSS

.post img {
cursor: pointer;
transition: all 0.5s;
}
.post img:hover {
transform: scale(1.3);
}