自己曾经用过的皮肤风格[2018上半年]

自定义的模板皮肤是：

 

下面是定制化过程：

页面定制CSS代码：

#home {
    margin: 0 auto;
    width: 60%;
    min-width: 950px;
    background-color: #fff;
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
/*首页 横栏 字体变大+ 点击前颜色会变 */
#navList {
    min-height: 30px;
    float: left;
    font-size: 18px;
}
#navList a{
    padding-top: 15%;
}
#navList a:hover {
    color:   #4C9ED9;
}
/*右侧栏 背景色 */
.catListTitle {
    font-weight: bold;
    line-height: 1.2;
    font-size: 2.35em;
    margin-top: 21px;
    margin-bottom: 10.5px;
    border-left: 10px solid #99CC33;
    padding: 10px 0 10px 14px;
    text-align: left;
    background-color: #f7f7f7;
}

/*分享框*/
#green_channel {
    padding: 10px 0;
    margin-bottom: 10px;
    margin-top: 10px;
    border: silver 1px dashed;
    font-size: 12px;
    width: 800px;
    text-align: center;
}
/*评论框 */
#comment_form_container .comment_textarea {
    width: 750px;
    height: 200px;
    font-size: 13px;
    padding: 8px;
    margin-bottom: 10px;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

/*屏蔽广告 */
#ad_t2 {
    display: none;
}
.c_ad_block {
    display: none;
}

/* 设置博客正文一二三级标题格式 */
/* 一级标题 */
#cnblogs_post_body h1 {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    color: black;
    margin: 10px 0;
}
/* 二级标题 */
#cnblogs_post_body h2:hover {
    transform: rotateX(360deg);
    background-color: #0066FF;
}
#cnblogs_post_body h2 {
    background: #169FE6;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 22px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 0 0;
    padding: 5px 0 5px 5px;
    transition: all 0.8s;
}
/* 三级标题 */
#cnblogs_post_body h3:hover {
    transform: rotateX(360deg);
    background-color: #0066FF;
}
#cnblogs_post_body h3 {
    background: #6FA833;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 18px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 0 0;
    padding: 5px 0 5px 5px;
    transition: all 0.8s;
}

/*  正文 
#cnblogs_post_body p {
    font-size: 15px;
    line-height: 25px;
}*/

/*推荐框*/
#div_digg {
    position: fixed;
    bottom: 10px;
    right: 255px;
    padding: 10px;
    width: 48px;
    background-color: #fff;
    border-radius: 5px 5px 5px 5px !important;
    box-shadow: 0 0 0 0px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    z-index: 999999;
}
* {
    margin: 0;
    padding: 0;
}
.diggit {
    background: url(//images.cnblogs.com/cnblogs_com/cnsevennight/666322/o_diggit.png) no-repeat;
}
* {
    margin: 0;
    padding: 0;
}
div {
    display: block;
}
.postBody {
    line-height: 1.5em;
}
.postBody {
    padding: 5px 2px 5px 5px;
    color: #000;
    line-height: 1.5em;
}
/* 隐藏反对按钮 */

.buryit {

display:none;

}
#div_digg .diggnum {
    line-height: 3.5em!important;
}
* {
    margin: 0;
    padding: 0;
}


#AllanboltSignature {
    border-top: #e0e0e0 1px dashed;
    border-right: #e0e0e0 1px dashed;
    border-bottom: #e0e0e0 1px dashed;
    border-left: #e0e0e0 1px dashed;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    font-family: 微软雅黑;
    font-size: 11px;
}
.postBody {
    font-size: 14px;
}


//------------------------------------------------------------------------------



/* 评论区 */

.feedback_area_title,
#commentform_title,
.entrylistTitle,
.myposts_title {
    font-size: 1.2rem;
    color: white;
    background-color: #009688;
    width: 900px;
    padding: 0.4rem 0.6rem;
    box-sizing: border-box;
    margin-bottom: 1rem;
}

.feedbackItem {
    margin-bottom: 1rem;
    position: relative;
}

.feedbackListSubtitle {
    color: white;
    font-size: 0;
}

.feedbackManage {
    z-index: 5;
    font-size: 1rem;
    position: absolute;
    bottom: 0.6rem;
    right: 1rem;
}

a.layer {
    font-style: italic;
    position: absolute;
    font-size: 3.5rem;
    color: black;
    opacity: 0.1;
    bottom: 0;
    right: 1rem;
    z-index: 1;
}

.comment_date {
    font-size: 1rem;
    position: relative;
    left: 0.5em;
    color: gray;
}

.blog_comment_body {
    margin: 8px;
}

.comment_vote {
    text-align: left;
    position: relative;
    right: 0.6rem;
}

a[id^='a_comment_author'] {
    font-size: 1rem;
    float: left;
}

