How to Add Page Click With Heart Effect in Blogger

Hello guys, welcome to The Kathait. Today in this article I'm going to guide you step by step on How to Add Page Click With Heart Effect in Blogger. So, follow the easy steps and learn more about How to add page click with heart effect in the Blogger.

Adding a 'page click love effect or section' to your website is an easy, effective way to give your readers an accessible face. Or your readers will also feel very happy to read your articles or it will make the look of your website very beautiful too. so let's know How to add a page click love effect.

Steps to Page click with heart effect

Step 1. First of all, on Blogger Dashboard, click the theme and click again Edit HTML.

Step 2. Now you have to click anywhere and then press CTRL+F. and find this code </body>

Then copy and paste the code given below into the </body> tag above.

<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>

After pasting the code you have to click on save theme and save it, If you want to change its width, height and position then you can do.

Remember don't forget to save the theme.

If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button.

This is all about Add Page Click With Heart Effect in Blogger Website. I hope this article is very helpful for you and you love it. Please share your feedback in the comments.