博客美化完整代码

时至今日，我的博客主题已趋于完美，在我的审美角度来看已然合格，特决定放出源码，该代码前后大约半年的时间都在不断的完善，约有三分之一内容来自网络上的各大神犇的博客，另外三分之二则是我自己断断续续写成的，将删减后，去除大量无太大意义的代码模块，目前这个版本删减了约400行代码，只剩1200行代码。
注：我选用的模板是elf，推荐选用相同的模板，否则可能会有显示bug，以及不能原样照搬我的代码，否则连您的博客标题都和我的一样QAQ，请自行更改相关文字，如有不懂可以在评论区问我。

CSS

注：第二行需要替换成自己的博客的sidebar_links值，否则可能会有一点小小的bug，但基本不影响美观

/*侧边栏链接样式*/
#sidebar_links1543072
{
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    background: #fafcfd;
    margin: 20px 5px;
}
.catList ul li
{
    border-bottom: 1px solid #dadfe1;
    border-top: 1px solid #fff;
    overflow: hidden;
    padding: 5px;
}



/*代码样式*/
.postBody li, .postCon li
{
    margin-bottom:0em !important;
} 
pre 
{
position: relative;
margin-bottom: 24px;
border-radius: 3px;
border: 1px solid #C3CCD0;
background: #FFF;
overflow: hidden;
}
code 
{
display: block;
padding: 12px 24px;
overflow-y: auto;
font-weight: 300;
font-family: Menlo, monospace;
font-size: 0.8em;
}
code.has-numbering 
{
margin-left: 21px;
}
.pre-numbering 
{
position: absolute;
top: 0;
left: 0;
 20px;
padding: 12px 2px 12px 0;
border-right: 1px solid #C3CCD0;
border-radius: 3px 0 0 3px;
background-color: #EEE;
text-align: right;
font-family: Menlo, monospace;
font-size: 0.8em;
color: #AAA;
}
.cnblogs-markdown .hljs 
{
   border: none !important;
}
#cnblogs_post_body th, #cnblogs_post_body td, .cnblogs-post-body th, .cnblogs-post-body td 
{
   border: none !important;
   padding: 0;
}
.postCon 
{
   font-size: 15px;
}
.cnblogs-markdown .hljs, .cnblogs-post-body .hljs 
{
   font-family: "Consolas",sans-serif !important;
   font-size: 15px! important;
}
.cnblogs-markdown .hljs, .cnblogs-post-body .hljs 
{
   font-family: "Courier New",sans-serif!important;
   font-size: 15px!important;
   line-height: 1.5!important;
   padding: 5px!important;
}
#cnblogs_post_body table, .cnblogs-post-body table 
{
   border: none !important;
   border-collapse: collapse;
   word-break: break-word;
}



/*侧边栏链接样式*/
#sidebar_links1543073
{
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    background: #fafcfd;
    margin: 20px 5px;
}
.catList ul li
{
    border-bottom: 1px solid #dadfe1;
    border-top: 1px solid #fff;
    overflow: hidden;
    padding: 5px;
}



/*文章链接样式*/
.postBody a 
{
    text-decoration: none !important; 
}
.postBody a 
{
    color:#158fc2
}
.postBody a:hover 
{
    color:#fa7e43
}



/*文章链接间隔*/
.postSeparator 
{
    clear: both;
    height: 1px;
    border-top: 1px dotted #666;
     100%;
    clear: both;
    float: right;
    margin: 0 auto 0px auto;
}



.commentform 
{
    background: #fff;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    margin: 20px 5px 10px 0;
    padding: 5px;
}



#under_post_news 
{
    display: none;
}



