Blogger এর জন্য নিয়ে এলাম প্রফেশনাল ও প্রিমিয়াম মানের তিনটিই স্ক্রীপ্ট। ব্লগার হয়ে থাকলে অবশ্যই দেখবেন।

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

কি সেই স্ক্রীপ্ট গুলো?

১. Exit Intent Pop-up script।
২.Copy protection Pop-up script।
৩.Floating Progress Bar script।

Script এর নামগুলি দেখে আশাকরি মোটামুটি তাদের কাজ সম্পর্কে ধারণা পেয়েছেন। যদি না পান সমস্যা নেই আমি তো আছি। প্রত্যেকটি স্ক্রীপ্ট নিয়ে বিস্তাটি আলোচনা ও ব্যবহার পদ্ধতি দেখিয়ে দিবো।
তো চলুন ১ নম্বর থেকেই শুরু করা যাক।

১.Exit Intent Pop-up কি এর কাজ কি ?

এই Exit Intent Popup এর কাজ হলো যখন ইউজার পেজ থেকে বের হওয়ার ইচ্ছা প্রকাশ করে (যেমন: ব্রাউজারের ব্যাক বাটন চাপা, ট্যাব পরিবর্তন, পেজ বন্ধ করার আগে), তখন তার সামনে একটা সুন্দর পপআপ দেখানো , যাতে বলা থাকে:“Wait! Before You Go 🚀 – Are you sure you want to leave this site?”। এতে করে অনেক সময় ইউজার আবার ফিরে আসতে পারে বা আপনার সাইটে আরও সময় কাটায়।

এই Exit Intent Popup এর ফিচার সমূহ

১. সুন্দর ডিজাইন ও ইউজার ইন্টারফেস: এই Popup এর জন্য কাস্টম CSS ব্যবহার করা হয়েছে যা একদম মডার্ন, সাদা ব্যাকগ্রাউন্ড, রেড-রঙের হেডার টেক্সট ও গ্রেডিয়েন্ট বোতাম সহ রয়েছে।

২. ফুল স্ক্রিন ওভারলে: Popup প্রদর্শনের সময় পুরো স্ক্রিন ঢেকে দেয়া হয় কালো overlay সহ, যা ইউজারের ফোকাস Popup এ রাখতে সাহায্য করে।

৩. অ্যানিমেশন সহ Popup: Popup টা আসার সময় স্কেল ও ফেড ইন অ্যানিমেশন আছে, যা ইউজারকে সুন্দর ভিজ্যুয়াল ফিডব্যাক দেয়।

৪. দুইটি বোতাম দিয়ে ইন্টারঅ্যাকশন: “Stay on Site” ক্লিক করলে Popup বন্ধ হয়, “Yes, Exit” ক্লিক করলে ব্রাউজার ব্যাক চলে যায়।

৫. মোবাইল ব্যাক বাটন কন্ট্রোল: মোবাইল ইউজার যদি ব্যাক বাটন চাপেন, Popup দেখানো হয় এবং ব্রাউজার পেজ থেকে এক্সিট বাধা দেয়।

৬. ট্যাব পরিবর্তন ও ভিজিবিলিটি চেঞ্জ ডিটেকশন: ইউজার যখন অন্য ট্যাবে যান বা সার্চ বার ক্লিক করেন তখন Popup দেখানো হয়।

৭. ডেস্কটপ এক্সিট ইন্টেন্ট: ব্রাউজারের উইন্ডো বন্ধ করার আগে Popup শো করে ইউজারকে রুকতে বলা হয়।

৮. জাভাস্ক্রিপ্ট ইভেন্ট লিসেনার ব্যবহার: বিভিন্ন ব্রাউজার ইভেন্ট যেমন popstate, visibilitychange ও beforeunload দিয়ে ইউজারের এক্সিট ইচ্ছা ট্র্যাক করা হয়েছে।

৯. রিপিটেড Popup রোধ: Popup একবার দেখানোর পর একই সেশন এ আবার দেখানো হয় না যতক্ষণ না ইউজার এক্সিট নিশ্চিত করেন বা Popup বন্ধ করেন।

১০. ব্রাউজার ব্যাক ইতিহাস হ্যান্ডলিং: history.pushState ব্যবহার করে ব্রাউজার ব্যাক ফাংশনালিটি কাস্টমাইজ করা হয়েছে যাতে Popup সহজেই নিয়ন্ত্রণ করা যায়।

Exit Intent Pop-up এর স্ক্রীনশট।

কোডটি এখন থেকে কপি করুন।

২. Copy protection script কি এবং কাজ কি?

