博客园看板娘的简单添加

页面定制CSS代码

效果图：

 

一、粘贴对应代码

 

 

博客侧边栏公告

<!--时钟小人-->
<div ><embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/></div>


<!--雪花-->
<div class="Snow">
    <canvas id="Snow"></canvas>
</div>
<script src="https://files.cnblogs.com/files/cn-suqingnian/snow.js"></script>

<!--标题隐藏动态-->
<script>
document.addEventListener("visibilitychange", function () {
        if (document.hidden) {
            document.title="❤人呢？快回来";
        } else  {
            document.title="❤欢迎光临！";
            setTimeout(function(){
                document.title= "❤大木瓜的博客";
            }, 2000);
        }
    }, false);
</script>

<!--网易云歌单-->
<div class="menu-wrap musicrigth">
<embed frameborder="no" border="0" marginwidth="0" marginheight="0" width=250 height=100 src="//music.163.com/outchain/player?type=2&id=554214234&auto=0&height=66"/>
</div>

<!-- 我的头像-->
<div>
<a href="https://www.cnblogs.com/damugua/">
<img src="https://pic.cnblogs.com/avatar/1785228/20191007130842.png" alt="海鹏的头像" class="img_avatar">
</a> 
</div>

<!-- 我的描述-->
<p class="para" style="margin-top:10px" >关于我：<strong>大木瓜～</strong>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=25770941&site=qq&menu=yes"><img border="0" align="absmiddle" src="http://wpa.qq.com/pa?p=2:25770941:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</p> 
<p class="para">联系我：<a href="mailto:2770941@qq.com" title="email">25770941@qq.com</a></p> 

首页HTML代码

<!-- 左下角live2d效果 -->
<script type="text/javascript" charset="utf-8" async="" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>

<!-- 小飞机置顶 -->
<script>
       function func(){
           var tag = document.getElementById('i1');
           var content = tag.innerText;
           var f = content.charAt(0);
           var l = content.substring(1,content.length);
           var new_content = l + f;
           tag.innerText = new_content;
       }
       setInterval('func()',1600);
<span id="back-to-top"><a href="#top">返回顶部</a></span>
    </script>


<style>
#back-top {
     position: fixed;
     bottom: 10px;
     left: 5px;
     z-index: 99;
}
#back-top span {
     width: 50px;
     height: 64px;
     display: block;
     background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
}
#back-top a{outline:none}
</style>
<script type="text/javascript">
$(function() {
    // hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(window).scroll(function() {
        if ($(this).scrollTop() > 500) {
            $('#back-top').fadeIn();
        } else {
            $('#back-top').fadeOut();
        }
    });
    // scroll body to 0px on click
    $('#back-top a').click(function() {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

页脚HTML代码

<!-- 鼠标点击特效 -->
<script type="text/javascript">
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 type="text/javascript">
setTimeout(()=>{
L2Dwidget.init({
"model": {
"scale": 0.3
},
"display": {
"position": "right",
"width": 110,
"height": 220,
"hoffset": 0,
"border":0,
"voffset": -20
},
"mobile": {
"show": true,
"scale": 0.3
},
"react": {
"opacityDefault": 0.9,
"opacityOnHover": 0.8
}
});
},1000)
</script>


<!-- 开头目录和版权信息 -->
<script type="text/javascript">  
        var setMyBlog = {
            setCopyright: function() {
                //设置版权信息，转载出处自动根据页面url生成
                var info_str = '<p>作者：<a target="_blank">@大木瓜</a><br>'+
                    '本文为作者原创，转载请注明出处：<a class="uri"></a></p><hr></hr>', 
                    info = $(info_str),
                    info_a = info.find("a"),
                    url = window.location.href;
                $(info_a[0]).attr("href","https://www.cnblogs.com/damugua/");
                $(info_a[1]).attr("href",url).text(url);
                $("#cnblogs_post_body").prepend(info);
            },
            setCodeRow: function(){
                // 代码行号显示
                var pre = $("pre.sourceCode"); //选中需要更改的部分
                if(pre && pre.length){
                    pre.each(function() {
                        var item = $(this);
                        var lang = item.attr("class").split(" ")[1]; //判断高亮的语言
                        item.html(item.html().replace(/<[^>]+>/g,"")); //将<pre>标签中的html标签去掉
                        item.removeClass().addClass("brush: " + lang +";"); //根据语言添加笔刷
                        SyntaxHighlighter.all();
                    })
                }
            },
            setAtarget: function() {
                // 博客内的链接在新窗口打开
                $("#cnblogs_post_body a").each(function(){
                    this.target = "_blank";
                }) 
            },
            setContent: function() {
                // 这个是在文章开头的目录，我不喜欢所以注释了
                // 根据h2、h3标签自动生成目录
                var captions_ori = $("#cnblogs_post_body h2"),
                    captions = $("#cnblogs_post_body h2,#cnblogs_post_body h3").clone(),
                    content = $("<blockquote><h4>目录</h4></blockquote>");
                $("#cnblogs_post_body").prepend(content.append(captions));
                var index = -1;
                captions.replaceWith(function(){
                    var self = this;
                    if(self.tagName == "H2" || self.tagName == "h2"){
                        // 设置点击目录跳转
                        index += 1;
                        $('<a name="' + '_caption_' + index + '"></a>').insertBefore(captions_ori[index]); 
                        return '<a href="#_caption_' + index + '"><strong>' + self.innerHTML + '</strong></a><br>';
                    } else {
                        return self.innerHTML + "<br>";
                    }
                });
            },
            runAll: function() {
                /* 运行所有方法
                 * setAtarget() 博客园内标签新窗口打开
                 * setContent() 设置目录
                 * setCopyright() 设置版权信息
                 * setCodeRow() 代码行号显示，
                 */ 
                this.setAtarget(); 
                //this.setContent();
                this.setCopyright();
                //this.setCodeRow();//和黑色高亮主题冲突了，所以注释了
            }
        }
        setMyBlog.runAll();
</script>

<script language="javascript" type="text/javascript">
// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{
    var mainContent = $('#cnblogs_post_body');
    var h2_list = $('#cnblogs_post_body h1');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if(mainContent.length < 1)
        return;
 
    if(h2_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content += '<div id="navCategory" style="color:#152e97;">';
        content += '<p style="font-size:18px;"><b>目录</b></p>';
        content += '<ul>';
        for(var i=0; i<h2_list.length; i++)
        {
            var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">Top</a><a name="_label' + i + '"></a></div>';
            $(h2_list[i]).before(go_to_top);
            
            var h3_list = $(h2_list[i]).nextAll("h3");
            var li3_content = '';
            for(var j=0; j<h3_list.length; j++)
            {
                var tmp = $(h3_list[j]).prevAll('h2').first();
                if(!tmp.is(h2_list[i]))
                    break;
                var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
                $(h3_list[j]).before(li3_anchor);
                li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
            }
            
            var li2_content = '';
            if(li3_content.length > 0)
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
            else
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
            content += li2_content;
        }
        content += '</ul>';
        content += '</div><p>&nbsp;</p>';
        content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }   
}

GenerateContentList();
</script>

二、上传文件

  4个文件上传到百度网盘了，下载下来重新上传到博客园后台即可。

链接：https://pan.baidu.com/s/19Ou-3z6YQDWus4bX76rSrw?pwd=r6lt
提取码：r6lt