/*字体与图片的大小*/
#cnblogs_post_body img 
{
    /*600px;*/
    max- 100%;
}
#cnblogs_post_body ul 
{
    font-size: 14px;
}
#cnblogs_post_body p, #cnblogs_post_body div 
{
    font-size: 14px;
}
#cnblogs_post_body h1 
{
    font-size: 25px;
}
#cnblogs_post_body h2 
{
    font-size: 22px;
}
#cnblogs_post_body h3 
{
    font-size: 18px;
}
.cnblogs-markdown .hljs, .cnblogs-post-body .hljs 
{
    font-size: 14px !important;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active 
{
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 0 0 1px #b3b4ba;
    line-height: 1.5em;
}
.catListTitle 
{
    font-size: 1.5em;
}
#blog-news 
{
    font-size: 14px;
}
.sidebar-block ul li 
{
    font-size: 14px;
}
.c_b_p_desc 
{
    font-size: 14px;
}
.postDesc 
{
    font-size: 14px;
}
.blog_comment_body 
{
    font-size: 14px;
}


/*评论样式*/
.feedbackListSubtitle {
    color: #726b6b !important;
    border-top: 1px dashed #589cb2 !important;
    padding-top: 5px !important;
}
#blog-comments-placeholder {
    background: #fff;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    margin: 0 5px 40px 0;
    padding: 0 4px 0px 4px;
}
.commentform 
{
    background: #fff;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    margin: 20px 5px 10px 0;
    padding: 5px;
}
.feedbackItem 
{
    margin: -18px 0px;
}
.feedbackListSubtitle a:link
{
    color: #666;
    font-weight: normal;
    margin: 5px;
}
.feedbackCon 
{
    margin: 30px;
    margin-top: 5px;
    position: relative;
}
.feedbackManage 
{
     200px;
    text-align: end;
    float: right;
    margin: 0px 30px;
}
.feedbackListSubtitle 
{
    color: #666;
    border-top: 1px dashed #3061a9;
    padding-top: 5px;
}
.feedbackCon::after 
{
    display:none !important;
}
.feedbackCon::before 
{
    display:none !important;
}
.comment_vote 
{
    text-align: right;
    margin: 5px 0px;
}



/*积分与排名样式*/
#sideBar 
{
    color: #567286 !important;
}
#sidebar_scorerank
{
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    background: #fafcfd;
    margin: 20px 5px;
}
.sidebar-block ul li
{
    border-bottom: 1px solid #dadfe1;
    border-top: 1px solid #fff;
    overflow: hidden;
    padding: 5px;
}



/*小火箭*/
#back-top 
{
     position: fixed;
     bottom: 100px;
     right: 10px;
     z-index: 99;
    opacity: 0.5;
}
#back-top:hover
{
    opacity: 1.0;
}
#back-top span 
{
      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}



/*隐藏博客页尾的版权声明*/
#footer
{
    display:none !important;
}



/*自定义版权声明*/
#gkfooter 
{
    text-align: center;
    min-height: 15px;
    _height: 15px;
    margin-top: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
    text-shadow: 1px 1px 0 #fff;
}


/*手机定制主题*/
@media (max- 767px) 
{
#navigator {
     auto !important;
    font-size: 20px;
    height: 90px !important;
    background: #fff;
    text-align: center;
    margin-top: 20px !important;
    border-radius: 8px;
    box-shadow: 0px 0px 10px #1f7b9b;
    border: 1px solid #1f7b9b;
}
#sideBar
{
    display:none !important;
}
.postTitle
{
    font-size: 1.8em !important;
    font-weight: bold !important;
    line-height: 1.5em !important;
     100% !important;
    clear: both !important;
}
.day
{
    color: #666;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    background: #fff;
    min-height: 10px;
    _height: 10px;
    margin: 0 10px 20px 13px !important;
    padding: 5px 5px 5px 5px;
    position: relative;
    border-radius: 7px 7px 7px 7px;
}
#subtitle 
{ 
    display: none !important;
    float: right;
    font-size: 22px;
    color: #00CED1;
    line-height: 18px;
    margin: 20px 50px 0 0;
}
 #sideBar, body > a,  .postDesc a
{
        display: none;
}
#main,#mainContent
{
         100%;
}
.dayTitle 
{
 0px;    
display:none !important;
}  
#home 
{
    padding-left: 0;
    padding-right: 0;
}
#div_digg
{
     auto;
    padding: 0;
    right: -25px;
    bottom: 3px;
    box-shadow: none;
}
#div_digg .buryit 
{
    display: none;
}
#mainContent .forFlow 
{
    padding-right: 0;
}
#mainContent .post 
{
    padding: 0 20px;
}

