|
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.
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
- Please go to Blogger Layout
- find the widget as in the image below:
- click
icon to edit the widget
- Fill in your ad unit code in the Content section,
- or click toggle button on 'Show this widget' to hide the widget.
- 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-bottomborder-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.