Follow us to get updates regarding Latest posts Follow Now!

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

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

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://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/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


 

Getting Info...

About the Author

Student | Developer | Blogger

1 comment

  1. Please how to add google translate like it's to blogger
Techy DarshaN's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Have a Cookie!
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.