博客园美化终章
- 2019 年 10 月 10 日
- 笔记
博客园美化终章
美化教程其实很多的，不过自己一个一个弄的话还是多多少少会花不少时间，直接用我给的这套设置还是很不错的。导航栏部分可以自行修改即可
$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>