博客園右下角添加看板娘

看板娘

　　看板娘也就是別人博客右下角或者左下角的那個小人, 那如何把它加載到自己的博客園呢?

 

前提條件

　　必須需要申請開通支持JS代碼, 否則以下內容也就不用看了

 

 

配置

側邊欄公告

　　將以下內容復制到: 博客側邊欄公告（支持HTML代碼） （支持 JS 代碼）

<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-info-circle"></span>
            <span class="fui-cross"></span>
        </div>
        
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://blog-static.cnblogs.com/files/mswei/live2d.js"></script>
<script src="https://blog-static.cnblogs.com/files/mswei/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>

 

 

頁首

　　將以下內容復制到: 頁首 HTML 代碼 

<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/mswei/waifu.css"/>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>

 

保存設置, 刷新頁面, 左下角角就會多一個可愛的看板娘