How To Add Heart Clicks Effect on Blogger Website

5/5 - (1 vote)

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.

20230216 182207

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>
<script type="text/javascript">
//<![CDATA[
!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);//]]>
</script>
  
  
          <!----Code-2 Heart Click Effect Animation By Techy Shreya---->
<script type='text/javascript'>
//<![CDATA[
!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);
//]]>
</script>
  
  

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.

Conclusion

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.

One Request?

I worked hard on this post to help the blogging community. It would help me a lot if you consider sharing it on social media networks. Because Sharing Is Caring.. ♥️

Sharing Is Caring...
alt_here

Hello! My name is Tech Shreyansh, and I'm a Youtuber and Content Creator from Azamgarh, India. I have a channel on YouTube called Tech Shreyansh where I upload Tech Video, Also I'm a Professional Web Developer or Designer. I enjoy playing with Codes and making Interesting Things.

Leave a comment