自定義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');
      });
}

 

末了, 還能夠根據我的喜愛新增個性化元素, 好比網頁特效, 輸入框特效, 文章底部固定內容, 添加博文目錄, 右邊欄打賞, 浮動音樂播放器等...得空再折騰吧~ 歡迎推薦優質博客和網站~