Original link: https://www.cnblogs.com/ysysbky/p/12247667.html
1. Article recommendation and objection buttons
Add in the blog garden background-> page custom CSS code:
Note that you must first apply for js code
#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. Signboard girl
https://unpkg.com/live2d-widget-model-model name / assets / model name.model.json
Pay attention to the modification, for
example: I choose
hijiki
and modify it to
<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. Enlarge the picture
Paste this code into the page custom CSS code
#mainContent img { z -index: 1000; // Set to the top layer to prevent the left navigation bar from blocking position: relative; cursor: pointer; // Mouse style: Gesture transition: all 1.2s; // Amplification time: 1.2 s } #mainContent img: hover { transform: scale ( 1.4); // Magnification: 1.4 times }
4.github link and return to top small rocket
4.1 Add in the top html code:
<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 Add code in the sidebar:
<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. Add text announcements on the bulletin board
Add code to sidebar
#Add a statement in the sidebar
<!-Declaration->
<span> Declaration: The information comes from the Internet, only for your own study, modification and sharing. If there is any infringement, please inform and will delete it in time, thank you. </ span>