কীভাবে ব্লগারে স্টিকি এড লাগাবো? How to Add Sticky Ad on your Blogger Site?

আপনি কী আপনার এডসেন্স এর আর্নিং বাড়াতে চাচ্ছেন? অথচ কীভাবে বাড়াবেন তা ভেবে পাচ্ছেন ন? এডসেন্স এর আর্নিং বাড়ানোর জন্য alternative উপায় হচ্ছে sticky ads লাগানো। এটি আপনার ওয়েবসাইটে লাগালে আপনার এডসেন্স এর ইনকাম দ্বিগুণ হয়ে যাবে।

Sticky ads আপনার ব্লগারে লাগানোর আগে জেনে নেওয়া যাক এটি আসলে কী? এবং এটি কীভাবে কাজ করে? আর sticky ads এর মাধ্যোমে আর্নিং দ্বিগুণ হবেই বা কী করে?

আমি দীর্ঘ ৩ বছর ধরে ব্লগার প্লাটফর্মে ব্লগিং করছি। আমার এই এডসেন্স এবং ব্লগ সম্পর্কে যথেষ্ট ধারণা রয়েছে। আমি কীভাবে আমার এডসেন্স একাউন্টে ইনকাম আগের তুলনায় দ্বিগুণ করেছি তা আজকের এই আর্টিকেলে আপনাদের জানাবো।

Sticky Ads কী?

স্টিকি এডস হচ্ছে এমন এক ধরণের এডস যেগুলো ওয়েবসাইট প্রেরণ করলে ওই এডসটা তেমন নড়াচড়া করে না। যেখানে প্রথম লাগানো হয় সেখানেই থেকে যায়। যতই স্ক্রল করা হোক না কেনো। sticky ad তাদের নিজেদের জায়গায় অবস্থিত থাকে। যেহুতু এটি একই জায়গায় থাকে দেখেই এগুলোকে sticky ads বলা হয়।

Sticky Ads কত প্রকার?

Sticky ads হচ্ছে দুই ধরণের এক horizontal ads আর দ্বিতীয়টি vertical ads। নিচে horizontal আর vertical ads এর উদাহরণ দেওয়া হয়েছে আপনারা দেখে নেন।

Horizontal ads হচ্ছে যেটি এমন এডস যেটির দৈর্ঘ্য থাকবে বেশী আর প্রস্থ দৈর্ঘ্যের তুলনায় কম থাকবে। এটিকে বলা হয় horizontal ads. উদাহরণ: ওয়েবসাইটে যেসকল Anchor ads গুলো দেখা যায় ওইগুলো।

Vertical ads ঠিক তার উল্টো। এটির প্রস্থ দৈর্ঘ্যের তুলনায় বেশী থাকবে। আর এটি লম্বালম্বি ভাবে থাকবে। এভাবে থাকলেই বুঝবেন এটি একটি vertical ads. উদাহরণ: ওয়েবসাইটের সাইডবারে যেসব এড লম্বাটে আকারে দেখা যায় ওইগুলো।

কীভাবে ওয়েবসাইটে স্টিকি এড লাগাবো?

মাত্র ৫টি step ফলো করে আপনি আপনার কাঙ্ক্ষিত ব্লগার সাইটটিতে খুব সহজেই স্টিকি এড লাগিয়ে নিতে পারবেন।

Step 1: প্রথমত নিচে দেওয়া সম্পূর্ণ CSS কোডটি কপি করুন।

.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; }

Step 2: এখন আপনার ব্লগারে যান। গিয়ে Theme এ যান। যাওয়ার পর Customize এ ক্লিক করেন। ওখানে যাওয়ার পর Add CSS লেখাটি দেখতে পাবেন। ওইখানেই কপি করা কোডটি Paste করুন।

Step 3: এখন আপনি আপনার Adsense এর ভিতর যান। ওখানে গিয়ে একটি Responsive ব্যানার ad তৈরি করুন। তৈরি করার পর ব্যানার adটির Ad Unit গুলো কপি করে আলাদা করে রাখুন।

Step 4: এখন নিচে দেওয়া HTML কোডটি কপি করুন। এরপর আপনার Notepad এ যান। Notepad এ গিয়ে এটি paste করার পর যেখানে xxxxx এগুলো লিখা। উপরেরটাই আপনার ad client id দিবেন। এরপর নিচেরটিতে ad slot id টি দিবেন। এটি আপনি আগেই কপি করে রাখছিলেন adsense থেকে। এবার সম্পূর্ণ কোডটি কপি করুন।

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

Step 5: এখন আপনি ব্লগারে আবার যাবেন। যাওয়ার পর Edit HTML এ যাবেন। সেখানে গিয়ে একেবারে সবার নিচে চলে যাবেন স্ক্রল করতে করতে। এরপর দেখবেন </body> লেখা আছে। একেবারে নিচের সামান্য উপরে পাবেন এই কোডটি। এরপর কপি করা কোডটি ঠিক </body> tag এর আগে বসাবেন। অন্যথায় ভুল হলে সমস্যা হয়ে যাবে। কোডটি বসানোর পর সেইভ করুন। এরপর রিফ্রেশ দিয়ে আপনার সাইটটিতে ভিজিট করুন। কী? পেরেছেন তো। অভিনন্দন আপনাকে।

আপনি যদি এভাবেই আমার কথা অনুযায়ী করে থাকেন। তাহলে ১০০% সিউর যে আপনি পারবেন। আর যদি কোনো কারণে সমস্যা হয় এটি করতে গিয়ে কমেন্টে লিখুন আপনার সমস্যা আমি আপনাকে সহযোগিতা করবো। ধন্যবাদ আর্টিকেলটি পড়ার জন্য।