Add to your site Click To Love effect JavaScript Code Free

Add to your site Click To Love effect JavaScript Code Free

হায় বন্ধুরা কেমন আছেন, নিশ্চই ভালো আছেন। আজ আমি আপনাদের নতুন একটা ইন্টারেস্টিং বিষয় দেখাবো। যেটা মোবাইল দিয়েও করতে পারবেন। বিষয় টা হচ্ছে আপনি চাইলে ব্লগার ওয়েবসাইটে হার্ট ইফেক্ট বা লাভ ইফেক্ট যুক্ত করতে পারবেন। তার জন্য একটা জাভাস্ক্রিপ্ট কোড ব্লগার HTML কোডের মধ্যে সেভ করতে হবে। ফোন দিয়ে কিভাবে ব্লগারে ♥ হার্ট ইফেক্ট বা লাভ ইফেক্ট যুক্ত করবেন তার জন্য নিচের স্ক্রিনশট গুলো ফলো করুন।


প্রথম ছবিতে যেটা দেখতে পারছেন আশা করি বুঝছেন কোথায় এটা। এটা হলো ব্লগারের এডমিন প্যানেল। তো আপনি আপনার ব্লগারের এডমিন প্যানেলে যান। তারপর Theme লেখা অপশনে ক্লিক করুন। তার নিচে ছবিটির মতো পাবেন।



যখন এই ছবি টি পাবেন। তখন CUSTOMIZE এর পাশে 🔻 অ্যারো বাটন টিতে ক্লিক করবেন। তারপরে নিচের ছবির মতো একটি পপআপ বক্স আসবে।


পপআপ ব্ক্স টিতে Edit HTML নামে মেনু পাবেন সেটিতে ক্লিক দিবে। তখন দেখবেন হিজিবিজি লেখা কোড চলে আসছে। তখন আপনি এই ব্লগে দেওয়া যে কোড টা পাবেন সেটিকে কপি করে ব্লগের হিজিবিজি লেখার নিচের দিকে পেস্ট করবে। শুধু যেখানে সেখানে পেষ্ট করলে হবে না তার জন্য স্ক্রিনশট দেখে বুঝে পেষ্ট করুন।

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


আপনার ব্লগারের HTML কোডের একদম নিচের দিকে চলে যাবেন। সেখানে শেষ বডি ট্যাগ অর্থৎ </body> এটা লিখে সার্চ করবেন পেয়ে যাবেন। ঠিক এই লেখাটির উপরে বা আগে স্পেস দিয়ে ওখানো পেষ্ট করে দিবেন।



ছবিতে নিশ্চয়ই দেখতে পারছেন কেমনে পেষ্ট করছি। ঠিক ঐ </body> ট্যাগের উপরে পেষ্ট করে সেভ করে দেবেন। তারপর দেখবেন ভালোবাসা আর ভালোবাসা অর্থৎ কেউ আপনার ওয়েবসাইটে প্রবেশ করে মাউচ দিয়ে ক্লিক দেয়ে সে শুধু লাভ লাভ দেখবে ক্লিকের জায়গায়।

Demo Site

আপনি ডেমো সাইট ভিজিট করে দেখে নিন কেমন লাভ বা হার্ট ইফেক্ট আসে।

আরও ভালো ভাবে বোঝার জন্য নিচের ভিডিও টি দেখে নিন।


আশাকরি আমার এই লেখাটির মাধ্যমে আপনার উপকার হয়েছে। যদি উপকার হয়ে থাকে তবে অবশ্যই এই আর্টিকেল টি শেয়ার করুন আপনার বন্ধুদের কাছে।

ধন্যবাদ সম্পুর্ন লেখাটি পড়ার জন্য।

Post a Comment

Previous Post Next Post