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.

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='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>
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 :
Www.SmartTechMukesh.Com

Refernce:
www.smarttechmukesh.com

Our All Posts Are Protected By DMCA. So Don't Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited ! Or else Legal Actions Will Be Taken.

Hello Friends, My Name is John M Smith and Welcome To Our Website. My Passion is to Share Knowledge With Everyone. Also I am a Website Designer.

Post a Comment

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

Ad Blocker Detected

Please turn off your adBlock because only ads make us excited, Thank you !!!