#sideBar,#blog-comments-placeholder 
{
    padding: 0 15px;
}
}



/*电脑定制主题*/
#main 
{
     90%;
    margin: 20px auto 0;
}
#mainContent 
{
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    float: left;
     75%;
}
#sideBar 
{
    color: #a8b1ba;
     250px;
    min-height: 200px;
    float: right;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
     25%;
}
#navigator 
{
    height: 30px;
    clear: both;
     90%;
    margin: 0 auto;
}



/*导航栏字体颜色*/
#navList a:link, #navList a:visited, #navList a:active 
{
    color: 	#87CEEB;
}



/*隐藏公告栏下方的个人介绍*/
#profile_block 
{
    margin-top: 5px;
    line-height: 1.5;
    text-align: left;
    display: none;
}



/*标题放大*/
.postTitle, .entrylistPosttitle 
{
    font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 1.8em;
    padding: 5px 5px 5px 0px;
    background: #fff;
    border-radius: 10px 10px 0px 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: font-size 2.5s; /*这里改变的是字体的大小*/
    -moz-transition: font-size 0.5s;
    -webkit-transition: font-size 0.5s;
    -o-transition: font-size 0.5s;
}
.postTitle:hover 
{
    font-size: 2em; 
}



/*导航栏*/

#navigator 
{
    font-size:20px;
    height:45px;
    background:#fff;
    text-align:center;
    margin-top:40px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px #1f7b9b;
    border: 1px solid #1f7b9b; 
}
#navList a 
{
    position: relative;
    font-weight: bolder;
    display: block;
    height: 45px;
    float: left;
    text-align: center;
    padding: .05em 1em;
    font-size: 1.3em;
}
#navList li 
{
    margin:0;
    line-height:42px;
    display:inline-block;
    float:left;
}
#navList li:hover 
{
    background:#1f7b9b;
}
#navList li a 
{
    padding:0 25px;
    text-decoration:none;
    line-height:42px;
    border:0;
    color:#1f7b9b;
    font-weight:bold;
    display:-moz-inline-box;
    display:inline-block;
}
#navList li a:hover 
{
    padding:0 25px;
    text-decoration:none;
    line-height:42px;
    border:0;
    color:#fff;
    font-weight:bold;
    display:-moz-inline-box;
    display:inline-block;
}
.blogStats 
{
    height:22px;
    color:#1f7b9b;
    line-height:42px;
}



/*隐藏原有导航栏*/
#header
{
    display:none;
}



/*博客标题*/
.head
{
    height: 60px;
    line-height:60px;
    padding-left:5%;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    background: #87CEEB;
}
.head h1
{
    float:left;
    200px;
    height: 60px;
    font-weight:bold;
    font-size:26px;
    background-color: #1f7b9b;
    text-align: center;
}
.head h1:hover 
{
    float:left;
    200px;
    height: 60px;
    font-weight:bold;
    font-size:26px;
    background-color: #ff7227;
    text-align: center;
}
.head h1 a {
    color: #00FFFF;
    outline: none;
    -moz-outline: none;
    text-decoration: none;
    font-size: 26px;
}
#blog
{
    font-weight:normal;
    font-size:16px;
    color: #00FFFF;
}
#subtitle
{
    display:block;
    float:right;
    font-size:22px;
    color:#00CED1;
    line-height:18px;
    margin:20px 5% 0 0;
}



