博客园美化终章

美化教程其实很多的，不过自己一个一个弄的话还是多多少少会花不少时间，直接用我给的这套设置还是很不错的。导航栏部分可以自行修改即可

  $navList.cnblogsNav('addNav', 4, '自己改成自己想要的导航', '自己分类的url');

音乐部分我外链的音乐，要增加音乐，添加这样的语句块就可以了，图片和音乐都是可以外链的。

   {
            title: '盗将行',
            author: '花粥',
            url: 'http://www.ytmp3.cn/down/48303.mp3',
            pic: 'http://images.cnblogs.com/likecs_com/shwee/1218109/o_music_pic2.png'
        }

点击出现的内容自己更改添加这个数组里面的内容就可以了

var a = new Array("关注","点赞","分享");

在pc端点赞部分给弄成了悬浮在下面，不管看到哪里都会始终在下面，不过对于手机端就有bug了，点赞部分直接就没有了。不过对我来讲没什么影响。

不喜欢这样弄的删掉下面这部分即可

#div_digg{
  position:fixed;
  bottom:5px;
  width:140px;
  right:390px;
  border:2px solid #6FA833;
  padding:10px;
  background-color:#fff;
  border-radius:5px 5px 5px 5px !important;
  box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

我的设置内容如下

主题

BuildtoWin

页面定制css代码

.postTitle2:hover{
margin-left:40px;
}
/* 定制公告栏音乐插件的样式 */
.aplayer {
    font-family: Arial,Helvetica,sans-serif;  /*音乐插件字体*/
    margin: 0px;  /*音乐插件与公告栏左边的边距，0px就是直接抵到公告栏左边的边上*/
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    border-radius: 2px;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: normal;
}

#div_digg{
  position:fixed;
  bottom:5px;
  width:140px;
  right:390px;
  border:2px solid #6FA833;
  padding:10px;
  background-color:#fff;
  border-radius:5px 5px 5px 5px !important;
  box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

博客侧边栏公告

<!-- 为博客底部添加音乐组件 -->
<div id="player"  class="aplayer"></div>
<link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet">
<script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script> 

<script type="text/javascript">
var ap = new APlayer({
    element: document.getElementById('player'),
    narrow: false,
    autoplay: false,          <!-- 是否自动播放 -->
    showlrc: false,
    theme: '#F5F5F5',      <!-- 插件背景颜色，建议和你的公告栏背景色一样，这样融为一体的感觉 -->
    music: [{
            title: '东京不太热',
            author: '洛天依',
            url: 'http://www.ytmp3.cn/down/37520.mp3',
            pic: 'http://images.cnblogs.com/likecs_com/shwee/1218109/o_music_pic4.png'
        },
        {
            title: '富士山下',
            author: '陈奕迅',
            url: 'http://www.ytmp3.cn/down/44428.mp3',
            pic: 'http://images.cnblogs.com/likecs_com/shwee/1218109/o_music_pic1.png'
        },
        {
            title: '盗将行',
            author: '花粥',
            url: 'http://www.ytmp3.cn/down/48303.mp3',
            pic: 'http://images.cnblogs.com/likecs_com/shwee/1218109/o_music_pic2.png'
        }
    ]
});
ap.init();
</script>

页首html代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Live2D</title>
     
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/kousak/waifu.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/kousak/waifu.css">
    <div class="waifu" id="waifu">
        <div class="waifu-tips" style="opacity: 1;"></div>
        <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
        <div class="waifu-tool">
            <span class="fui-home"></span>
            <span class="fui-chat"></span>
            <span class="fui-eye"></span>
            <span class="fui-user"></span>
            <span class="fui-photo"></span>
      
            <span class="fui-cross"></span>
        </div>
    </div>
    <script src="https://files.cnblogs.com/files/kousak/live2d.js"></script>
    <script src="https://files.cnblogs.com/files/kousak/waifu-tips.js"></script>
    <script type="text/javascript">initModel()</script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>

页脚html代码

<script type="text/javascript" color="255,255,255" opacity='0.7' zIndex="-2" count="150" src="http://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

<script>
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("关注","点赞","分享");
        var $i = $("<span></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("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>
<script src="//blog-static.cnblogs.com/files/zhangfengxian/cnblogs-nav.js"></script>
<script>
    $(function() {
        var $navList = $('#navList');
        $navList.cnblogsNav('addNav', 4, 'php', '//www.cnblogs.com/chenguosong/category/1542009.html');
        $navList.cnblogsNav('addNav', 4, '前端', '//cnblogs.com/chenguosong/category/1446770.html');
 　　$navList.cnblogsNav('addNav', 5, '黑客', '//www.cnblogs.com/chenguosong/category/1551092.html');
        $navList.cnblogsNav('removeNav', 2);    
    });
</script>

版权声明：本文为chenguosong原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/chenguosong/p/11650316.html