What tutorial do you want for the next article! Request Here!

How to Add Anchor Ads on Website | Bottom Sticky Ads

Guide to adding or editing Anchor Ad ad units.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

If you want to add Bottom Sticky Ads in Blogger and want to generate more revenue then this article will be very helpful for you.

How to Add Responsive Bottom Sticky Ads | Guide to Add Anchor Ads

Anchor Ads appear on mobile and desktop displays, are floating ads that stick to the bottom of your browser. If you are already using the Auto-Ads feature of Google Adsense then you can disable this widget.

Anchor Ad

In the latest update you can edit or disable Anchor Ad directly via Blogger Layout.

Google AdSense also provide this stick ad unit that can be added by enabling Auto-ads on blog. But the disadvantage of Google's default Stick Ad is that sometimes it appears sometimes it doesn't,it also appears in random places in top or bottom.


What are Anchor Ads?

Anchor Ad (Sticky Ads) is a type of overlay ad which stays at the fixed position of a webpage regardless of scrolling. These are generally used in top, bottom, left & right sidebar.


Benefits of Adding Anchor Ad

Anchor Ad (Sticky Ad) are very helpful to increase the revenue as it increases the impression and CTR, CPM value of your website. Also it increases the viewability of ads which is very helpful to optimize the ad revenue.


Steps to Add Anchor Ad

Follow the steps given below to add Floating Bottom Sticky Ad (Anchor Ad) in Blogger -

Step 1. Adding CSS Codes

Copy the following CSS Codes and paste just above to ]]></b:skin> tag.

/* Variable color */
:root{
--transition-1: all .1s ease ;
--content-border: #eceff1 ;
--dark-bgAlt: #2d2d30 ;}
/* Sticky Ad */
.stickAd{position:fixed;bottom:0;left:0;right:0;width:100%;min-height:70px;max-height:200px;padding:5px 5px;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition:var(--transition-1);transition:var(--transition-1);display:flex;align-items:center;justify-content:center;background-color:#fefefe;z-index:50;border-top:1px solid var(--content-border)} .stickAdclose{width:40px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:12px 0 0;border:1px solid var(--content-border);border-bottom:0;border-right:0;position:absolute;right:0;top:-30px;background-color:inherit} .stickAdclose svg{width:18px;height:18px} .stickAdcontent{flex-grow:1;overflow:hidden;display:block;position:relative} .stickAdin:checked ~ .stickAd{padding:0;min-height:0} .stickAdin:checked ~ .stickAd .stickAdcontent{display:none} .darkMode .stickAd{background-color:var(--dark-bgAlt)} .darkMode .stickAd, .darkMode .stickAdclose{border-color:rgba(255,255,255,.1)}

If Close Icon not visible in theme, then add this below SVG in icon section. simplest way to find icon section, searching svg

      <!--[ SVG Icon ]-->      
      <b:includable id='close-icon'>
        <!--[ Close icon ]-->
        <svg class='line' viewBox='0 0 24 24'><line x1='18' x2='6' y1='6' y2='18'/><line x1='6' x2='18' y1='6' y2='18'/></svg>
      </b:includable>

Step 2. Adding HTML Codes

Copy the following codes and paste just below to </footer> tag.

<b:if cond='!data:view.isHomepage and !data:view.isPage and data:blog.isMobileRequest'>
<!--[ Sticky ad ]-->
<input class='stickAdin hidden' id='stickAdin' type='checkbox'/>
<div class='stickAd'>
<label class='stickAdclose' for='stickAdin'><b:include name='close-icon'/></label>
<div class='stickAdcontent'>
<ins class='adsbygoogle' data-ad-client='ca-pub-0000000000000000' data-ad-format='horizontal' data-ad-slot='0000000000' data-full-width-responsive='false' style='display:block;text-align:center'/>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div></div>
</b:if>

Step 3. Adding AdSense Codes

Go to your AdSense account and create a new Responsive Display Ad Unit.

Now copy the data-ad-client & data-ad-slot codes from the Display Ad Unit and paste these codes where we have marked places for these.

If you are using AdNetwork other than Google AdSense, then delete the code given below and paste your ad codes in its place.

<!--AdSense Ad Unit-->
<ins class='adsbygoogle' data-ad-client='ca-pub-0000000000000000' data-ad-format='horizontal' data-ad-slot='0000000000' data-full-width-responsive='false' style='display:block;text-align:center'/><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

In mobile generally the size of Sticky Ad is 320×50 and on desktop they are generally 728×90. So make the ad unit of these sizes to make it 100% responsive.

Edit/Disable Anchor Ad Widget

  1. Please go to Blogger Layout
  2. find the widget as in the image below:
    Widget Blogger
  3. click icon to edit the widget
    Blogger Widget HTML
  4. Fill in your ad unit code in the Content section,
  5. or click toggle button on 'Show this widget' to hide the widget.
  6. Click Save and wait a while for the ad to appear

Changing Ad Position

In the default display this ad will appear at the bottom of the screen, you can change it to appear at the top of the screen or in the Header section, to try it please look for the following CSS code:

/* Sticky Ad */ .ancrA{position:fixed;bottom:0;left:0;right:0; ... border-top:1px solid var(--contentL)} .ancrC{ ... border-radius:12px 0 0;border:1px solid var(--contentL);border-bottom:0;border-right:0;position:absolute;right:0;top:-30px;background:inherit}
  • bottom:0; - Change to top:0;
  • border-top - Change to border-bottom
  • border-radius:12px 0 0; - Change to border-radius:0 0 0 12px;
  • border-bottom:0; - Change to border-top:0;
  • top:-30px; - Change to bottom:-30px;

What is Attribute data-ad-format='horizontal'?

It is highly recommended to add or change the attribute of your ad code to data-ad-format='horizontal', its function is to define the general shape of the ad to be a rectangle.

By default every Google Adsense ad code includes data-ad-format='auto' attribute which follows auto-measure behavior for responsive ads. However, you can define a general shape for responsive ad units by changing attribute values to one of the following: rectangle, vertical, horizontal or a combination of these values separated by commas, for example: rectangle, horizontal.

Read the full reference here.

This is all about Adding Sticky Bottom Ads on Blogger. I hope this article is very useful for you and you must have easily added this Sticky Ads Widget to your blog. Please share this article and if you are facing any problem, then tell in the comments, we will reply as soon as possible.

You May Like These Posts:

1 comment

  1. Hey bro can you please share your median ui xml file please
To avoid SPAM comments, all comments will be moderated before being displayed.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.