/*博客背景图片*/
body 
{ 
     background-color: #efefef;
    background-image:url(http://images.cnblogs.com/cnblogs_com/gongdakai/1525184/o_%E5%8D%9A%E5%AE%A2%E8%83%8C%E6%99%AF3.png); 
     background-repeat: no-repeat; 
     background-attachment: fixed; 
     background-position: center 0; 
     background-size: cover; 
    padding-top:0px;
}



/* 定制公告栏时钟位置 */
#clockdiv 
{
    /* left, center, right */
    text-align: center;
}



/*屏蔽博客园文章下面的广告*/
.c_ad_block 
{
    display: none !important;
}
#ad_t2
{
   display: none !important;
}



/*固定推荐，删除反对*/
#div_digg 
{
    position: fixed;
    bottom: 90px;
    height: 56px;
     45px;
    right: 38px;
    border: 1px solid #fefefe;
    padding: 7px;
    background-color: #fff;
    border-radius: 5px 5px 5px 5px !important;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    opacity: 0.5;
}
.diggnum 
{
    font-size: 16px;
}
.diggword 
{
    display: none;
}
.buryit
{
display:none;
}
.diggit
{
margin-left:0px;

}
#div_digg:hover {
    opacity: 1.0 !important;
}

公告栏

注：按照您自己的喜好，最好适当更改。一定要记得改“Q我吧”模块中表示QQ账号src的参数，改成您自己的QQ。

<font color="black"><center><h1>公  告</h1></center></font>

蒟蒻一枚~~~<br><br>
弱校挣扎的OIer...<br><br>
我的QQ在这哦！2399531787~~~【加好友请注明姓名和来源哦，谢谢各位支持^_^】<br><br>
希望大家多多支持，觉得文章好可以点个赞，动动你的鼠标加下关注哦~~~<br><br>
热爱交友！orz...<br><br>
非常乐意互换友链呐<br><br>
~o( =∩ω∩= )~<br><br>

有事您Q我!!!(点击下方图片建立临时会话)<br><br>

<center>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1820863411&amp;site=qq&amp;menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=1:2399531787:13" alt="有事您Q我" title="有事您Q我">
</a>
</center>
<br>

<!-- 添加公告栏时钟 -->
<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>

页首HTML

注：把第二行的博客名称改为您自己的，第三行的个性签名也改成您自己的，还有导航栏的几个链接也别忘了改成您自己的，头像、音乐、鼠标特效、版权声明等也建议一一更改，如果不知道怎么改可以在评论区问我

<div class="head clearfix">
<h1><a href="https://www.cnblogs.com/gongdakai/">拱垲’<span id="blog">blog</span></a></h1>
<span id="subtitle">主博客 | 双脚踏翻尘世浪， 一肩担尽古今愁。</span>
</div>



<!--博客导航栏 -->
<div id="gkheader">
	<div id="navigator">
<ul id="navList">
<li><a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">博客园</a></li>
<li><a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/gongkai/">首页</a></li>
<li><a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/gongdakai/">技术博客</a></li>
<li><a id="blog_nav_admin" class="menu" rel="nofollow" href="https://i.cnblogs.com/">管理</a></li>
</ul>
	</div>
</div>

页尾HTML

<!--代码-->
<script>
$(function () {
    if ($(".cnblogs-post-body pre > code").length > 0) setCodeRowWithLang($(".cnblogs-post-body pre"));
    else setCodeRowWithLang($(".cnblogs-markdown pre"));
    /* markdown模式下为代码加入行号, 调用插件highlightjs-line-numbers.js */
    hljs.initHighlightingOnLoad();
    hljs.initLineNumbersOnLoad();
});
function setCodeRowWithLang(pre) {
    if (pre && pre.length) {
        pre.each(function () {
            var item = $(this);
            var lang = item[0].className;  
            var langMap = {
                "html": "HTML",
                "css": "CSS",
                "js": "JavaScript",
                "cpp": "C++",
               "cpp prettyprint":"C++",
                "vim": "vim",
            };
            var displayLangText = "";
            if (lang in langMap) displayLangText = langMap[lang];
            else displayLangText = lang;
            item.find('.hljs')
        });
    };
}
</script>
<script src="http://files.cnblogs.com/files/flipped/prettify.js"></script>
<script type="text/javascript">
(function() {
     $("pre").addClass("prettyprint");
     prettyPrint();
})();
</script>