.louzhu::before,
.comment_my_posted b::before,
.new-comment-title a:nth-child(2)::before {
    color: white;
    font-size: 1rem;
    content: '博主';
    display: inline-block !important;
    background-color: darkblue;
    padding: 0 0.2rem;
    border-radius: 4px;
    vertical-align: bottom;
}

.louzhu::before {
    margin-left: 0.5rem;
}

.sendMsg2This {
    display: none;
}

legend > a::before {
    content: '查看';
}

.comment_quote,
.postBody blockquote {
    position: relative;
    border: none;
    border-left: 10px solid lightgray;
    background-color: rgba(0, 0, 0, 0.05);
}

#comment_form {
    position: relative;
}

#comment_nav {
    width: 900px;
    margin: 2rem 0;
}


/* 发布评论 */

#comment_nav > a,
#span_refresh_tips,
#btn_comment_submit,
#commentbox_opt a {
    padding: 0.6rem 0.8rem;
    background-color: #009688;
    color: white !important;
    margin: 1.2rem;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

#span_refresh_tips {
    display: none;
}

#commentform_title {
    background-image: none;
    position: relative;
    right: 1rem;
    bottom: 0.6rem;
    margin-bottom: 0;
}

#tip_comment {
    position: absolute;
    top: 0.1rem;
}

#tbCommentAuthor {
    background: none;
    border: none;
    padding: 0;
    font-size: 1rem;
    width: calc(100% - 3rem);
}

.comment_my_posted > img {
    display: none;
}

.comment_my_posted b::before {
    margin-right: 0.5rem;
    font-weight: 500;
    content: '发布中';
    background-color: skyblue;
}

.new-comment-title .comment_date {
    display: none;
}

.new-comment-title a:nth-child(2) {
    float: left;
}

.new-comment-title a:nth-child(2)::before {
    margin-right: 0.5rem;
    content: '已发布';
    background-color: lightgreen;
}

.new-comment-title a {
    float: right;
}

#tbCommentBody {
    height: 10rem;
    width: 860px;
    font-size: 1rem;
    font-family: 'Monaco', '文泉驿微米黑', '微软雅黑';
    resize: none;
}

#btn_comment_submit {
    border: none;
    width: unset;
    height: unset;
    font-size: 1rem;
}

#commentbox_opt a:last-child {
    background-color: gray;
}

#comment_form_container > p:nth-last-child(2) {
    color: gray;
    bottom: 2rem;
    position: relative;
    float: right;
}

 

博客侧边栏公告（支持HTML代码）（支持JS代码）：

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528539982629&di=d9dbde64c5bbbda739a32038ef48e0b8&imgtype=0&src=http%3A%2F%2Fimg3.itboth.com%2F54%2F56%2FA73yIn.png" class="img_avatar" width="150px" style="border-radius:50%">

<div id="AllanboltSignature">    
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="知识共享许可协议" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br />本作品采用<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>进行许可。
<div>出处：<a href="https://www.cnblogs.com/X-knight//" target="_blank">https://www.cnblogs.com/X-knight/</a></div>
</div>




