How To Add Heart Click Effect in Blogger ?

 

नमस्कार दोस्तों, स्वागत है आप सभी का आज के इस नए पोस्ट में। इस पोस्ट में मैं आप सभी के साथ ब्लॉगर पर हृदय प्रभाव जोड़ने के लिए एक ट्यूटोरियल साझा करूँगा। क्लिक प्रभाव होने पर यह हृदय प्रभाव आपकी वेबसाइट पर दिखाई देगा।

यह प्रभाव एचटीएमएल, सीएसएस और जावास्क्रिप्ट के साथ बनाया गया है, लेकिन इसे एक साथ मिला दिया गया है और जावास्क्रिप्ट में परिवर्तित कर दिया गया है। आप अन्य लोगों की वेबसाइटों या ब्लॉगों पर गए होंगे और जब आपने उस पर क्लिक किया, तो प्रेम प्रभाव, मंडला प्रभाव आदि जैसे प्रभाव दिखाई देने लगे।

मैं इस पोस्ट में इसके बारे में एक Tutorial शेयर करूंगा, ताकि आप इस पोस्ट को पढ़कर आसानी से अपने ब्लॉग पर इसका इस्तेमाल कर सकें। दिए गए स्टेप्स को अंत तक फॉलो करें।

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 :
https://www.uctc.in/