博客园美化页面(用于笔记)

合集 - 笔记(3)

1.博客园美化页面(用于笔记)2023-12-23

2.Qt&&C++ 实现HTTP Get/Post请求 (笔记)2023-12-233.Qt&&C++ 实现Tcp Server2023-12-24

收起

记录一下博客园美化页面.(皮肤为Geek)

1.打开博客后台->设置

2.设置博客皮肤为 "Custom"

3.勾选禁用默认CSS样式

 

5.添加加载动画

　　a.复制如下代码粘贴到【页首 HTML】

<div id="loading"><div class="loader-inner"></div></div>

　　b.复制如下代码粘贴到【页面定制 CSS】

#loading{bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999;background-color:#f4f5f5;pointer-events:none;}.loader-inner{will-change:transform;width:40px;height:40px;position:absolute;top:50%;left:50%;margin:-20px 0 0 -20px;background-color:#3742fa;border-radius:50%;animation:scaleout 0.6s infinite ease-in-out forwards;text-indent:-99999px;z-index:999991;}@keyframes scaleout{0%{transform:scale(0);opacity:0;}40%{opacity:1;}100%{transform:scale(1);opacity:0;}}

6.复制如下代码粘贴到【页脚 HTML 代码】（如没开通 js 权限请先开通，理由填“适度美化博客”）。

?

<script src="https://blog-static.cnblogs.com/files/guangzan/loader.min.js"></script>

<script>

  const config = {

    // 默认启用皮肤 'reacg'

    // 在这里添加自定义配置

    // 当前为全部使用默认配置

  }

  $.awesCnb(config)

</script>