自己用的博客园主题分享(博客园美化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
如果此文对你有帮助,请动动小手给我点个关注,老哥!