博客园主题美化（基础篇）

目录

目录

• 目录
• 皮肤选择BlueSky
• 页面定制 CSS 代码
• 页首 HTML 代码
• 页脚 HTML 代码
• 设置签名
• 总结
• 参考

皮肤选择BlueSky

页面定制 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- 500px){
    body{
        color: red;
    }
    #page_begin_html a{
      display: none;
    }
}
#header {
    height:37px;
    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 {
    background:#E5EEF7 no-repeat scroll 15px 50%;
}
#MySignature div {
    line-height:20px;
}
#footer {
    border-top: 1px solid #eef2f8;
    font-size: 13px;
    font-weight: 300;
    margin: 10px 0 0 0;
    padding: 10px 0;
}
.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-3px;
    border-left-style:solid;
    border-left-color:#797676;
}
#sideBar {
    210px;
    padding:33px;
    display:inline-block;
    overflow:hidden;
    color:#2d2d2d;
}
#mainContent {
    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 {
    1190px;
    position:relative;
    margin:0 auto;
}
.forFlow img {
    margin-top:0px;
    margin-bottom:20px;
}
.forFlow p {
    margin-bottom:0px;
}
.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;
}

#banner {
    position:relative;
    /* box-sizing:border-box; */
    height:350px;
    color:#fff;
    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 {
    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;
}
/*隐藏顶支持等内容*/
#blog_post_info {
  display:none;
}
/*隐藏广告*/
#under_post_news {
  display:none;
}

.esa-post-signature {
    padding: 12px 24px 12px 30px;
    margin-top: 15px;
    margin-left: 5px;
    border-left- 4px;
    font-size: 15px;
    line-height: 2;
    border-left-style: solid;
    background-color: #f8f8f8;
    position: relative;
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
    border-left-color: #2D8CF0;
    z-index: 1;
}

.esa-post-signature:before {
    content: "!";
    background-color: #2D8CF0;
    position: absolute;
    top: 25px;
    left: -12px;
    color: #fff;
     20px;
    height: 20px;
    border-radius: 100%;
    text-align: center;
    line-height: 20px;
    font-weight: 700;
    font-size: 14px;
}

页首 HTML 代码

注意：将以下代码中wozixiaoyao替换成你的博客名

<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/wozixiaoyao/goTop.js"></script> <!--这是返回顶部插件（复制记得去掉此文字）-->
<link type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/wozixiaoyao/layui.css" /> <!--layui框架-->
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/wozixiaoyao/zoom.css"> <!--图片放大-->
<script src="https://blog-static.cnblogs.com/files/wozixiaoyao/disco.js?t=v1.3"></script>  <!--自己写的一些js-->
<script src="https://blog-static.cnblogs.com/files/wozixiaoyao/index.js"></script>
<script src="https://blog-static.cnblogs.com/files/wozixiaoyao/zoom.min.js"></script> <!--图片放大js-->
<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">

这个脚本只是引入了一些js和css代码。这些引入的js和css代码如果是自定义的，可以通过博客园的文件上传功能上传。这样自定义文件就可以被引用到。

如何上传文件不赘述，太简单，只是提醒这个步骤。

理论上不一定传到博客园的文件托管系统里。可以传到任何可以被引用和流畅访问的网络存储中。比如gitee，github。

页脚 HTML 代码

<script type="text/javascript">
var url = window.location.href;

$(function(){
    //设置签名
   $('#MySignature .chuchu >a').attr("href", url);
   $('#MySignature .chuchu >a').html(url);
     $('#cnblogs_post_body img').attr('data-action', 'zoom');
    $('#blogTitle h1').addClass('bounceInLeft animated');
    $('#blogTitle h2').addClass('bounceInRight animated');
});
</script>

设置签名的地方设置了一个class样式chuchu，我这里chuchu就是出处的拼音，可以参照下面一节去设置签名。

是为了动态设置出处中的链接。

设置签名

<div class="esa-post-signature"> 
<p>作者： 元宝爸爸</p> 
<p class="chuchu">出处：<a href="https://www.cnblogs.com/wozixiaoyao/p/11965398.html">https://www.cnblogs.com/wozixiaoyao/p/11965398.html</a></p> 
<p>版权：本文采用「<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">署名-非商业性使用-相同方式共享 4.0 国际</a>」知识共享许可协议进行许可。</p> 
<p>觉得文章不错，点个关注呗！</p> 
</div>

总结

总体来说，就是一些js和css样式的调整工作

参考

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