BloggrsGuide

Hey bloggers,

Are looking for guide on how to add bottom sticky ads in blogger website? Or have you searching for how to increase adsense revenue? If yes, So don't worry this guide  is  for you. 

In this guide I will not only show you how to add bottom sticky ads in blogger website, I will also show you the benefits of bottom sticky ads and  how adding bottom sticky ads skyrocket your Adsense revenue.

How to add Responsive Bottom Sticky Ads in Blogger

So, Take a cup of tea or coffee and read the step by step method to add bottom sticky ads in blogger website.

But Before starting the full procedure of  How to add Responsive Bottom Sticky Ads in Blogger,  you need to know the basics  like what is sticky ads, different types of sticky ads, and what are the guidelines given by the Adsense team for proper implementation of these ads. 

How to add Responsive Bottom Sticky Ads in Blogger

• What is A Sticky Ad?

• What are the types of Sticky Ads?
• Benefits of Sticky ads in Blogger
• How to create Responsive Floating Bottom Sticky Ad in Blogger
• Guidelines to Add Sticky Ads to a website
• Conclusion
• #Bonus Tip

What is a Sticky Ad?

A sticky ad is a type of ads which has fixed size and stays visible in the exact same position regardless of the user scrolling through the content. These are generally used in the header, footer, left/right bar, left & right sidebar.

Read: How To Start A Blog In 2021 for Free

What are the types of Sticky Ads?

Sticky ads are broadly divided into two major categories. 

• Horizontal : These types of ads are normally placed at the header and footer of a website & these are generally spread from one end to other ends in a landscape manner. 

• Vertical : Vertical sticky ads are generally placed at the sidebar of a website and in some cases outside of the sidebar. Vertical Sticky ads are designed in such a way that they will stick in the sidebar even though the user scrolls down the page. 

Example : Anchor ads that we see in the “auto ads” section of Adsense is an example of a Horizontal sticky ad.

Benefits of using sticky ads in Blogger

Sticky ads is an excellent way to skyrocket your AdSense revenue as it increases the overall impression & click-through rate [CTR] of your website as well as improve your CPM value over time. 

Don't take my words, here's the Adsense earning report of my another website StudyMates91

I hope you will now understand that how sticky ads skyrocket Adsense revenue from my revenue statistical data.

I have also provided a quick comparison between sticky and normal display ads, So have look on it to understand the benefits of Sticky ads clearly.

 Sticky Ads vs Normal Display Ads

• 30-50 % High CTR: compared to normal display ads
• Sticky ads are 110% more viewable than other types of ads formats on same placement area which increases the impressions.
• Sticky ads results 30-60% High CPM than normal formats of ad

Read: How to Add Reading Progress Bar In Blogger

Let’s understand the full procedure of how to add sticky ads in footer or bottom of your blogger website after that we will also discuss the guidelines for adding sticky ads in Blogger

Suggestion : Before we go with the below steps make sure to take a backup of your theme, so that if you do any mistakes, you can easily restore your website design to its original layout by uploading the backup file in restore theme section. 

---

How to create Responsive Floating Bottom Sticky Ad in Blogger 

To add a bottom sticky ad on your Blogger website follow the  steps given below.

Step-1: First of all you all need to Copy the below CSS code and add it in your blogger website.

I will tell you that there are two methods to add the following CSS code in your blogger website you can select anyone that is suitable for you. But I will recommend you to use 2nd method if you are using a smartphone for blogging.

#Method 1: Copy the CSS code given below and paste it Just above this    ]]></b:skin> code in Edit HTML Section.

#Method 2 : Copy the Below CSS code and go to the Theme section and click on customization. Now in the advanced tab search for Add CSS section when you find it just paste the given CSS code and save your theme

HTML

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

Step-2: Now you have to go to Adsense account and create a responsive display Ad unit. 

After that copy the data-ad-client & data-ad-slot code from the code of display ad unit. 

Step-3: Copy the given HTML code and replace the two codes  with the code that you copied from your display ad unit. 

HTML

<div class='AT-ads jhfdiuh0' id='AT-ads'>
<div class='AT-ads-close' onclick='document.getElementById(&quot;AT-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='AT-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 4 : Now paste the code just above the </body> tag of your theme & save it. 

Congrats! Now you have successfully added the Sticky Floating Bottom Ads in your Blogger website. 

If you have any clickable buttons at the bottom like back to top then you can disable it or shift it to a little upward of the ad unit using CSS code.

If you don't know how to do this comment your query.: 

---

Guidelines of Adding sticky ad in a website

• Your Sticky ad unit should not cover more than 20% of the screen at any time.
• One vertical sticky per viewport
• One horizontal sticky per page
• No cursor-associated movements (sticky ad must remain immobile)
• Add some whitespace or boundary between the ad and content, so it’s distinguishable from the content.
• According to Google, Sticky ads shouldn’t be implemented on Gaming niche sites and pages with infinite scroll to provide a better user experience.

---

Conclusion

Horizontal top & bottom sticky ads are suitable in mobile devices whereas vertical sticky ads suitable in desktop.  But I will not recommend you to use anchor ads and bottom sticky ad together at the same time as it may results a bad user experience for your readers and it also looks unprofessional. 

I hope this guide will be helpful for you to add a responsive floating bottom Sticky Ad to the Blogger website. If you like this guide then don’t forget to share this with your friends and in bloggers community.

---

Bonus Tip :

Want to Make money from your new Blog? If Yes, So Don't wastes years for getting Adsense Approval. As you know Adsense do not give approval to new blog easily, you have to wait for it. Therefore I will suggest you to start Affiliate Marketing.

Now, the question that comes in your mind is that Which Affiliate program you should join? or Which Affiliate program is suitable for new Bloggers?

Don't worry, I will guide you in which affiliate program you should join as begginer.

The selection of suitable Affiliate program is mainly depends on your blog niche or topic. For example if your Blog is related to Shopping or Product review then you should join affiliate programs of different online shopping companies like Amazon, Flipkart, Myntra etc.

But making different-different affiliate account from different-different companies is not a good practice for Bloggers. that's why I joined Earnkaro affiliate program. I will also suggest you to join Earnkaro and start your earning. You can also read genuine EarnKaro Review before SignUp.