自定义cnblogs样式小结

 写在前面

　　博客模版(皮肤)很多, 这里选择了一套相对"干净"的模版, 这套模版本身已经很好了, 简约大方, 在此基础上进行改动一下.

　　

 　　1.页面背景图源自网络.

　　2.回到顶部icon源自b站.

　　3.js代码源自推荐博客流云诸葛(https://www.cnblogs.com/lyzg/) 该博主讲的很细致, 理念也很鲜明: 拒绝无意义的花里胡哨.所以也摒弃了回到顶部的定时器.

　　4.博客园后台管理中有关于主页显示模块的设置, 选项>控件显示设置(选中时显示)中可以选择想要展示到主页的模块. 不过发现这一操作时我已经通过css中把一部分控件隐藏了.

　　5.做完后发现一个网站(http://down.admin5.com/texiao/fanhuidingbudaima/)内有各种样式的回到顶部.

　　6.之后也做过一部分修改, 鉴于不是很关键的东西, 也不再对该篇进行修改了. 详看可以通过调试查看样式.

===========================以下为正文.===========================

CSS(直接粘贴到页面定制CSS代码这一栏)

/*主题透明度*/
#home {
    margin: 0 auto;
    width: 90%;
    min-width: 950px;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 30px;
    margin-top: 30px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.7);
    border-radius:10px;
}

/*菜单字体*/
#navigator{
    font-size: 15px;
}

/*背景图*/
body {
    background-image: url(https://download-cdn.oss-cn-hangzhou.aliyuncs.com/img/2.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size: cover;
}

/*侧边栏透明度*/
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory, .input_my_zzk, .Cal, .CalDayHeader, .CalTitle {
    background: rgba(255, 255, 255, 0);
    margin-bottom: 30px;
    word-wrap: break-word;
}

/*日期控件头部透明度*/
.CalTitle td{
    background:  rgba(255, 255, 255, 0)!important;
}

.CalNextPrev {
    text-align:center;
}

/*文章内代码块透明度*/
.cnblogs_code {background:  rgba(255, 255, 255, 0)!important;}
.cnblogs_code_toolbar {background:  rgba(255, 255, 255, 0)!important;}
.cnblogs_code_copy {background:  rgba(255, 255, 255, 0)!important;}
.cnblogs_code_toolbar {display:none;}

/*昵称 评论区透明度*/
.author, .comment_textarea {
    background: rgba(255, 255, 255, 0);
    margin-bottom: 50px;
    word-wrap: break-word;
}

/*隐藏右侧常用链接,最新评论,评论排行榜*/
.catListLink, .catListComment, .catListFeedback{
    display:none;
}

/*隐藏文章底部刷新,返回顶部按钮*/
#comment_nav {
    display:none;
}

/*文章底部昵称一栏的高度*/
#comment_form_container p {
    height: 30px;
}

/*文章评论区宽度*/
#comment_form_container .comment_textarea {
    width: 98%;
    height: 100px;
}

/*隐藏广告区*/
.c_ad_block, .ad_text_commentbox {
    display:none;
}
#ad_t2 {
    display:none;
}

/*隐藏谷歌搜索框*/
#widget_my_google {
    display:none;
}

/*本站搜索框高度*/
.div_my_zzk {
    height: 30px;
}

/* 推荐及反对 */
#div_digg,#footer{text-align:center}
#div_digg{position:fixed;right:180px;bottom:20px;z-index:9999;background-color:#fff;font-size:12px;width:120px;margin:10px 0 0;padding:5px;border:1px solid #00a1d6;border-radius:5px}
#div_digg{width:46px!important;bottom:105px}
#div_digg .diggit{height:46px;}
#div_digg .buryit{height:46px;}
#div_digg{right:6px}
#div_digg,#scrollBtn {opacity:.55}

/*回到顶部*/
.scrollBtn {
    background: url(https://files.cnblogs.com/files/yadongliang/icons.ico);
    position: fixed;
    display:none;
    cursor: pointer;
    height: 48px;
    width: 48px;
    right: 10px;
    bottom: 50px;
    z-index: 9999;
    background-position: -648px -72px;
    background-color: #f6f9fa;
    border: 1px solid #e5e9ef;
    overflow: hidden;
    border-radius: 4px;
}
.scrollBtn:hover{
    background-color:#00a1d6;
    background-position:-714px -72px;
    border-color:#00a1d6
}

JS(保存到文件backTop.js中, 上传文件到自己的博客. 文件>上传)

var BackTop = function(domE, distance) {
    if (!domE) return;

    var AddListener = function(domE, type, fn) {
        if (typeof domE.addEventListener === 'function') {
            AddListener = function(domE, type, fn) {
                domE.addEventListener(type, fn, false);
            };
        } else if (typeof el.attachEvent === 'function') {
            AddListener = function(domE, type, fn) {
                domE.attachEvent('on' + type, fn);
            };
        } else {
            AddListener = function(domE, type, fn) {
                var old = el['on' + type];        
                el['on' + type] = function(){
                    typeof old === 'function' && old.apply(this, arguments);
                    typeof fn === 'function' && fn.apply(this, arguments);
                };
            };
        }
        AddListener(domE, type, fn);
    }

    AddListener(window, 'scroll', throttle(function() {
        toggleDomE();
    }, 100));

    AddListener(domE, 'click', function() {
        window.scrollTo(0,0);
    });

    function toggleDomE() {
        domE.style.display = (document.documentElement.scrollTop || document.body.scrollTop) > (distance || 500) ? 'block' : 'none';
    }

    function throttle(func, wait) {
        var timer = null;
        return function() {
            var self = this,
                args = arguments;
            if (timer) clearTimeout(timer);
            timer = setTimeout(function() {
                return typeof func === 'function' && func.apply(self, args);
            }, wait);
        }
    }
};

页脚HTML引用上传的js文件

(直接粘贴到页脚Html代码这一栏即可.https://blog-static.cnblogs.com/files/yadongliang/backTop.js是刚上传的js文件路径.但用无妨. 如果用我的地址上面js那块就不用创建文件了, 如果采用自己的js文件, 修改一下js文件引用路径就好)

<a href="javascript:;" id="scrollBtn" class="scrollBtn" title=""></a>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/yadongliang/backTop.js"></script>
<script>
    new BackTop(document.getElementById('scrollBtn'))
</script>

以下也是回到顶部的一种~

// 返回顶部事件
function toTop() {
    $('body,html').scrollTop(0)
    $(window).scroll(function(event) {
        if ($(window).scrollTop() > 600) {
          $("#to_top").fadeIn(150);
        } else {
          $("#to_top").fadeOut(150);
        }
    });
    //当点击跳转链接后，回到页面顶部位置
    $("#to_top").click(function() {
        $('body,html').animate({
          scrollTop: 0
        },
        300,'swing');
      });
}

末了, 还可以根据个人喜好新增个性化元素, 比如网页特效, 输入框特效, 文章底部固定内容, 添加博文目录, 右边栏打赏, 浮动音乐播放器等...得空再折腾吧~ 欢迎推荐优质博客和网站~