博客园的博客美化之文章推荐和反对按钮、看板娘、图片放大、github链接、返回顶部小火箭

1.文章推荐和反对按钮

在博客园后台 -> 页面定制 CSS 代码中添加:

注意必须先申请js代码

#div_digg{
  position:fixed;
  bottom:5px;
  width:140px;
  right:390px;
  border:2px solid #258fb8;
  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);
}

 

2.看板娘

https://unpkg.com/live2d-widget-model-模型名称/assets/模型名称.model.json
注意修改的地方
比如：我选
hijiki
则修改为

/*只需复制粘贴到--->博客侧边栏公告（支持HTML代码） （支持 JS 代码）*/

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
 
<script>
    L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",
            "scale": 1
        },
        "display": {
            "position": "right",
            "width": 150,
            "height": 300,
            "hOffset": 0,
            "vOffset": -17
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.3
        }
    });
</script>

 

3.图片放大

将这段代码粘贴到 页面定制CSS代码 里面

#mainContent img
{
    z-index: 1000; //设置为最顶层，以免左侧导航栏遮挡
    position: relative;
    cursor: pointer;//鼠标样式：手势
    transition: all 1.2s; //放大的时间：1.2s
}
#mainContent img:hover {
    transform: scale(1.4); //放大倍数：1.4倍
}

 

4.github链接和返回顶部小火箭

4.1 在页首html代码中添加:

<style>
#back-top {
     position: fixed;
     bottom: 10px;
     right: 5px;
     z-index: 99;
}
#back-top span {
     width: 50px;
     height: 64px;
     display: block;
     background:url(https://s1.ax1x.com/2018/06/16/Cv19L8.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>

4.2 侧边栏添加代码：

<a href="https://github.com/liuyishi0919" target="_blank">
　　<img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1;" src="https://s1.ax1x.com/2018/06/16/Cv1psf.png" >
</a>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

5.在公告栏自己添加文字公告

侧边栏加上代码

#在侧边栏加上声明
<!-- 声明 -->
<span>声明：资料来自网上，仅供自己学习，并修改和分享，如有侵权，请告知，定会及时删除，谢谢。</span>