We are making major changes to this site. Reach us if you are facing any issue by clicking on Report. Contact US!

How To Add Heart Clicks Effect on Blogger Website

Please wait 30 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

So friends, today again welcome all of you to our new and interesting blog, today friends, I will tell you in this post that how you all can add heart effect to your blogger. Friends, this heart effect will show on your website only, meaning it will be visible when you click or touch somewhere on your website.

Friends, this effect has been created with the help of HTML, CSS and JavaScript, friends, if you put this in someone's website, you will see it, and when you click on their website, you will see Love Effect, Mandala Effect there. Who will get Friends, I have told you the tutorial below in the article of this post, all of you can easily put it on your blogger's website by reading this post, just friends, you have to follow all the steps correctly.

How can we add Heart Effect in Blogger?

Step 1:-. Friends, first of all you have to open the blogger website and you have to come to its people page.

Step 2: - Friends, now you have to login to your blogger's website. from your blogger account.

Step 3:- Now friends you will get the menu of theme section, you have to click there.

Step 4:- Friends, now you will see the option of edit HTML, you have to click on it.

Step 5: - Now you friends, here I have given the JavaScript code below, you have to copy it and friends you have to paste it above or below this </body> tag, wherever you like friends.

     <!----Code-1 Heart Click Effect Animation By Techy Shreya---->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'>
<script type="text/javascript">
!function(e,t,a){function n(){c(".heart{width:10px;height:10px;position:fixed;background:#f00;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg)}.heart:after,.heart:before{content:'';width:inherit;height:inherit;background:inherit;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;position:fixed}.heart:after{top:-5px}.heart:before{left:-5px}"),o(),r()}function r(){for (var e = 0;e < d.length;e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale += .004,d[e].alpha -= .013,d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");requestAnimationFrame(r)}function o(){var t = "function" == typeof e.onclick && e.onclick;e.onclick = function(e){t && t(),i(e)}}function i(e){var a = t.createElement("div");a.className = "heart",d.push({el:a,x:e.clientX - 5,y:e.clientY - 5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a = t.createElement("style");a.type = "text/css";try{a.appendChild(t.createTextNode(e))}catch (t){a.styleSheet.cssText = e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}var d = [];e.requestAnimationFrame = function(){return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e){setTimeout(e,1e3 / 60)}}(),n()}(window,document);//]]>

     <!----Code-2 Heart Click Effect Animation By Techy Shreya---->
<script type='text/javascript'>
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

Step 6:- Friends, now your work is over here, but friends, you have to pay attention that do not forget to save the theme, you have to save the theme.


Friends, I have told you the easiest way how you can easily apply Heart Effect on your blogger site. Although friends, you must have understood my words, friends, if you have not understood any kind of thing, then you can ask us.

© Tech Shreyansh

About the Author

I am Techy Shreya. Android Developer, Web Designer and Developer, Modder and Blogger.

Post a Comment

Want a Help Reagarding Website Design and Help from our WebSite? Submit a request below:
  Contact Us
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
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.