241216_博客园美化代码

合集 - 博客园(1)

1.241216_博客园美化代码2024-12-16

收起

12月18号对内容进行了更新，以后可能只会替换背景照片，不会对其他内容进行更新了

闲来无事对博客园进行了美化，主题选择了iMetro HD

博客栏侧边公告

<div id="notelog" style="text-align: center;">
    <a href="https://www.cnblogs.com/wozaihu" target="_blank">
        <img src="https://images.cnblogs.com/cnblogs_com/blogs/835558/galleries/2435973/o_241212142129_logo.jpg" alt="我在乎的" style="border-radius: 50%; width: 100px; height: 100px;">
    </a>
</div> 

页面定制CSS代码

/****** 主体修改 ******/
/* 整体页面样式重置与基础配置，设置字体、背景透明度和背景颜色等基础样式 */
#home {
    font-family: "思源宋体", "Times New Roman", serif;
    opacity: 0.9; /* 设置整个#home区域的背景透明度为0.77，取值范围是0到1，0表示完全透明，1表示完全不透明 */
    background-color: #ffffff; /* 设置#home区域的背景颜色为灰色，可按需替换为其他颜色 */
}
/* 屏蔽博客园顶部导航和博客标题元素，使其不显示 */
#top_nav,
#blogTitle {
    display: none;
}
 
/******* 公告修改 ******/
/* 屏蔽公告标题元素，使其不显示 */
div.newsItem > h3 {
    display: none;
}
/* 侧边栏样式设置，让其内部元素左右分布，使用flex布局 */
#sidebar_news_content {
    display: flex;
    justify-content: space-between; /* 使内部元素在水平方向均匀分布，两端对齐 */
}
/* 设置侧边栏中两个元素的宽度占比，各占48%，留出一点间隙 */
#sidebar_news_content #notelog,
#sidebar_news_content #profile_block {
    width: 48%;
}
/* 给公告头像右侧添加黑色边框线 */
#notelog {
    border-right: 2px solid rgb(0, 0, 0);
}
 
/****** 侧边栏修改 ******/
/* 修改日期标题的背景颜色、添加圆角效果 */
.dayTitle {
    background-color: #1a7c39;
    border-radius: 10px; /* 设置四个角的圆角半径为10px，使元素外观更圆润 */
}
/* 给侧边栏新闻区域添加边框、设置边框样式并添加圆角效果 */
#sidebar_news {
    box-sizing: border-box; /* 使元素的宽高包含边框和内边距，方便布局计算 */
    border: 1px solid #1a7c39;
    border-radius: 10px;
}
/* 侧边栏搜索等区域圆角 */
#blog-sidecolumn {
    box-sizing: border-box; /* 使元素的宽高包含边框和内边距，方便布局计算 */
    border-radius: 10px;
}
/* 日期和侧边搜索框样式美化，添加底部和右侧边框，并设置右下角的圆角效果 */
#sidebar_search_box {
    border-bottom: 2px solid #1a7c39;
    border-right: 2px solid #1a7c39;
    border-bottom-right-radius: 10px;
}
 
/****** 广告类 ******/
/* 屏蔽多个广告相关元素，使其不显示 */
#cnblogs_ch,
#under_post_card1,
#under_post_card2,
#under-post-card,
#blog_c1,
#opt_under_post,
#ad_t2,
#cnblogs_c1,
#under_post_news,
#cnblogs_c2,
#under_post_kb {
    display: none;
}
/* 去除博客园会员广告相关元素，使其不显示 */
.charm-bar-wrapper {
    display: none;
}
 
/****** 背景修改 ******/
/* 通用样式，设置页面背景相关属性，如背景图片铺满屏幕、不重复、固定等 */
body {
    background-size: cover; /* 背景图片铺满整个页面可视区域 */
    background-repeat: no-repeat; /* 背景图片不重复显示 */
    background-attachment: fixed; /* 背景图片固定，不会随页面滚动而滚动 */
    background-image: url('https://images.cnblogs.com/cnblogs_com/blogs/835558/galleries/2435973/o_241217132637_bcs1.jpg'); /* 设置电脑端背景图片链接 */
}
/* 手机端适配，针对屏幕宽度小于等于768px的移动端设备，更换背景图片 */
@media (max-width: 768px) {
    body {
        background-image: url('https://images.cnblogs.com/cnblogs_com/blogs/835558/galleries/2435973/o_241217132637_bcs2.jpg'); /* 设置移动端背景图片链接 */
    }
}

页脚HTML代码

<!-- 回到顶部 -->
<style>
  /* 基础样式 */
  #back-top {
    position: fixed;
    bottom: 5rem;
    right: 5rem;
    z-index: 10;
  }
 
  #back-top span {
    width: 36px;
    height: 46px;
    display: block;
    background: url(https://images.cnblogs.com/cnblogs_com/blogs/835558/galleries/2435973/o_241212024656_rocket.png) no-repeat center center;
    background-size: cover; /* 添加这行，让背景图片等比例缩放以适应元素尺寸 */
  }
 
  #back-top a {
    outline: none;
  }
 
  /* 手机端适配，假设屏幕宽度小于768px为手机端情况，可按需调整 */
  @media (max-width: 768px) {
    #back-top {
      bottom: 1.5rem; /* 适当减小距离底部距离 */
      right: 1.5rem; /* 适当减小距离右侧距离 */
    }
    #back-top span {
      width: 20px; /* 缩小按钮宽度 */
      height: 26px; /* 缩小按钮高度 */
      background-size: cover; /* 手机端同样保证背景图片等比例缩放 */
    }
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
  $(function () {
    // 默认是隐藏“回到顶部”按钮
    $("#back-top").hide();
    // 滚动距离顶部500像素时 淡入、淡出
    $(window).scroll(function () {
      if ($(this).scrollTop() > 500) {
        $('#back-top').fadeIn();
      } else {
        $('#back-top').fadeOut();
      }
    });
    // 回到顶部，点击事件
    $('#back-top a').click(function () {
      $('body,html').animate({
        scrollTop: 0
      }, 800);
      return false;
    });
  });
</script>
<p id="back-top" style="display:none" title="回到页面顶部"><a href="#top"><span></span></a></p>
 
<!-- 进度条 -->
<style>
    progress {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
        height: 0.2rem; /* 将高度调小，使线条变细，可按需调整数值 */
        border: none; /* 去掉原来的边框 */
        border-radius: 1rem;
        z-index: 5;
        -webkit-appearance: none;
        appearance: none; /* 去除浏览器默认样式 */
    }
 
    ::-webkit-progress-bar {
        background-color: transparent; /* 设置轨道背景为透明 */
        border-radius: 1rem;
    }
 
    ::-webkit-progress-value {
        border-radius: 1rem;
        background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 彩虹色线性渐变 */
    }
 
    ::-moz-progress-bar {
        border-radius: 1rem;
        background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 针对火狐浏览器设置彩虹色渐变 */
    }
</style>
<script>
    // 生成元素并添加到文档尾部
    var progress = document.createElement('progress');
    progress.id = 'progress';
    document.body.appendChild(progress);
 
    // 计算当前页面的高度并赋值给进度条
    var H;
    window.onload = function () {
        progress.max = H = document.documentElement.scrollHeight || document.body.scrollHeight;
        progress.value = 0;
    }
 
    // 监听滚动，实时计算滚动条进度值
    window.onscroll = function () {
        var h = document.documentElement.scrollTop || document.body.scrollTop;
        progress.value = h;
        var radio = (h / H >= 1)? 1 : h / H;
        progress.innerHTML = progress.title = Math.floor(100 * radio) + '%';
    }
</script>