自己用的博客园主题分享(博客园美化diy)

本博客主题分享，算不上特别好看吧，但是比博客园原来的好看一些，我自己觉得！不接受反驳

选择主题为：（然后保存）

页面定制css代码

/*溢出隐藏设置*/
 #topics, #mainContent {
     overflow: visible;
 }
 #postDesc {
     float: none;
 }


#gotop-fixed .call i{
display: inline-block !important;
line-height: 20px !important;
}


#gotop-fixed .call{
background-color: #457CE6 !important;
}

#gotop-fixed .goTop{
background-color: #457CE6 !important;
opacity: 0.8;
}



@media screen and (max-width: 500px){
    body{
        color: red;
    }
    #page_begin_html a{
      display: none;
    }
}
#header {
	height:37px;
	width:100%;
	background-color:#ffffff !important;
	transition:height 0.3s;
	-moz-transition:height 0.3s;
	/* Firefox 4*/
	-webkit-transition:height 0.3s;
	/* Safari and Chrome*/
	-o-transition:height 0.3s;
	/* Opera*/
}
.sticky-wrapper {
	transition:height 0.3s;
	-moz-transition:height 0.3s;
	/* Firefox 4*/
	-webkit-transition:height 0.3s;
	/* Safari and Chrome*/
	-o-transition:height 0.3s;
	/* Opera*/
}
#page_begin_html a img {
	border:none;
	position:fixed;
	z-index:99999999;
}
#gotop-fixed a:first-child i {
	margin-left:-1px !important;
}
#blog-comments-placeholder {
	border:solid 1px #CCC;
	border-radius:0px;
}
#blog-comments-placeholder {
	border:solid 1px #CCC;
	border-radius:0px;
	margin:5px;
}
#MySignature {
	border:solid 1px #E5E5E5;
	padding:10px;
	background:#E5EEF7 url(http://images.cnblogs.com/cnblogs_com/grenet/226272/o_o_o_info.png) no-repeat scroll 15px 50%;
	padding-left:80px;
}
#MySignature div {
	line-height:20px;
}
#footer {
	width:100% !important;
	margin-top:35px !important;
	background-color:#8a8a8a;
	color:#fff;
}
.postDesc,.postDesc2,.entrylistItemPostDesc {
	border-bottom:1px dashed #e8e7d0;
	text-align:right;
	margin:20px 0;
	padding:10px 0;
}
.postTitle,.postTitl2,.entrylistPosttitle {
	font-size:20px;
	padding-right:64px;
	padding-left:10px;
	border-left-width:3px;
	border-left-style:solid;
	border-left-color:#797676;
}
#sideBar {
	width:210px;
	padding:33px;
	display:inline-block;
	overflow:hidden;
	color:#2d2d2d;
}
#mainContent {
	width:900px;
	background:#fff;
	box-shadow:0 0 8px #999;
	-moz-box-shadow:0 0 8px #999;
	-web-kit-shadow:0 0 8px #999;
	border-radius:6px;
	-moz-border-radius:6px;
	-web-kit-shadow:6px;
	float:left;
	display:inline-block;
}
#navigator,#blogTitle,#main,#footer {
	width:1190px;
	position:relative;
	margin:0 auto;
}
.forFlow img {
	margin-top:0px;
	margin-bottom:20px;
}
.blogStats {
	color:#888;
	font-size:12px;
	text-align:right;
}
#navList li a:hover {
	background-color:#54585a;
	margin-top:-2px;
	padding-bottom:12px;
	color:#fff;
	opacity:1;
}
#navList li a {
	font-size:15px;
	text-decoration:none;
	color:#888;
	padding:10px;
	background-color:#fff;
	/* border:1px #ddd;
	*/
}
body {
	background-image:none;
	background-repeat:repeat;
	background-color:#fffbfb;
}
#main {
	margin-top:6px;
	background-color:#f5f5f5;
	margin-bottom:0;
	box-shadow:1px 1px 5px #ddd;
}
#banner {
	position:relative;
	/* box-sizing:border-box; */
	height:350px;
	color:#fff;
	width:100%;
	background-image:url(https://ae01.alicdn.com/kf/H02e2efc94ea14bb996f97c7fad43a11cX.jpg); 
	background-repeat:no-repeat;
	background-attachment:fixed;
    background-position:center;
	position:relative;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	background-size:cover;
	-o-background-size:cover; 
	transition:height 0.3s;
	-moz-transition:height 0.3s;
	/* Firefox 4*/
	-webkit-transition:height 0.3s;
	/* Safari and Chrome*/
	-o-transition:height 0.3s;
	/* Opera*/
}
#banner:before {
	content:" ";
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:#000;
	opacity:0.5;
}
#banner .container-fluid {
	position:relative;
	top:35px;
}
#banner p {
	font-weight:400;
	line-height:40px;
	text-transform:none;
	text-align:center;
	color:#fff;
}
#banner p:first-child {
	padding-top:80px;
	font-size:2.3rem;
	padding-bottom:10px;
}
#banner p.banner-btn {
	cursor:pointer !important;
}
#banner p.banner-btn>a {
	display:inline-block;
	margin-top:10px;
	border:1px solid #c2c2c2;
	border-color:rgba(255,255,255,.2);
	border-radius:5px;
	padding:0 10px;
	color:#ccc;
	text-decoration:none;
}
#main {
	margin-top:25px;
	background-color:#f5f5f5;
	margin-bottom:0;
	box-shadow:1px 1px 5px #ddd;
}

