自定义cnblogs样式小结-白红宇

自定义cnblogs样式小结

阅读量：6158 次

发布时间：2019-06-21

本文共 5139 字，大约阅读时间需要 17 分钟。

写在前面:

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

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

除此之外, 还可以新增个性化元素, 比如网页特效, 输入框特效, 文章底部固定内容等...得空再折腾吧~ 欢迎推荐优质博客和网站~

你可能感兴趣的文章