空闲的时候自己根据很多大神的美化教程，把自己的博客园简单装修了下。
再此整理一下美化方式和步骤，如果喜欢本人博客这种风格，可以参考一下这个系列。
一、Fork me on Gitee / Github 标签
右上角或者左上角的 Fork me on Gitee 或 Github 标签，点击后会跳转到自己的 Gitee 或 Github 主页。
对应的图片（请保存并上传到自己的博客相册内，下方代码中使用自己相册图片的外链，不会设置的看第一篇第二节）：
在 页面定制CSS代码 栏追加以下代码（图片链接请使用自己的）：
左上角：
/*gitee/github*/
.git-link {
z-index: 100;
position: fixed;
top: 0;
left: 0;
border: 0;
height: 149px;
width: 149px;
background-image: url(https://images.cnblogs.com/cnblogs_com/xxhxs-21/1782400/o_220718022301_gitee.png);
}
右上角：
/*gitee/github*/
.git-link {
z-index: 100;
position: fixed;
top: 0;
right: 0;
border: 0;
height: 149px;
width: 149px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
background-image: url(https://images.cnblogs.com/cnblogs_com/xxhxs-21/1782400/o_220718022301_gitee.png);
}
页首HTML代码 栏追加以下代码（其中链接换成自己的Gitee / Github 主页地址）：
<a class="git-link" href="https://gitee.com/stars-he"></a>
二、右侧赞助模块
该模块的实现需要用到一个外部文件：tctip-1.0.3.min.js
把文件上传到自己的博客文件里，把自己的收款码图片上传到博客相册内，
下方代码中的链接换成自己的文件链接，代码中的图片链接换成自己的图片链接。
页脚HTML 代码 栏追加以下代码：
<!-- tctip 支付赞赏/打赏 -->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/xxhxs-21/tctip-1.0.3.min.js?t=1658125772"></script> <!-- js文件引入 -->
<script>
new tctip({
top: '20%',
button: {
id: 1,
type: 'zanzhu',
},
list: [
{
type: 'alipay',
qrImg: 'https://images.cnblogs.com/cnblogs_com/xxhxs-21/1782400/o_220718062341_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220718142257.jpg' //替换成自己的支付宝收款码
}, {
type: 'wechat',
qrImg: 'https://images.cnblogs.com/cnblogs_com/xxhxs-21/1782400/o_220718062329_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220718142246.jpg' //替换成自己的微信收款码
}
]
}).init()
</script>
三、鼠标点击特效
博客侧边栏公告 栏追加以下代码，里面的文字内容可以随便更改。
<script type="text/javascript">
/** 鼠标点击特效 **/
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强","民主","和谐","文明","自由","平等","公正","法治","爱国","敬业","诚信","友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb(72,85,137)"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
四、鼠标指针
自行寻找鼠标指针图标文件，这里不再提供。
/** 鼠标指针 **/
html {
cursor: url('鼠标指针文件链接'), auto;
}
五、音乐播放器插件
暂时忘记步骤了，有时间了再补上。
六、文章随机古诗词
页脚HTML 代码 栏追加以下代码：
<!-- 古诗词 begin-->
<script>
$("#navigator").after('<div class="poem-wrap"><div class="poem-border poem-left"></div><div class="poem-border poem-right"></div><h1>念两句诗</h1><div id="poem_sentence"></div><div id="poem_info"></div></div>')
</script>
<!--添加古诗词-->
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<script type="text/javascript">
jinrishici.load(function(result) {
var sentence = document.querySelector("#poem_sentence")
var info = document.querySelector("#poem_info")
sentence.innerHTML = result.data.content
info.innerHTML = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》'
});
</script>
<!-- 古诗词 end-->
页面定制CSS代码 栏追加以下代码：
/** 古诗词 begin **/
.poem-wrap {
position: relative;
width: 1000px;
max-width: 80%;
border: 2px solid #797979;
border-top: none;
text-align: center;
margin: 40px auto;
}
.poem-left {
left: 0;
}
.poem-right {
right: 0;
}
.poem-border {
position: absolute;
height: 2px;
width: 27%;
background-color: #797979;
}
.poem-wrap p {
width: 70%;
margin: auto;
line-height: 30px;
color: #797979;
}
.poem-wrap h1 {
position: relative;
margin-top: -20px;
display: inline-block;
letter-spacing: 4px;
color: #797979;
font-size: 2em;
margin-bottom: 20px;
}
#poem_sentence {
font-size: 25px;
}
#poem_info {
font-size: 15px;
margin: 15px auto;
}
/** 古诗词 end **/
翻译
搜索
复制
<iframe></iframe> 标签：poem,插件,cnblogs,代码,top,width,com,博客园,美化 From： https://www.cnblogs.com/xxhxs-21/p/17223701.html