ইন্টারনেটে অনেক সময় কপিরাইট লঙ্ঘনের ঘটনা ঘটে, তাই আপনার ব্লগের কনটেন্ট সুরক্ষার জন্য এই Copy Protection সিস্টেমটি খুব কাজে লাগে। এর মাধ্যমে ইউজার যখন আপনার ব্লগের লেখা কপি করতে চায়, তখন ওরিজিনাল কনটেন্ট না কপি হয়ে একটা ডিফল্ট বার্তা কপি হয়—“© This content is protected. Visit our site for full details!”। সাথে নিচের দিকে একটি ছোট নোটিফিকেশন (টোস্ট) আসে বলে দেয় কপি করা নিষিদ্ধ।
আপনি নিজের মতো করে যেকোনো লিখা দিতে পারবেন।

এই Copy Protection Script এর ফিচার সমূহ

১. টেক্সট সিলেকশন কালার পরিবর্তন: যখন আপনি টেক্সট সিলেক্ট করবেন, তখন সিলেক্টেড অংশের ব্যাকগ্রাউন্ড লাল (#ff4747) আর লেখা সাদা হয়ে যাবে, যাতে স্পষ্ট দেখা যায়।

২. কনটেন্ট কপি ব্লক: ইউজার যখন কিছু কপি করার চেষ্টা করবে, তখন আসলে তারা ওরিজিনাল টেক্সটের বদলে একটা ডিফল্ট বার্তা কপি করবে—“© This content is protected. Visit our site for full details!”

৩. কপি করার সময় টোস্ট নোটিফিকেশন: কপি করার সাথে সাথেই নিচের দিকে সুন্দর একটা ছোট্ট বার্তা (টোস্ট আকারে) আসবে, যা বলবে “Content copy is disabled! Default text copied.”

৪. আধুনিক ও আকর্ষণীয় টোস্ট ডিজাইন: টোস্টটি নীল রঙের গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড সহ, হালকা ছায়া এবং রাউন্ড কর্ণার নিয়ে খুব প্রিমিয়াম লুক দেয়।

৫. Font Awesome আইকন ব্যবহার: টোস্টের পাশে একটা সতর্কতা চিহ্ন দেখানো হয়, যা ইউজারের দৃষ্টি আকর্ষণ করে।

৬. টোস্টের অ্যানিমেশন: টোস্ট আসার সময় নিচ থেকে উপরে আসার মতো স্মুথ অ্যানিমেশন থাকে এবং কয়েক সেকেন্ড পরে নিজে থেকেই হাইড হয়ে যায়।

৭. জাভাস্ক্রিপ্টের মাধ্যমে ইভেন্ট হ্যান্ডলিং: “copy” ইভেন্ট ট্রিগার হলে নিজেই ডিফল্ট কপি ডাটা সেট করে এবং টোস্ট দেখায়।

৮. ব্যবহারকারীকে কপি থেকে বিরত রাখা: সরাসরি পেজের আসল কনটেন্ট কপি হওয়া বন্ধ করে দেওয়া হয়েছে, তাই কন্টেন্ট চুরি করা কঠিন।

Copy Protection এর স্ক্রিনশট।

এখান থেকে কোড কপি করুন।

3. Floating Progress Bar Script কি এবং এর কাজ কি?

আপনার ব্লগে যখন কেউ কোনো আর্টিকেল পড়বে, তখন এই Progress Bar তার পড়ার অগ্রগতি শতকরা ভাগে দেখায়। সাথে নিচে ডানদিকে একটা গোলাকার বাটন থাকে, যা ক্লিক করলে দ্রুত পেজের উপরে ফিরে যায়। এটি ইউজারদের পড়ার অভিজ্ঞতা অনেক বেশি স্মুথ ও স্বচ্ছন্দ করে। এটাতে ইউজার কত পার্সেন্ট পোস্ট পড়ছেন তার জন্য কতো সময় লেগেছে এবং কতো পার্সেন্ট বাকি আছে সব দেখতে পারবেন

এই রিডিং প্রগ্রেস বার এবং টপ বাটন এর ফিচারসমূহ

১. আর্টিকেল পড়ার অগ্রগতি দেখায়: পেজের উপরের দিকে একটা পাতলা বার থাকে, যা দেখায় আপনি কতটুকু পড়েছেন। যেমন ধরুন ৩০% পড়া হয়ে গেছে।

২. পড়ার সময় অনুমান দেয়: নিচে একটা গোলাকার বাটনের মধ্যে কত মিনিট বাকি আছে সেটাও দেখায়, যা ইউজারকে সময় বুঝতে সাহায্য করে।

৩. টপে ফিরিয়ে দেয়ার বাটন: নিচের ডানদিকে একটা গোলাকার বাটন আছে, যেটা ক্লিক করলে বা কী-বোর্ড থেকে এন্টার/স্পেস দিলে পেজের উপরে চলে যাবে।

৪. স্বয়ংক্রিয় অ্যানিমেশন: বারটা স্বচ্ছন্দে বাড়ে বা কমে স্ক্রল অনুযায়ী, আর বাটন ধীরে ধীরে দেখা বা লুকানো হয় স্ক্রল অনুযায়ী।

৫. কনফিগারেশন সহজ: কোডে সহজে পরিবর্তন করতে পারেন, যেমন কোন এলিমেন্টে কাজ করবে, কোথায় বাটন দেখাবে, কত শব্দে শুরু হবে প্রগ্রেস বার, ইত্যাদি।

৬. মোবাইল এবং ডেস্কটপ উভয়ে কাজ করে: ছোট বা বড় স্ক্রিনে সুন্দরভাবে চলবে, মোবাইলে বাটনের সাইজ ঠিক থাকে।

৭. এক্সেসিবিলিটি ফিচার: বাটনে ট্যাব দিয়ে ফোকাস করতে পারবেন এবং কী-বোর্ড থেকে এন্টার বা স্পেস চাপলেও কাজ করবে।

৮. দ্রুত রেসপন্স: স্ক্রল ইভেন্টকে রিকোয়েস্ট অ্যানিমেশন ফ্রেম দিয়ে হ্যান্ডেল করে, যা ব্রাউজারকে খুব দ্রুত ও হালকা রাখে।

৯. পড়ার শব্দ ও সময় গণনা: পেজের টেক্সট থেকে শব্দ সংখ্যা নিয়ে আনুমানিক সময় বের করে দেখায়, যা ব্যবহারকারীকে সাহায্য করে বুঝতে কত সময় লাগবে।

১০. ছোট পর্দায় ও ছোট আর্টিকেল এ লুকিয়ে যায়: যদি লেখাটা খুব ছোট হয় বা মোবাইল হলে বাটন বা প্রগ্রেস বার লুকিয়ে রাখা যায়, যাতে ব্যাঘাত না ঘটে।

Progress bar এর স্ক্রিনশট।

এখান থেকে কোডটি কপি করুন।

আশাকরি এতক্ষণে স্ক্রীপ্ট গুলুর ডেমো এবং কাজ সম্পর্কে বুঝে গেছেন। এখন দেখাবো কি ভাবে script গুলু ব্লগার এ ইউজ করবেন।
আপনে তিনটি স্ক্রীপ্ট একই পদ্ধতিতে ব্লগার এ সেটআপ করতে পারবেন। তাই আমি একটা দিয়েই দেখিয়ে দিচ্ছি।

কি ভাবে স্ক্রিপটগুলু সেটআপ করবেন?

প্রথমে যে স্ক্রিপ্টটি ব্যবহার করতে চান সেটি উপরের দেওয়া লিংক থেকে কপি করে নিন।
তারপর blogger.com এ প্রবেশ করুন। যে সাইটে ব্যবহার করতে চান সেই সাইট এর ডান সাইড এর মেনু ওপেন করুন।
এবার নিচের ছবির মতো Theme এ ক্লিক করুন

তারপর ডাউন 🔻 তে ক্লিক করে Edit HTML এ ক্লিক করুন।

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

এবার সাইটে প্রবেশ করে দেখুন কি রকম পরিবর্তন হয়েছে।

এই একই প্রোসে এ আপনি তিনটি কোড একে একে
সেটআপ করুন এবং সর্বশেষ আপনার ব্লগার ব্লগ সাইট টিকে একটা প্রিমিয়াম লুকিং দিন।

বলতে বলতে একেবারে পোস্টের শেষে চলে এলাম।
সর্বশেষ বলতে চায়,

এই তিনটি ফিচার আপনার ব্লগকে করবে আরো প্রফেশনাল, ইউজার ফ্রেন্ডলি আর সিকিউর। Exit Intent Popup ইউজারদের ফিরে আসার সুযোগ দেয়, Copy Protection আপনার লেখা চুরি থেকে বাঁচায়, আর Reading Progress Bar পড়ার অভিজ্ঞতা উন্নত করে। যদি আপনার ব্লগের ভিজিটর বেশি করতে চান ও কনটেন্ট সুরক্ষায় আগ্রহী হন, তাহলে অবশ্যই এগুলো ব্যবহার করবেন।

যদি কোথাও বুঝতে সমস্যা হয় অবশ্যই কমেন্ট করবেন। আর ব্লগার ও ওয়ার্ডপ্রেসে সম্পর্কিত যেকোন হেল্প লাগলে বলতে পারেন।
তো ভালো থাকুন সুস্থ্য থাকুন। Trcikbd এর সাথেই থাকুন।
তবে মাঝে মাঝে আমার সাইট থেকে ও একটু ঘুরে আসতে পারেন। এতে কররে আমারও একটু আকটু ভালো লাগে বুজতেই তো পারতেছেন।

💖 রোমান্টিক শর্ট ক্যাপশন | সেরা বাংলা প্রেমের ক্যাপশন