Home
Blogging

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
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.

Falling Hearts on Your Blog - Valentines Day Special

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: Now click on  Theme -> 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 theme. 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.You will find the image URL from below the text box. 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 button from the top right corner.


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.

9 comments

  1. 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.
  2. hello dear,
    you are awesome write this article. In more thing we brings the Valentine's Day Gift ideas. check it now.
  3. This is so, so amazing!!! Thank you so much. I love hearts!
    • Welcome Cristina. Thanks for your feedback. :-bd
  4. Hi Mohammad Fazle Rabbi,

    I’ve sent you a message, but you said a comment would have a faster reply.
    I can appreciate you are busy. I know what that means.

    I need a custom blogger template. I had a look at yours and I am blown away by the perfect looking templates you have created.

    I've been a blogger for many years, but HTML and CSS codes are not my thing. I am a writer, actually. A self-published author who struggles to make a living.

    Get back to me, Mohammad. Whenever you've got time.
    I have a day job like you and I might not be available at all times.

    Please check this link https://authorsforlife.blogspot.com
    It’s one of my 17 blogs. I am overwhelmed by work and I really need your help. I think I am going to die of exhaustion.

    You are by far one of the most amazing template creators I've ever seen. I am truly impressed.

    I look forward to reading your reply and working with you.

    Blessings,
    Cristina G.
    • Hi Cristina G,
      I am really sorry for late reply. I have sent you an email. :up
  5. image link is not working check it.
    • Hi, I have added text boxes with URLs. So now you can copy the URL from there. Thank you
Go Up