<script type="text/javascript">     //右侧边框目录
//以下是锚点JS
var a = $(document);
a.ready(function() {
    var b = $('body'),
        d = 'sideToolbar',
        e = 'sideCatalog',
        f = 'sideCatalog-catalog',
        g = 'sideCatalogBtn',
        h = 'sideToolbar-up',
        i = '<div id="sideToolbar"style="display:none;">\<div class="sideCatalogBg"id="sideCatalog">\<div id="sideCatalog-sidebar">\<div class="sideCatalog-sidebar-top"></div>\<div class="sideCatalog-sidebar-bottom"></div>\</div>\<div id="sideCatalog-catalog">\<ul class="nav"style="width:225px;zoom:1">\</ul>\</div>\</div>\<a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable"></a>\</div>',
        j = '',
        k = 200,
        l = 0,
        m = 0,
        n = 0,
        //限制存在个数，如数量过多，则只显示h2，不显示h3
        //o, p = 13,
        o, p = 100,
        q = true,
        r = true,
        s = b;
    if(s.length === 0) {
        return
    };
    b.append(i);
    //指定获取目录的范围-------------这一点非常重要，因为每个人指定的范围都不一样，所以这是要修改的地方
    //o = s.find(':header');
    o = $('#cnblogs_post_body').find(':header')
    if(o.length > p) {
        r = false;
        var t = s.find('h2');
        var u = s.find('h3');
        if(t.length + u.length > p) {
            q = false
        }
    };
    o.each(function(t) {
        var u = $(this),
            v = u[0];

        var title = u.text();
        var text = u.text();

        u.attr('id', 'autoid-' + l + '-' + m + '-' + n)
        //if (!u.attr('id')) {
        //    u.attr('id', 'autoid-' + l + '-' + m + '-' + n)
        //};
        if(v.localName === 'h2') {
            l++;
            m = 0;
            if(text.length > 14) text = text.substr(0, 20) + "...";
            j += '<li><span>' + l + '&nbsp&nbsp</span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>';
        } else if(v.localName === 'h3') {
            m++;
            n = 0;
            if(q) {
                if(text.length > 12) text = text.substr(0, 16) + "...";
                j += '<li class="h2Offset"><span>' + l + '.' + m + '&nbsp&nbsp</span><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>';
            }
        } else if(v.localName === 'h4') {
            n++;
            if(r) {
                j += '<li class="h3Offset"><span>' + l + '.' + m + '.' + n + '&nbsp&nbsp</span><a href="#' + u.attr('id') + '" title="' + title + '">' + u.text() + '</a></li>';
            }
        }
    });
    $('#' + f + '>ul').html(j);
    b.data('spy', 'scroll');
    b.data('target', '.sideCatalogBg');
    $('body').scrollspy({
        target: '.sideCatalogBg'
    });
    $sideCatelog = $('#' + e);
    $('#' + g).on('click', function() {
        if($(this).hasClass('sideCatalogBtnDisable')) {
            $sideCatelog.css('visibility', 'hidden')
        } else {
            $sideCatelog.css('visibility', 'visible')
        };
        $(this).toggleClass('sideCatalogBtnDisable')
    });
    $('#' + h).on('click', function() {
        $("html,body").animate({
            scrollTop: 0
        }, 500)
    });
    $sideToolbar = $('#' + d);
    a.on('scroll', function() {
        var t = a.scrollTop();
        if(t > k) {
            $sideToolbar.css('display', 'block');
            $('#gotop').show()
        } else {
            $sideToolbar.css('display', 'none')
            $('#gotop').hide()
        }
    })
});
//以上是锚点JS
//以下是返回顶部JS
$(function() {
    $('body').append('<div id="gotop" onclick="goTop();"></div>');
    /*//把这里转移到了目录CSS中，这样就可以同步了
    $(window).scroll(function () {
                    300 < $(this).scrollTop() ?
                    $('#gotop').show(): $('#gotop').hide()
                });
    */
});

function goTop(u, t, r) {
    var scrollActivate = !0;
    if(scrollActivate) {
        u = u || 0.1;
        t = t || 16;
        var s = 0,
            q = 0,
            o = 0,
            p = 0,
            n = 0,
            j = 0;
        document.documentElement && (s = document.documentElement.scrollLeft || 0, q = document.documentElement.scrollTop || 0);
        document.body && (o = document.body.scrollLeft || 0, p = document.body.scrollTop || 0);
        n = window.scrollX || 0;
        j = window.scrollY || 0;
        s = Math.max(s, Math.max(o, n));
        q = Math.max(q, Math.max(p, j));
        p = 1 + u;
        window.scrollTo(Math.floor(s / p), Math.floor(q / p));
        0 < s || 0 < q ? window.setTimeout('goTop(' + u + ', ' + t + ')', t) : 'undefined' != typeof r && r()
    } else {
        scrollActivate = !0
    }
}
//以上是返回顶部JS
</script>



<script language="javascript" type="text/javascript">    //文本内目录

// 生成目录索引列表
function GenerateContentList()
{
    var mainContent = $('#cnblogs_post_body');
    var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if(mainContent.length < 1)
        return;
 
    if(h2_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content += '<div id="navCategory">';
        content += '<p style="font-size:18px"><b>目录</b></p>';
        content += '<ul>';
        for(var i=0; i<h2_list.length; i++)
        {
            var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>';
            $(h2_list[i]).before(go_to_top);
            
            var h3_list = $(h2_list[i]).nextAll("h3");
            var li3_content = '';
            for(var j=0; j<h3_list.length; j++)
            {
                var tmp = $(h3_list[j]).prevAll('h2').first();
                if(!tmp.is(h2_list[i]))
                    break;
                var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
                $(h3_list[j]).before(li3_anchor);
                li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
            }
            
            var li2_content = '';
            if(li3_content.length > 0)
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
            else
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
            content += li2_content;
        }
        content += '</ul>';
        content += '</div><p>&nbsp;</p>';
        content += '<p style="font-size:18px"><b>正文</b></p>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }   

    var qqinfo =  '<p style="color:navy;font-size:12px">微信：304413803 | 欢迎一起讨论区块链，请备注，谢谢</p>';
    $(mainContent[0]).prepend(qqinfo);
}

GenerateContentList();
</script>

 

页首Html代码：

<link  type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/miangao/maodian.css">

 

页脚Html代码：

<script src="https://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>