空闲的时候自己根据很多大神的美化教程,把自己的博客园简单装修了下。
再此整理一下美化方式和步骤,如果喜欢本人博客这种风格,可以参考一下这个系列
一、默认皮肤选择
点击博客首页上方“管理”
点击设置,皮肤选择为“SimpleMemory”这一个
并在下方申请JS权限,申请理由填写一下,然后等待审核通过,一般十几分钟。
等待的过程中可以设置下其他的细节,比如博客标题
现在首页基本是这样式的
JS权限开通后就可以在后续使用自定义代码来美化博客了,这个也是前提。
二、图片或文件素材存储和引用方式
1、图片
美化博客园会用到很多图片素材,例如图标、背景图等,美化时需要外链指定,最好的方式就是把需要的图片素材上传到该博客的博客园相册,美化时在用到的地方直接指向相册里的图片。
可以更好更直观更安全的维护素材文件。
位置:博客园首页点击“管理”-相册。
新建一个相册,并把素材上传进去,文件名最好重新定义一下比较直观的名称。
后续内容我会把所用到的素材链接贴出来,可以自行保存后再上传到自己的相册。
获取外链方式:点击相册内对应的图片,会进入到类似贴子的页面,点击图片下方的查看原图
然后复制浏览器地址栏中的链接地址即可。
2、文件
美化过程中还会用到很多文件,例如 js 文件、css 文件、ico 图标、gif 动态图 等,这些文件没办法放到相册,但是博客园提供了文件存储功能,可以把用到的这些类型的文件上传到此处,在通过特定的外链引用
引用方式:https://blog-static.cnblogs.com/files/自己的博客地址后缀/文件名
例如:https://blog-static.cnblogs.com/files/xxhxs-21/favicon.ico
三、右侧回到顶部 Top 插件
图片可以自定义,默认隐藏,只有下翻到一定程度才会显示,点击后回到页面顶端。
1、在管理 - 设置 - 页脚 HTML 代码中填写以下代码
<script type="text/javascript"> // 回到顶部插件 $(function() { // 先隐藏回到顶部组件 #back-top $("#back-top").hide(); // 淡入回到顶部组件 #back-top $(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"><a href="#top"><span></span></a></p>
2、在管理 - 设置 - 页面定制 CSS 代码中填写以下代码
background:url(https://images.cnblogs.com/cnblogs_com/xxhxs-21/1782400/o_220716081416_5ad9ad7857b27.png)no-repeat center center;
图片链接地址换成自己上传到相册内的图片外链地址,也可以使用我这个上面的,但是以防我这边后续会更改素材,对页面有影响,所以最好保存成自己的。
图片:
https://images.cnblogs.com/cnblogs_com/xxhxs-21/1782400/o_220716081416_5ad9ad7857b27.png
#back-top { position: fixed; bottom: 10px; right: 5px; z-index: 99; } #back-top span { width: 150px; height: 174px; display: block; background:url(https://images.cnblogs.com/cnblogs_com/xxhxs-21/1782400/o_220716081416_5ad9ad7857b27.png)no-repeat center center; } #back-top a{outline:none}
保存并查看效果
四、浏览器标签 Logo 美化
图标文件:https://blog-static.cnblogs.com/files/xxhxs-21/favicon.ico(请自行保存并上传到博客园文件内)
把下方代码贴入 页脚 HTML 代码栏中(其中文件地址请换成自己的文件外链地址,不会设置的看第一篇第二节):
<script type="text/javascript" language="javascript"> // 设置博客浏览器图标 Logo var linkObject = document.createElement('link'); linkObject.rel = "shortcut icon"; linkObject.href = "https://blog-static.cnblogs.com/files/xxhxs-21/favicon.ico"; document.getElementsByTagName("head")[0].appendChild(linkObject); </script>
保存查看效果
翻译
搜索
复制
<iframe height="240" width="320"></iframe> 标签:cnblogs,博客园,back,准备,com,top,美化 From: https://www.cnblogs.com/xxhxs-21/p/17217978.html