（五）博客园美化（风格1）：音乐插件等小模块的运用

空闲的时候自己根据很多大神的美化教程，把自己的博客园简单装修了下。

再此整理一下美化方式和步骤，如果喜欢本人博客这种风格，可以参考一下这个系列。

一、Fork me on Gitee / Github 标签

 

 

右上角或者左上角的 Fork me on Gitee 或 Github 标签，点击后会跳转到自己的 Gitee 或 Github 主页。

对应的图片（请保存并上传到自己的博客相册内，下方代码中使用自己相册图片的外链，不会设置的看第一篇第二节）：

图片：Fork me on Gitee

图片：Fork me on 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

文件：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 **/

 

 

翻译

搜索

复制