How To Add Heart Click Effect in Blogger? – IN 2022

How To Add Heart Click Effect in Blogger? – IN 2022: In this post I will share with you how to add heart effect to Blogger. You will see this effect when you click on any element of your website.

Hello friends, in this post I will share with you how to add heart effect to Blogger. You will see this effect when you click on any element of your website.

Made with HTML, CSS and JavaScript, but merged together and converted to JavaScript. You may have seen on other people’s website when you click on an element, effects like love effect, mandala effect, etc.

Follow the steps below to add the effect to your blog or website.

Step 1 :- First Login Your Blogger Account.

Step 2 :- Then Click on Theme Menu.

Step 3 :- Then Click on Edit Html.

Step 5 :- Then Copy This Code and Put it Above The </body>.

<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 :- Finally, Don’t Forget Save This Theme.

What is a heart click effect script?

Heart click effect is when users will visit your website and they if they will click/touch anywhere on the website’s page then a nice heart will pop up and it will disappear in seconds. This heart effect animation will give a tremendous look to your website. 

What are the benefits of this click heart effect?

This heart clicks effect script for bloggers will attract your user to click on your website post for that you will get more page views and your google rank will increase and also your  Google Ads CPC will increase also. This is a very lightweight script and this script combined with CSS and JS it will not decrease your website speed. 

How to add a heart click effect on Blogger?

Step-1: Go to your Blogger Dashboard.

Step-2: Now from the Left Blogger menu bar click on Theme. 

Step-3: After that click on Customization Drop Down Menu.

Step-4: Now press on Edit HTML button. 

Step-5: Then copy the heart click effect HTML Code from below. 

<!-- Heart Click Effect Animation By Www.techedubyte.Com -->
<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(4JUdGzvrMFDWrUUwY3toJATSeNwjn54LkCnKBPRzDuhzi5vSepHfUckJNxRL2gjkNrSqtCoRUrEDAgRwsQvVCjZbRyFTLRNyDmT1a1boZVwidth: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(4JUdGzvrMFDWrUUwY3toJATSeNwjn54LkCnKBPRzDuhzi5vSepHfUckJNxRL2gjkNrSqtCoRUrEDAgRwsQvVCjZbRyFTLRNyDmT1a1boZV" == 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: And now press CTRL+F and search </body>.

Step-7: After that past, the copied heart click effect script above the </body> tag.

Step-8: Finally save the theme and check it out. 

Finally, you added the beautiful Heart Click effect on your blogger site. If you like the heart click effect script please share this method with your blogger friend and don’t forget to join our Telegram channel. 

Conclusion :-

I hope after reading this post you have understood how to add hearteffect to blog or website. Very easy way I have learned to add effect to this post. Thanks for my website.

#hearteffect #bloggerclickeffect #bloggerloveeffect #onclickeffect #loveeffect