<!--头像-->
<script type="text/javascript" language="javascript">
　　//Setting ico for cnblogs
　　var linkObject = document.createElement('link');
　　linkObject.rel = "shortcut icon";
　　linkObject.href = "https://files-cdn.cnblogs.com/files/gongkai/favicon.ico";
　　document.getElementsByTagName("head")[0].appendChild(linkObject);
</script>

<!--网易云音乐 -->
<script type="text/javascript">
var s = unescape("u0069u0066u0072u0061u006du0065");
var f = '<'+s+' frameborder="no" border="0" marginwidth="0" marginheight="0" width=260 height=86 src="//music.163.com/outchain/player?type=2&id=550456837&auto=0&height=66" class="music" style="z-index: 999;right: 5PX;display: block;bottom: 10px;position: fixed;"></'+s+'>';
$("body").append(f);
</script>
</script>



<script>
function addEvent(target,type,handler){
    if(target.addEventListener){
        target.addEventListener(type,handler,false);
    }else{
        target.attachEvent('on'+type,function(event){
            return handler.call(target,event);
        });
    }
}
var progress = document.createElement('progress');
progress.id = 'progress';
progress.style.cssText = 'position:fixed;left:0;right:0;bottom:0;100%;height:9px;text-align:center;font:12px/12px "瀹嬩綋";';
document.body.appendChild(progress);
var H;
addEvent(window,'load',function(){
	progress.max = H = cnblogs_post_body.scrollHeight;
});
addEvent(window,'scroll',function(){
	var h = document.documentElement.scrollTop || document.body.scrollTop;
	progress.value =  h;
	var radio = (h/H >= 1) ? 1 : h/H;
	progress.innerHTML = progress.title =  Math.floor(100*radio) + '%';	
});
</script>



<div id="gkfooter">
<div id="poweredby">Copyright © 2018 拱垲. All rights reserved.</div>
</div>



<script>  
// 浏览器标题切换  
var OriginTitile = document.title;    // 保存之前页面标题  
var titleTime;  
document.addEventListener('visibilitychange', function(){  
    if (document.hidden){  
        document.title = '喔唷 ￣ω￣ 不小心崩溃辣';  
        clearTimeout(titleTime);  
    }else{  
        document.title = '呀! (o°ω°o)又好啦~ ';  
        titleTime = setTimeout(function() {  
            document.title = OriginTitile;  
        }, 2000); // 2秒后恢复原标题  
    }  
});  
</script>



<!--返回顶部小火箭-->
<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>



<!--代码放置于</body>上方-->
 
<script>
 
!function(){
 
function n(n,e,t){
 
return n.getAttribute(e)||t
 
}
 
function e(n){
 
return document.getElementsByTagName(n)
 
}

function t(){
 
var t=e("script"),o=t.length,i=t[o-1];
 
return{
 
l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,255,255"),n:n(i,"count",99)
 
}
 
}
 
function o(){
 
a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
 
c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
 
}
 
function i(){
 
r.clearRect(0,0,a,c);
 
var n,e,t,o,m,l;
 
s.forEach(function(i,x){
 
for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
 
null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
 
l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
 
t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
 
}),
 
x(i)
 
}
 
var a,c,u,m=document.createElement("canvas"),
 
d=t(),l="c_n"+d.l,r=m.getContext("2d"),
 
x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
 
function(n){
 
window.setTimeout(n,1e3/45)
 
},
 
w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
 
window.onmousemove=function(n){
 
n=n||window.event,y.x=n.clientX,y.y=n.clientY
 
},
 
window.onmouseout=function(){
 
y.x=null,y.y=null
 
};
 
for(var s=[],f=0;d.n>f;f++){
 
var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
 
}
 
u=s.concat([y]),
 
setTimeout(function(){i()},100)
 
}();
 
</script>



<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤","拱大垲棒棒哒","GK最帅","好表脸的说","哼唧","咋地吧","我的bolg我做主","我的代码我做主","OhYeser","开森~皮一下");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>