博客园美化终章
博客园美化终章
美化教程其实很多的，不过自己一个一个弄的话还是多多少少会花不少时间，直接用我给的这套设置还是很不错的。导航栏部分可以自行修改即可
$navList.cnblogsNav('addNav', 4, '自己改成自己想要的导航', '自己分类的url');
音乐部分我外链的音乐，要增加音乐，添加这样的语句块就可以了，图片和音乐都是可以外链的。
{
title: '盗将行',
author: '花粥',
url: 'http://www.ytmp3.cn/down/48303.mp3',
pic: 'http://images.cnblogs.com/cnblogs_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/cnblogs_com/shwee/1218109/o_music_pic4.png'
},
{
title: '富士山下',
author: '陈奕迅',
url: 'http://www.ytmp3.cn/down/44428.mp3',
pic: 'http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_music_pic1.png'
},
{
title: '盗将行',
author: '花粥',
url: 'http://www.ytmp3.cn/down/48303.mp3',
pic: 'http://images.cnblogs.com/cnblogs_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>