/* 滚动条 */

::-webkit-scrollbar {
	width:14px;
	height:14px;
}
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {
	border-radius:999px;
	border:5px solid transparent;
}
::-webkit-scrollbar-track {
	box-shadow:1px 1px 5px rgba(0,0,0,.2) inset;
}
::-webkit-scrollbar-thumb {
	min-height:20px;
	background-clip:content-box;
	box-shadow:0 0 0 5px rgba(0,0,0,.2) inset;
}
::-webkit-scrollbar-corner {
	background:transparent;
}



/*隐藏广告*/
	#site_nav_under {
	display:none;
}
.c_ad_block,.ad_text_commentbox {
	display:none;
	margin:0;
	padding:0;
}
#ad_under_google {
	height:0;
	overflow:hidden;
}
#ad_under_google a {
	display:none;
}
#ad_t2 {
	display:none;
}

页首HTML代码，把这段代码复制到你的博客设置，搜索codedisco 替换成你的博客名，再上传我这个文件包，到你的博客后台文件

<a href="https://github.com/qq863391602"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_left_green_007200.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>

<script src="https://blog-static.cnblogs.com/files/codedisco/goTop.js"></script> 这是返回顶部插件（复制记得去掉此文字）
<link type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/codedisco/layui.css" /> layui框架
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/codedisco/zoom.css"> 图片放大
<script src="https://blog-static.cnblogs.com/files/codedisco/disco.js?t=v1.3"></script>  自己写的一些js
<script src="https://blog-static.cnblogs.com/files/codedisco/index.js"></script> 
<script src="https://blog-static.cnblogs.com/files/codedisco/zoom.min.js"></script> 图片放大js
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="https://blog-static.cnblogs.com/files/codedisco/canvas.js"></script> 背景canvas动画
<script src="https://cdn.bootcss.com/jquery.sticky/1.0.4/jquery.sticky.min.js"></script>  顶部跟随

<link  type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/feedback.css">
<script>
　　//打赏插件
    window.tctipConfig = {
      staticPrefix: "http://static.tctip.com",
      buttonImageId: 7,
      buttonTip: "dashang",
      list:{
        alipay: {qrimg: "https://ae01.alicdn.com/kf/H3eb2c5537723410b81279ea70053d0edr.png"},
        weixin:{qrimg: "https://ae01.alicdn.com/kf/Haf404f4eef5e4c26bb0900b8b64109a4K.jpg"},
      }
    };
</script>
<script src="https://files.cnblogs.com/files/hafiz/tctip.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/myRewards.css">

页脚HTML代码

<script type="text/javascript">
$(function(){
     $('#cnblogs_post_body img').attr('data-action', 'zoom');
    $('#blogTitle h1').addClass('bounceInLeft animated');
    $('#blogTitle h2').addClass('bounceInRight animated');
    // 删除反对按钮
    $('.buryit').remove();
    initCommentData();
});

首页banner图，和返回顶部，订阅我的跳转地址在discode.js里面可以改，自己自行更改，再上传就好了。

文件包地址:https://lanzous.com/icrpzji

如果此文对你有帮助，请动动小手给我点个关注，老哥！

来源：oschina

链接：https://my.oschina.net/u/4416758/blog/4314592

标签

webkit