Customize Blog Garden Style

Current functionality

• _Keyboard Press Effect
• 🍎 Mouse Pointer Change
• 🍊 Navigation Bar Customization
• HangHoax Title
• LeiBoardmaid-Cat
• _Music - NetEasy Cloud
• MarkLeft Click Pop-up
• _Scroll progress at top of page
• _Click on the page to skip cute text
• _Comments add emoticons
• _Essay Background Effect
• _Responsive Development
• (xie)Site Runtime
• _Dynamic Line Background
• YuenBackground Line Effect
• (118)Code rain
• _DaoVoice Chat
• HangAutomatic Coding Function
• _Description of Welcome Visitors

Instructions

• First you need one Blog Park (Guess you know all about github)
• stay Blog Park Open a blog Park in the top left corner of the official website
• Blog Park Personal Configuration Page - > Apply for js permissions first
• Disable css styles for pages
• Select Blog Theme SimpleMemory

Here is the code configuration

• Paste code into custom page css code css

• Paste Blog Side Announcement Code

<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/sunhang32/pio.css" /> <script type="text/javascript"> window.cnblogsConfig = { GhVersions : 'v1.2.0', // Edition blogUser : "Remaining Dreams", // User name essayCodeHighlightingType: "highlightjs", essayCodeHighlighting: "vs2015", homeTopImg: [ "https://cdn.jsdelivr.net/gh/2662419405/imgPlus/o_o_wallhaven-698904.jpg" ], menuUserInfoBgImg: 'https://bndong.github.io/images/menu_bg.gif', menuNavList: [ // List Data ['Navigation Name','Link'] ['github', 'https://github.com/2662419405'], ['CSDN', 'https://blog.csdn.net/qq_43268396'], ['Skill Tree', 'https://shtodream.cn/about/'], ['Message Board', 'https://shtodream.cn/message/'], ], fontIconExtend: "//at.alicdn.com/t/font_543384_ezv3l7gd9r7.css ", //font icon extension webpageTitleOnblur : "(◍´꒳`◍)Why did you leave so hard? ", // Current page loses focus, page title displays text webpageTitleOnblurTimeOut : 500, // Current page loses focus, page title changes, latency, in milliseconds webpageTitleFocus : "(*´∇｀*) The handsome man is back!", // Current page gets focus, page title displays text, display delay restores original title webpageTitleFocusTimeOut : 2000, // Current page gets focus, page title changes, latency, in milliseconds blogAvatar : "https://cdn.jsdelivr.net/gh/2662419405/[email protected]/sh.jpg", //User Avatar blogStartDate : "2019-11-07", // Entrance time, year-month-day.Way to view the entrance time: Mouse over the length of the park age will show the entrance time } </script> <script src="https://cdn.jsdelivr.net/gh/BNDong/[email protected]/src/script/simpleMemory.min.js"></script> <script>(function(i,s,o,g,r,a,m),i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/bd4254a0.js","daovoice")</script> <script> daovoice('init', { app_id: "bd4254a0" }); daovoice('update'); </script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/2662419405/CDN/pio.css" />

• Paste Header Code

<div style="left: 50px; bottom: 50px;"> <div></div> <canvas id="pio" style="opacity: 0.6;" width="200px" height="200px"></canvas> </div>

• Paste footer code

<!-- Scroll Progress --> <div id="bottomProgressBar"></div> <!-- Music Menu --> <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.css"> <div id="player" data-id="3025663508" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div> <script src="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.js"></script> <script src="https://blog-static.cnblogs.com/files/elkyo/Meting.min.js"></script> <!-- Automatically enter text --> <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> <script> window.onload=function(){ $(".vertical").append("<div id='shContent'><span id='subtitle'></span><span id='typed-cursor'></span></div>") var typed=new Typed("#Subtitle, ) $('.icon-list').append("<div id='shMap'><div>");$('#shMap').html("Welcome from"+returnCitySN["cname"]+"Friend"+"<br>Your IP is:"+returnCitySN["cip"]+"<br>You are using:"+getOSAndBrowser()); } </script> <!-- Site Runtime --> <p style="text-align:center;"><span id="timeDate">Load Days...</span><span id="times">Load Hours and Seconds...</span></p> <script> var now = new Date(); function createtime() { var grt = new Date("11/06/2019 17:38:00"); //Modify your site time here now.setTime(now.getTime() + 250); days = (now - grt) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); if(String(hnum).length == 1) { hnum = "0" + hnum; } minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum); mnum = Math.floor(minutes); if(String(mnum).length == 1) { mnum = "0" + mnum; } seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); snum = Math.round(seconds); if(String(snum).length == 1) { snum = "0" + snum; } document.getElementById("timeDate").innerHTML = "This site is running barely " + dnum + " day "; document.getElementById("times").innerHTML = hnum + " hour " + mnum + " branch " + snum + " second"; } setInterval("createtime()", 250); </script> <!-- Lower Right Menu --> <div id="rightMenu"></div> <!--Kanban - cat--> <script src="https://cdn.jsdelivr.net/gh/2662419405/CDN/l2dPlus.js"></script> <script src="https://cdn.jsdelivr.net/gh/2662419405/CDN/pioPlus.js"></script> <script src="https://cdn.jsdelivr.net/gh/2662419405/CDN/mao.js"></script> <!-- Line Effect(It is recommended that this effect be turned off,Too much impact on Mobile) --> <script type="text/javascript" color="220,220,220" opacity='0.9' zIndex="-2" count="100" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"> </script> <script type="text/javascript" src="https://blog-static.cnblogs.com/files/sunhang32/ce.js"></script> <!-- Text Display --> <script type="text/javascript" src="https://files.cnblogs.com/files/sunhang32/myText.js"></script> <!-- Input Box Effect --> <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/2662419405/CDN/blog.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/2662419405/CDN/POW.js"></script> <!-- Right Access IP --> <script type="text/javascript" src="https://pv.sohu.com/cityjson?ie=utf-8"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/2662419405/CDN/Welcome.js"></script>

