How to add Valentine's Day Falling Hearts effect in Blogger?

On valentine's day occasions we see many website and Blog shows falling heart effect over the webpage. This is look like heart is fallin...

Related posts:

On valentine's day occasions we see many website and Blog shows falling heart effect over the webpage. This is look like heart is falling from the top to bottom. This is really romantic to see this effect on special valentine's occasion. This feature add a romantic theme in a website. 

We knows 14th February is valentine's day and reaching soon, so why don't you show some love to your Blog visitors and give a cordial welcome by adding falling heart effect. I think you have already planned something to do special to spread love among your blog readers, then this valentine's falling hearts effect will add extra spice and valentine's theme on your website. This trick will display falling hearts across your blog magnificently.

Party Style Falling Heart

But when should you integrate this widget in your Blog!! Most of the people think this feature should add on Valentine's day only and you are thinking the same but in real you can use this widget from 7th February in your Blogger site. There are a simple reason behind this. Just have a look on this small romantic cheat sheet. 

Date	Occasions
7 February	Rose Day
8 February	Propose Day
9 February	Chocolate Day
10 February	Teddy Day
11 February	Promise Day
12 February	Hug Day
13 February	Kiss Day
14 February	Valentine’s Day

Pretty Simple Style Falling Heart

I hope the above info would be pretty handy for you. Anyway now I'm going to share the tutorial about how to add Valentine's Day Falling Hearts effect in Blogger site? Just go through the below steps:

Animated Falling Heart Style

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard

Step #2: Click on Now click on  Template -> Edit HTML

Step #3: Now find the </body>  By Pressing Ctrl+F (Windows) or CMD+F (Mac)

Step #4: Copy the below code and Paste the code above/before </body>

 
<script type='text/javascript'>
//<![CDATA[
function iecompattest(){return document.compatMode&&document.compatMode!="CSS1Compat"?document.documentElement:document.body}function bsheartIE_NS6(){doc_width=ns6up?window.innerWidth-10:iecompattest().clientWidth-10;doc_height=window.innerHeight&&bsheartdistance=="windowheight"?window.innerHeight:ie4up&&bsheartdistance=="windowheight"?iecompattest().clientHeight:ie4up&&!window.opera&&bsheartdistance=="pageheight"?iecompattest().scrollHeight:iecompattest().offsetHeight;for(i=0;i<no;++i){yp[i]+=sty[i];if(yp[i]>doc_height-50){xp[i]=Math.random()*(doc_width-am[i]-30);yp[i]=0;stx[i]=.02+Math.random()/10;sty[i]=.7+Math.random()}dx[i]+=stx[i];document.getElementById("dot"+i).style.top=yp[i]+"px";document.getElementById("dot"+i).style.left=xp[i]+am[i]*Math.sin(dx[i])+"px"}bshearttimer=setTimeout("bsheartIE_NS6()",10)}function hidebsheart(){if(window.bshearttimer)clearTimeout(bshearttimer);for(i=0;i<no;i++)document.getElementById("dot"+i).style.visibility="hidden"}var bsheartsrc="IMAGE URL HERE";var no=15;var hidebshearttime=0;var bsheartdistance="pageheight";var ie4up=document.all?1:0;var ns6up=document.getElementById&&!document.all?1:0;var dx,xp,yp;var am,stx,sty;var i,doc_width=800,doc_height=600;if(ns6up){doc_width=self.innerWidth;doc_height=self.innerHeight}else if(ie4up){doc_width=iecompattest().clientWidth;doc_height=iecompattest().clientHeight}dx=new Array;xp=new Array;yp=new Array;am=new Array;stx=new Array;sty=new Array;bsheartsrc=bsheartsrc.indexOf("bloggerspice.com")!=-1?" IMAGE URL HERE ":bsheartsrc;for(i=0;i<no;++i){dx[i]=0;xp[i]=Math.random()*(doc_width-50);yp[i]=Math.random()*doc_height;am[i]=Math.random()*20;stx[i]=.02+Math.random()/10;sty[i]=.7+Math.random();if(ie4up||ns6up){if(i==0){document.write('<div id="dot'+i+'" style="POSITION: absolute;Z-INDEX: '+i+';VISIBILITY: visible;TOP: 15px;LEFT: 15px;"><a href="http://bloggerspice.com"><img src=\''+bsheartsrc+'\' border="0"></a></div>')}else{document.write('<div id="dot'+i+'" style="POSITION: absolute;Z-INDEX: '+i+";VISIBILITY: visible;TOP: 15px;LEFT: 15px;\"><img src='"+bsheartsrc+'\' border="0"></div>')}}}if(ie4up||ns6up){bsheartIE_NS6();if(hidebshearttime>0)setTimeout("hidebsheart()",hidebshearttime*1e3)}
//]]>
</script>

Step #5: We have added the main script in our Blogger template. Now it's time to spice up. I have added here 10 style falling heart image. Some are animated and some are static. You can simply change the heart style by changing images. Now please locate IMAGE URL HERE inside the above JavaScript, you will find this text 2 times so replace both IMAGE URL HERE by any image from below. For quick loading the widget image please save the images from below and host those images in your Blogger site and after that use the Image URL inside the JavaScript.

Step #6: Finally hit the Save template button.

Now check your Blogger template and see a beautiful falling heart effect. that's really romantic and now your Blogger template tailored with valentine's them. I hope your Blog visitors will love this widget and get a taste of festive theme. Thank you.