Home
Blogger Guide
Coding Guide

Responsive Adsense Bottom Sticky Ads for Blogger 100% Working

Hello friend, you would like to add Responsive Bottom Sticky Ads or Anchor Ads to your blog. This is the right article for you. Sticky ads give extra revenue incentives on Adsense ads, then this article will be a help to your blogger site.

But, Before that, you learn some basic information about Bottom Sticky Ads, various types of sticky ads on google AdSense guidelines to proceed with this ad properly.

What is a Sticky Ad?

A Sticky Ads is the Most Common Adsence Ad format. this ad format is used on many more websites. sticky ads stay visible on permanently your web page and can not move or scroll on your website content.

this ad format is mostly used by the header section, footer section, and Right or Left sidebars on the website.

Various types of Sticky Ads

There are two types of sticky ads. it's broadly Divided into Horizontal sticky ads And Vertical Sticky ads that are using commonly. Horizontal sticky Ads were mostly used on Header Section And Footer Section on the Webpage. it's generally Spread from one to Another End in Landscape View.

Google Adsense auto ads provide the Anchor Ads ( Sticky ads ) of a Horizontal sticky ad on the header or footer section. Vertical Sticky ads are mostly Used from the Left or Right Sidebar on the Websites. this case of ads was Permanently Stay on the Sidebar Section Even the user can scroll the web page.

Benefits of using Bottom sticky ads in Blogger

  • Boost your Adsense Revenue 
  • increase Adsense impression 
  • increase your CTR [Click Through Rate] 
  • improve your CPM value

Some statistical data here prove this information

  • Gives 45% to 60% higher CTR compared to normal advertising formats 
  • Improve ad visibility and user experience 
  • Give 30% to 70% more CPM

We will also discuss the Adsense guidelines for add Sticky ads on the blogger website. let’s see how to add Bottom Sticky Ads on the (Footer) bottom of the website.

Before, you read the article Step By step how to add the bottom sticky ads on the footer section and make sure to Back your website theme. if get a problem with this script you easily Restore it on your website. First You Click The Download Button And Download the Script.

Download

How to add Responsive Floating Bottom Sticky Ads On Blogger Step by Step

Step 1: Open your Blogger Account 

 Step 2: Open the Theme Section on the Sidebar 

 Step 3: Click The Edit HTML on the Theme Section 

 Step 4: Copy the CSS&JS Script on below Section 

 Step 5: Find ]]></b:skin> section the Html Script and Copy the CSS script on Downloaded File. 

 Step 6: Next, just paste the CSS Script above on ]]></b:skin> Tag or paste it in the additional CSS section of your theme.  

.Pixabin { 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; } .Pixabin-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); } .Pixabin .Pixabin-close svg { width: 22px; height: 22px; fill: #000; } .Pixabin .Pixabin-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }

 Step 7: Now Open Your Adsense Account and create a responsive display Ad unit. Now copy the data-ad-client And data-ad-slot code from the display ad unit Script. 

 Step 8: Copy the Second HTML Script on Downloaded File and replace the two codes ca-pub-xxxxxxxxxxx and data-ad-slot=”xxxxxxxxxxx” that you copied above.  

<div class='Pixabin jhfdiuh0' id='Pixabin'>
<div class='Pixabin-close' onclick='document.getElementById(&quot;Pixabin&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='Pixabin-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>

 One more important thing does not edit any Script only paste your Ad publisher id And Ad slot id on the Script. 

 Step 9: Now Paste the Script Above On the </body> Tag. 

 Step 10: Next Save the Theme. 

 Now Your Ready Show Bottom Sticky Ads on Your Blogger Website.

Video Guide 👇

Guidelines to add sticky ads

  • Sticky Ads cover less than 25% of the web screen at any time. 
  • You can add a vertical maximum of one sticky ad on the viewport. 
  • You can add a horizontal maximum of one sticky ad on the Page. 
  • You can add a Maximum of one Bottom sticky ads on the boundary of the content.

Final Words

l hope this Article help to add Responsive bottom Sticky ads Script to your website. And Please Do Support my blog And Share this Article Thanking You.

Post a Comment