How to add Falling Apricot Golden Flowers in Blogger?

In this article I have made a tutorial on How to add Falling Apricot Golden Flowers in Blogger

Hello Everyone! Welcome back to Techy DarshaN, Today on this occasion our tutorial is How to add Falling Apricot Golden Flowers in Blogger, The new year has started already, surely many bloggers like me are also looking for some background or effects to decorate their website. 

Through searching on the internet, I found the effect of apricot flowers falling to increase the Tet atmosphere for the Blog. Here, I would like to share these effects with those of you who are also looking to decorate their site.

What Is Falling Apricot Golden Flowers?

It is type of effect used to decorate your blog, mainly in Autumn season it looks very unique and  attractive to your visitors. It is a code which displays Falling Apricot Golden Flowers in your all pages and posts.

 In addition you can also add the falling cherry blossom effects, falling leaf effects (when it turns to autumn), snowing effects, falling star effects, etc...  also from this same code by just changing the image URL.

Pros

1. Looks attractive for your visitors
2. Best effect for Autumn season
3. Decorate your blog
4. Unique effect

Let's Begin

Demo

How to add Falling Apricot Golden Flowers in Blogger?

Step 1: Login to your Blogger Dashboard

Step 2: Now go to Themes 

Step 3: Now click on the Dropdown and select Edit HTML

Step 4: Search for  </head> and paste the following code just above above it

<script type='text/javascript'>
//<![CDATA[
var pictureSrc ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOIGDgTMTIi7W1TTs_yQYedQ_7aXHS1bBbDxq1UBsChJqOqEQnbRX29llHFJ7wZVgwm1zC5LQdL3uqbJb9ohuTdx9R0CMQPSCj8Al7Y9Lj10R7fyG0uh6t_UjMnpzfdNZa_JpfTTDAcjY/s1600/hoamai.png"; //the location of the snowflakes
var pictureWidth = 15; //the width of the snowflakes By Techy DarshaN
var pictureHeight = 15; //the height of the snowflakes By Techy DarshaN
var numFlakes = 10; //the number of snowflakes By Techy DarshaN
var downSpeed = 0.01; //the falling speed of snowflakes (portion of screen per 100 ms) By Techy DarshaN
var lrFlakes = 10; //the speed that the snowflakes should swing from side to side By Techy DarshaN
if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }
//draw the snowflakes
for( var x = 0; x < numFlakes; x++ ) {
if( document.layers ) { //releave NS4 bug 
document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>');
} else {
document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>');
}
}
//calculate initial positions (in portions of browser window size) 
var xcoords = new Array(), ycoords = new Array(), snFlkTemp;
for( var x = 0; x < numFlakes; x++ ) {
xcoords[x] = ( x + 1 ) / ( numFlakes + 1 );
do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() );
} while( typeof( ycoords[snFlkTemp] ) == 'number' );
ycoords[snFlkTemp] = x / numFlakes;
}
//now animate 
function flakeFall() {
if( !getRefToDivNest('snFlkDiv0') ) { return; }
var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0;
//find screen settings for all variations. doing this every time allows for resizing and scrolling 
if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {
if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {
if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }
if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {
if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else {
if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } }
}
//move the snowflakes to their new position 
for( var x = 0; x < numFlakes; x++ ) {
if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; }
var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }
if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0;
divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;
divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix;
ycoords[x] += downSpeed;
}
}
//DHTML handlers 
function getRefToDivNest(divName) {
if( document.layers ) { return document.layers[divName]; } //NS4 By Techy DarshaN
if( document[divName] ) { return document[divName]; } //NS4 also By Techy DarshaN
if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera) 
if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4 
return false;
}
window.setInterval('flakeFall();',100);
//]]>
</script>

Edit and Customize the highlighted code as your wish and Change the Image link if you want to Display any other Flower or Picture

Conclusion 

In this I have made a step by step tutorial on How to add Falling Apricot Golden Flowers in Blogger.  Which looks very unique and attractive especially in Autumn season and you can also customize it as your own and can add your own image instead of flower (Only add PNG format image).

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Techy DarshaN | All Rights Reserved 

 © Copyright https://www.techydarshan.eu.org