Customize Blog Garden Style

Welcome to Disabled Dreams Blog Park

First of all, let's state this: Styles aren't all written by me, they're my own integration (feel like everyone's blog likes a little, so I integrate them myself)

Since it is cumbersome to update this document every time you update your blog, this blog will only be updated regularly. If you want to use the latest version of the Blog Garden Style, go to me github

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/CDN@1.0/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/Cnblogs-Theme-SimpleMemory@v1.2.0/src/script/simpleMemory.min.js"></script>
<script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},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 class="pio-container" style="left: 50px; bottom: 50px;">
	<div class="pio-action"></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" class="aplayer aplayer-withlist aplayer-fixed" 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/typed.js@2.0.11"></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, {strings:["Live a good life, write some good code!!!", "May your efforts be rewarded in the end." "Flowers do not come for flowers, but for brighter ones."""A child without an umbrella must run hard!""Desire to increase enthusiasm, perseverance to flatten mountains."""If you give up too early, you will never know what you will miss."No rocks, no beautiful waves; no setbacks, no splendid life.""], sTartDelay:1000,TypeSpeed:100, loop:!0,BackSpeed:60,BackDelay:2000ShowCursor:!0})
	$('.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" class="aplayer aplayer-withlist aplayer-fixed" 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["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},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 ){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>

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

Tags: Javascript github npm Mobile

Posted on Sat, 06 Jun 2020 21:01:16 -0400 by Clarkey_Boy