关于本博客的美化

借鉴于博格园各位大佬的成果美化了一下博客，现在把这些分享给各位

【整个页面效果来自 https://www.cnblogs.com/Penn000/p/6947472.html#4061042】

【看板娘和背景雪花效果 来自 https://www.cnblogs.com/yjlblog/p/8724881.html】

【来客访问统计来自 http://www.amazingcounters.com/】

【来客地域分布 http://s11.flagcounter.com/more/wmma/】

【最上面两只猫 一不小心忘记了.....有人知道可以提醒我一下】

-------------------------------------------------------------------分界线------------------------------------------------------------------------------------------------

1首先在 我的博客园-管理-设置之中设计自己博客园的页面样式（必须先申请js权限）

2.1先选择博客皮肤【darkgreentrip】

2.2页面定制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/1439107348s/1295915/o_%E5%AD%A4%E7%8B%AC%E7%9A%84%E5%B7%A1%E7%A4%BC.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);  
}
#main{min-width: 640px;}
.entrylist{background: rgba(255, 255, 255, 0.5);  
}/*雪花*/
#Snow{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99999;background: rgba(125,137,95,0.1);pointer-events: none;
}

2.3博客侧边栏公告 加入以下代码

<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>
<div align="center"><a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=3226698&c=9680407" alt="AmazingCounters.com">a>div>

<a href="https://info.flagcounter.com/wmma"><img src="https://s11.flagcounter.com/count2/wmma/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_0/pageviews_0/flags_0/percent_0/" alt="Flag Counter" border="0">a>

2.4页首Html代码

<a href="#" title="我的站点" target="_Blank" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z">path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm">path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body">path>svg>a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}style>

<a href="https://blog.csdn.net/qq_36215047" title="我的csdn地址" target="_Blank" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z">path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm">path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body">path>svg>a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Live2Dtitle><link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/><link rel="stylesheet" type="text/css" href="assets/waifu.css"/><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">script>
head>
<body><link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/1439107348s/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" style=" z-index: 999"><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/1439107348s/live2d.js">script><script src="https://blog-static.cnblogs.com/files/1439107348s/waifu-tips.js">script><script type="text/javascript">initModel()script>
body>
html>

2.5页脚Html代码

<div class="Snow"><canvas id="Snow">canvas>
div>
<script src="https://blog-static.cnblogs.com/files/1439107348s/xue.js">script>

3最后附上所有的.js|.css路径  下载之后上传到自己的博客园文件中便可

3.1雪花背景

https://blog-static.cnblogs.com/files/1439107348s/xue.js 

3.2看板娘

https://blog-static.cnblogs.com/files/1439107348s/waifu-tips.js

https://blog-static.cnblogs.com/files/1439107348s/waifu.css

https://blog-static.cnblogs.com/files/1439107348s/live2d.js

[所有代码为本博客地址代码，各位在使用的时候注意修改 O__O]

转载于:https://www.cnblogs.com/1439107348s/p/9679573.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！