原文链接:https://www.cnblogs.com/ysysbky/p/12247667.html
1.文章推荐和反对按钮
在博客园后台 -> 页面定制 CSS 代码中添加:
注意必须先申请js代码
#div_digg{ position:fixed; bottom:5px; width:140px; right:135px; 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
则修改为
<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>