Also Read

How To Add Heart Click Effect In Blogger?

Everybody needs to customize their blogger site to give an expert look to their blog. You might say that a few websites have click heart effect and you are thinking how to add a heart click effect on a blogger site. If you are looking for the heart click effect script to add it in your site then you are on the right site. In this article, you will come to know how to add a heart click effect in blogger.

What Is A Heart Click Effect In Blogger?

Heart click effect is when visitor visits your site and if they click any place on the site's a beautiful heart effect will spring up and it will vanish instantly. This heart click effect will give a beautiful look to your site.

 

What Are The Benefits Of Heart Click Effect In Blogger?

This heart clicks effect for blogger will attract your visitor to click on your site post for that you will get more clicks and your Google rank will increase and furthermore your Google Ads CPC will increase too. This is an very lightweight content and this content includes CSS and JS it won't reduce your site speed.

 

How To Add A Heart Click Effect In Blogger?

Here are the steps:

Step 1: 

First login to your Blogger account.

Step 2: 

Then Click on Theme > Edit HTML.

Step 3: 

Click anywhere into the code area.

Step 4:

Press Ctrl + F and search for </body> tag.

Step 5:

Copy The below code and paste it above the </body> tag.

<script type='text/javascript'> //<![CDATA[ ! function(e, t, a) { function n() { c(".heart{width: 12px;height: 12px;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: -8px;}.heart:before{left: -8px;}"), 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: 

Save This Theme.

Done.

Conclusion

Hope you have successfully added this code to add heart click effect in blogger. If you like this way to add heart click effect in blogger, please share it to your friends.