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

Make this Valentine Day special to your Blog visitors with cool falling heart widget. Easily add heart falling effect in your Blogger template

Comments: 2
data:blog.title
falling-hearts-blogger-widget

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.
Valentine Heart Falling Effect For Blogger
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


 How To Add Falling Hearts In Blogger Blog For Valentines 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:
Add Valentine Day Special Falling Heart Widget in Blogger
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.

Add Valentine Day Special Falling Heart Widget in Blogger
Add Valentine Day Special Falling Heart Widget in Blogger
Add Valentine Day Special Falling Heart Widget in Blogger
Add Valentine Day Special Falling Heart Widget in Blogger
Add Valentine Day Special Falling Heart Widget in Blogger
Add Valentine Day Special Falling Heart Widget in Blogger
Add Valentine Day Special Falling Heart Widget in Blogger
Add Valentine Day Special Falling Heart Widget in Blogger
Add Valentine Day Special Falling Heart Widget in Blogger
Add Valentine Day Special Falling Heart Widget in Blogger

Step #6: Finally hit the Save template button.

Falling Hearts on Your Blog - Valentines Day Special

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.

Speak Your Mind

Thank you for your tutorial. But I feel sad that I have found your post today. I will definitely try this valentine heart effects in next valentine day.

Hi there :)
I love to hear that. But hopefully i will release something new in next year. Thanks and keep visiting this site.

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *