How to add Sticky Bottom ad bar in Blogger? Blogger Tips 2022

আপনি কি আপনার Blogger ওয়েবসাইটে Bottom Sticky Ads যোগ এবং AdSense-এ আয় বৃদ্ধি করতে চান? তাহলে এই পোষ্টটি আপনার জন্য অত্যন্ত সহায়ক হতে চলেছে।

কিন্তু, তার আগে, আপনাকে sticky ads কী, বিভিন্ন ধরনের sticky ads এবং এই বিজ্ঞাপনগুলির যথাযথ বাস্তবায়নের জন্য অ্যাডসেন্স টিমের দেওয়া guideline গুলি কী তা বুঝতে হবে।

What is a sticky Ad?

sticky Ad হল একটি fixed ad যা যখন একজন ব্যবহারকারী একটি আর্টিকেল পড়বে তখনও AD-টি ঠিক একই অবস্থানে দৃশ্যমান থাকবে। এগুলি সাধারণত হেডার, ফুটার, বাম/ডান বার, বাম এবং ডান সাইডবারে ব্যবহৃত হয়।

Types of Sticky Ads

Sticky Ads গুলিকে বিস্তৃতভাবে দুটি ভাগে বিভক্ত করা হয়েছে। যেমন Horizontal & vertical.

Horizontal বিজ্ঞাপনগুলি সাধারণত একটি ওয়েবসাইটের শিরোনাম এবং ফুটারে স্থাপন করা হয় এবং এগুলি সাধারণত landscape পদ্ধতিতে এক প্রান্ত থেকে অন্য প্রান্তে ছড়িয়ে পড়ে।

অ্যাডসেন্সের “অটো অ্যাডস” বিভাগে আমরা যে অ্যাঙ্কর বিজ্ঞাপনগুলি পাই তা হল Horizontal sticky ad এর উদাহরণ।

Vertical sticky ad গুলি সাধারণত একটি ওয়েবসাইটের সাইডবারে এবং কিছু ক্ষেত্রে সাইডবারের বাইরে রাখা হয়। এগুলি এমনভাবে ডিজাইন করা হয়েছে যে ব্যবহারকারী page-টি scroll করলেও তা সাইডবারে আটকে থাকবে।

Benefits of using sticky ads in Blogger

sticky ad আপনার AdSense আয়কে বাড়ানোর একটি দুর্দান্ত উপায় কারণ এটি আপনার ওয়েবসাইটের সামগ্রিক ইম্প্রেশন এবং click-through-Rate [CTR] বাড়ায় এবং সেই সাথে সময়ের সাথে সাথে আপনার CPM মান উন্নত করে৷

এখানে কিছু পরিসংখ্যানগত তথ্য রয়েছে যা উপরের পয়েন্টটিকে প্রমাণ করে।

• 40-60% বেশি CTR: সাধারণ প্রদর্শন বিজ্ঞাপনের তুলনায়
• দর্শনযোগ্যতা উন্নত করুন: একই প্লেসমেন্টে অন্যান্য ফরম্যাটের তুলনায় 200% বেশি দর্শনযোগ্য।
• 30-70% উচ্চতর CPM: বিজ্ঞাপনদাতারা এই বিজ্ঞাপনগুলির জন্য আরও বেশি করে।

আমরা ব্লগারে sticky ads রাখার নির্দেশিকা নিয়েও আলোচনা করব কিন্তু তার আগে আসুন জেনে নিই কিভাবে আপনি আপনার ওয়েবসাইটে sticky footer ads যোগ করতে পারেন।

নীচের Step গুলি নিয়ে এগিয়ে যাওয়ার আগে আপনার থিমের একটি ব্যাকআপ নেওয়া নিশ্চিত করুন, যাতে আপনি যদি কিছু ভুল করেন তবে আপনি সহজেই ব্যাকআপ ফাইল আপলোড করে আপনার ওয়েবসাইটটিকে তার আসল অবস্থানে পুনরুদ্ধার করতে পারেন৷

How to create Responsive Floating Bottom Sticky Ad in Blogger

ব্লগারে Bottom Sticky Ad যোগ করতে নিচের ধাপগুলো অনুসরণ করুন।

ধাপ-১: নিচের CSS কোডটি কপি করুন এবং এটিকে এই ]]></b:skin> কোডের ঠিক উপরে পেস্ট করুন অথবা আপনার থিমের Additional CSS বিভাগে পেস্ট করুন।

Copy the Below CSS code

.sticky-ads{ position: fixed; bottom: 0; left: 0; width: 100%; min-height: 70px; max-height: 200px; padding: 5px 0; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition: all .1s ease-in; transition: all .1s ease-in; display: flex; align-items: center; justify-content: center; background-color: #fefefe; z-index: 20; } .sticky-ads-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 12px 0 0; position: absolute; right: 0; top: -30px; background-color: #fefefe; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08); } .sticky-ads .sticky-ads-close svg { width: 22px; height: 22px; fill: #000; } .sticky-ads .sticky-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px;
margin-left: 10px; }

এর জন্য Theme Section এ যান এবং কাস্টমাইজেশনে ক্লিক করুন। এখন অ্যাডভান্স ট্যাবে অ্যাড সিএসএস সেকশন সার্চ করুন। এখন CSS কোড পেস্ট করুন এবং আপনার থিম Save করুন।

ধাপ-২: এখন AdSense এ যান এবং একটি responsive display Ad unit তৈরি করুন।

এখন display Ad unit থেকে data-ad-client & data-ad-slot কোড কপি করুন।

ধাপ-৩: নিচের HTML কোডটি কপি করুন এবং আপনি উপরে যে দুটি কোড কপি করেছেন তা replace করুন।

HTML code for Sticky footer ad

<div class=’sticky-ads’ id=’sticky-ads’> <div class=’sticky-ads-close’ onclick=’document.getElementById(&quot;sticky-ads&quot;).style.display=&quot;none&quot;’><svg viewBox=’0 0 512 512′ xmlns=’http://www.w3.org/2000/svg’><path d=’M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z’/></svg></div> <div class=’sticky-ads-content’> <ins class=”adsbygoogle” style=”display:inline-block;height:70px;width:100%;line-height:70px;” data-ad-client=”ca-pub-xxxxxxxxxxx” data-ad-slot=”xxxxxxxxxxx”></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>

ধাপ-৪: এখন আপনার থিমের </body> ট্যাগের ঠিক উপরে কোডটি পেস্ট করুন এবং এটি Save করুন।

এখন আপনি সফলভাবে ব্লগার সাইটে স্টিকি ফ্লোটিং বটম বিজ্ঞাপন যোগ করেছেন।

Domo Here

Conclusion

আমি আশা করি এই নির্দেশিকা আপনাকে ব্লগার ওয়েবসাইটে একটি Responsive bottom sticky ad যোগ করতে সাহায্য করবে। আপনি যদি এই Article টি পছন্দ করেন তবে আপনার বন্ধুদের সাথে এটি Share করতে ভুলবেন না
Thanks ?