博客园美化：看板娘

博客看板娘美化教程

没有js权限的先申请下，我是申请通过后才弄的，没申请不确定能不能行。

完整版

一、首先下载安装包（点这下载）

二、解压后在自己的博客园设置中上传这几个文件

 

 

 

 三、在页脚添加这段代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 5     <title>Live2D</title>
 6     <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/Y-Qblog/waifu.css"/>
 7     <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/Y-Qblog/flat-ui.min.css"/>
 8 </head>
 9 <body>
10 <div class="waifu" id="waifu">
11     <div class="waifu-tips" style="opacity: 1;"></div>
12     <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
13     <div class="waifu-tool">
14         <span class="fui-home"></span>
15         <span class="fui-chat"></span>
16         <span class="fui-eye"></span>
17         <span class="fui-user"></span>
18         <span class="fui-photo"></span>
19         <span class="fui-info-circle"></span>
20         <span class="fui-cross"></span>
21     </div>
22 </div>
23 <script src="https://files.cnblogs.com/files/Y-Qblog/jquery-2.1.1.min.js"></script>
24 <script src="https://files.cnblogs.com/files/Y-Qblog/live2d.js"></script>
25 <script src="https://files.cnblogs.com/files/Y-Qblog/waifu-tips.js"></script>
26 <script type="text/javascript">initModel()</script>
27 </body>
28 </html>

四、代码链接处换成自己博客的上传文件的链接，这样不会轻易丢失，搞定。

 

简单版（直接用的线上链接）

页面定制css 放上：
1 canvas#live2dcanvas {
2 border: 0 !important;
3 left: 0;
4 }

页脚放上代码：
1 <script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>
2 <script type="text/javascript">
3 L2Dwidget.init();
4 </script>
posted @ 2020-04-23 16:12  辰昉  阅读(365)  评论(0)    收藏  举报