How To Add Heart Click Effect in Blogger ?

How To Add Heart Click Effect in Blogger

Hello Friends, welcome to all of you in today's new post. In this post I will share with you all a tutorial on how to add heart effect on blogger. This heart effect will appear on your website when there is a click effect.

This effect is created with HTML, CSS, and JavaScript, but has been merged together and converted to JavaScript. You may have visited other people's websites or blogs and when you clicked on it, effects like love effect, mandala effect etc.

I will share a tutorial on this in this post, so that you can easily use it on your blog by reading this post. Follow the given steps till the end.

How To Add Heart Click Effect in Blogger :-

Step 1 :- First Go To Blogger.Com.
Step 2 :- Then Login Your Blogger Account.
Step 3 :- Then Click on Theme Menu.
Step 4 :- After Click on Edit Html.
Step 5 :- Then Copy The Given JavaScript Code and Put it Above The </body>.
<!-- Heart Click Effect Animation By Www.SmartTechMukesh.Com -->
<script src=''>
<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] = "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 :- Finally, Don't Forget To Click on Theme.

Conclusion :-

This is an easy way to add heart click effect on blogger website, you all must have understood. In this post I told how to add heart click effect on blogger. I hope this tutorial can be useful for all you bloggers and developers. Thank you for visiting our website.

Refrence :


Hey there! My name is Mukesh Kushwaha, I am a Professional Web Designer, Graphic Designer, UI/UX Designer, Logo Designer and Banner Designer. I am Content Creator from Bihar State, India. I love coding and editing, so I always try to create something new and interesting.
facebook instagram twitter pinterest telegram

Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.

Previous Post Next Post