If the configuration is successful, you might as well compliment it. Let's have a good time. If you have problems, you can issue-

------------------------------------------------------------------------------------------------------------------------------------------------------

Here are DIV customizations

• Background Line Effect (This is more performance intensive, uses as little as possible, and has a greater impact on the phone side)

<script type="text/javascript" color="220,220,220" opacity='0.7' zIndex="-2" count="500" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"> </script> //Color color //opacity transparency //zIndex hierarchy (generally negative) //Number of count s

• Input Box Effect

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/2662419405/CDN/blog.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/2662419405/CDN/POW.js"></script>

• Click on the screen to display text effects

<script type="text/javascript" src="https://files.cnblogs.com/files/sunhang32/myText.js"></script>

• Background music

<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.css"> <div id="player" data-id="3025663508" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div> <script src="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.js"></script> <script src="https://blog-static.cnblogs.com/files/elkyo/Meting.min.js"></script> <script> $(".aplayer-play").click() // Set if you want the song to load and play on the page </script>

Modifying music only requires modifying the data-id

• cat

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/2662419405/CDN/pio.css" /> <script src="https://cdn.jsdelivr.net/gh/2662419405/CDN/l2dPlus.js"></script> <script src="https://cdn.jsdelivr.net/gh/2662419405/CDN/pioPlus.js"></script> <script src="https://cdn.jsdelivr.net/gh/2662419405/CDN/mao.js"></script>

At present the cat still has a small bug, but it does not affect normal use, and I am constantly improving -

• Right Chat

<script>(function(i,s,o,g,r,a,m),i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/bd4254a0.js","daovoice")</script> <script> daovoice('init', { app_id: "bd4254a0" }); daovoice('update'); </script>

App_hereID please go to daovoice website registration

• Site Runtime

<!-- Site Runtime --> <p style="text-align:center;"><span id="timeDate">Load Days...</span><span id="times">Load Hours and Seconds...</span></p> <script> var now = new Date(); function createtime() { var grt= new Date("11/06/2019 17:38:00");//Modify your site time here now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); if(String(hnum).length ==1 ) minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); mnum = Math.floor(minutes); if(String(mnum).length ==1 ) seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); snum = Math.round(seconds); if(String(snum).length ==1 ) document.getElementById("timeDate").innerHTML = "This site is running barely "+dnum+" day "; document.getElementById("times").innerHTML = hnum + " hour " + mnum + " branch " + snum + " second"; } setInterval("createtime()",250); </script>

The above implementation modifies the time when you create your own website by inserting the p tag into the area you want to display

• Configure Code Rain
  This is not written in the default
  

1. Append css

#content_canvas { position: fixed; right: 0px; bottom: 0px; min-width: 100%; min-height: 100%; height: auto; width: auto; z-index: -1; }

1. Header html Code Append

<canvas id="content_canvas" width="1440" height="900" ></canvas>

1. Append code to bottom of page

<script> window.onload = function(){ //Get Canvas Object var canvas = document.getElementById("content_canvas"); //Get the context of the canvas var context =canvas.getContext("2d"); var s = window.screen; var W = canvas.width = s.width; var H = canvas.height; //Get the width and height of the browser screen //var W = window.innerWidth; //var H = window.innerHeight; //Set the width and height of canvas canvas.width = W; canvas.height = H; //Font size per text var fontSize = 12; //Computed Columns var colunms = Math.floor(W /fontSize); //Record y-axis coordinates for each column of text var drops = []; //Initialize a starting point for each text for(var i=0;i<colunms;i++){ drops.push(0); } //Moving Text var str ="sh"; //4:fillText(str,x,y); the principle is to change the coordinate position of Y //Painting Functions function draw(){ context.fillStyle = "rgba(238,238,238,.08)";//masking layer context.fillRect(0,0,W,H); //Style Fonts context.font = "600 "+fontSize+"px Georgia"; //Add color to font context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"][parseInt(Math.random() * 10)];//randColor(); can rgb,hsl, standard color, hexadecimal color //Write to Canvas for(var i=0;i<colunms;i++){ var index = Math.floor(Math.random() * str.length); var x = i*fontSize; var y = drops[i] *fontSize; context.fillText(str[index],x,y); //If you want to change the time, you have to change every time he starts if(y >= canvas.height && Math.random() > 0.99){ drops[i] = 0; } drops[i]++; } }; function randColor(){//Random colors var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb("+r+","+g+","+b+")"; } draw(); setInterval(draw,35); }; </script>

More of my effects, you can browse me-> Learning Blog

------------------------------------------------------------------------------------------------------------------------------------------------------

Please go here github

Add new comment

For adding a comment, please log in

Login or create account

0 comments