43°

博客园美化终章

博客园美化终章

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

  $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>
&lt;link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/kousak/waifu.css"/&gt;
&lt;script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;

</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>

        &lt;span class="fui-cross"&gt;&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script src="https://files.cnblogs.com/files/kousak/live2d.js"&gt;&lt;/script&gt;
&lt;script src="https://files.cnblogs.com/files/kousak/waifu-tips.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;initModel()&lt;/script&gt;

</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("+~~(255Math.random())+","+~~(255Math.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>

本文转载自博客园,原文链接:https://www.cnblogs.com/chenguosong/p/11650316.html

全部评论: 0

    我有话说: