ব্লগার সাইটে স্টিকি অ্যাড যুক্ত করার নিয়ম। Blogger Site Sticky Ads Html Code

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

Sticky Ads কী :

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

ওয়েবসাইটে Sticky Ads সেট করার নিয়ম :

কয়েকটি ধাপ অনুসরণ করে আমরা আমাদের ব্লগার সাইটটিতে খুব সহজেই স্টিকি অ্যাড সেট করে নিতে পারব। তাই মনোযোগ সহকারে নিচের ধাপগুলা অনুসরণ করুন।

ধাপ - ০১ : প্রথমত নিচে দেওয়া সম্পূর্ণ 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; }

ধাপ - ০২ :  এখন সরাসরি ব্লগারের Theme অপশনে চলে আসুন। এখানে আসার পর Customize এ ক্লিক করে Add CSS নামক একটি অপশন দেখতে পারবেন। এখানে’ই কপি করা কোডটি Paste করে দিন। 

ধাপ - ০৩ :  এখন Adsense এ গিয়ে একটি Responsive ব্যানার ad তৈরি করে নিতে হবে। তার জন্যে

 নিচে দেওয়া HTML কোডটি কপি করে আলাদা জায়গায় Note করে নিন। Note করার পর যেখানে xxxxx লেখা আছে। প্রথমটাতে আমাদের তৈরী করা Responsive ব্যানার ads টির ads client id দিতে হবে। তারপর নিচেরটিতে ad slot id টি দিতে হবে। এখন সম্পূর্ণ কোডটি কপি করে নিতে হবে।

<div class='sticky-ads' id='sticky-ads'>
      <div class='sticky-ads-close' onclick='document.getElementById("sticky-ads").style.display="none"'><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-xxxxxxxxxxxxxxxxxxxx"
      data-ad-slot="xxxxxxxxxxxxxxxxxxxx"></ins><script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
      
      </div>
      </div>

ধাপ - ০৪ :  এখন আবার ব্লগে এসে Edit HTML অপশনে ক্লিক করে ‘</body>’ লেখাটি খুজে বের করুন। বের করার পর কপি করা কোডটি ঠিক </body> Tag এর আগে বসিয়ে দিন, অন্যথায় ভুল হলে সমস্যা হবে। কোডটি বসানোর পর Save করুন। এরপর রিফ্রেশ দিয়ে আপনার সাইটটিতে ভিজিট করুন দেখুন কাজ সম্পূর্ণ হয়ে গেছে।

  

আশা করি বুজতে পারছেন, এভাবে খুব সহজে আপনি আপনার ব্লগে স্টিকি এড (Sticky Ad) যুক্ত করে নিতে পারবেন। ব্লগার ও এডসেন্স নিয়ে গুরুত্বপূর্ণ যেকোন টিপস ও ট্রিকস জানতে আমাদের সাথে থাকুন।