How to

How to Make Sticky Ads on Non-AMP Blogs amp-sticky-ad style

Sticky Ads are Anchor Ads that appear specifically for mobile devices. That usually appear and attach to the edge of the top of the mobile screen.  For Non-Google Amp blog users, we can install sticky ads on blogs by activating Auto Ads or automatic ads that are already equipped with the page-level-ads feature.

Sticky ads for Non-Amp blogs will appear floating at the bottom of the cell phone screen and you can say sticky ads has the same appearance as sticky ads that appear on the Amp blog. And to make sticky ads on blogs that use thisNon-Google-Amp template, CSS and javascript are needed.

Sticky ads for Non-AMP blogs will automatically appear when visitors scroll or scroll a blog page down. Which can be set in javascript. And to close this ad, it is exactly the same as amp-sticky-ad, which has been provided with a close button on the right side of the ad.

 

Sticky ads like amp-sticky-ad, in my opinion, are more elegant when compared to floating ads, besides this sticky ads does not violate the rules of Adsense policy. So it doesn’t hurt if you start using the sticky ad style on the non-amp blog that you use.

To demo sticky ads on the amp-sticky-ad Non-AMP template, you can check below, please click the demo button and scroll inside the widget to see the appearance of the ad.

Creating Sticky Ads on Non-AMP Blogs

Login to Blogger – Template – Edit HTML – Copy the following CSS code and save it before the code </head>

<b: if cond = 'data: blog.pageType not in {& quot; static_page & quot;, & quot; error_page & quot;} and data: blog.isMobileRequest == & quot; true & quot; and not data: blog.searchQuery '> 
<style> 
/ * <! [CDATA [* / 
.sticky-ad { 
display: -webkit-box; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-orient: vertical; 
-webkit-direction-direction: normal; 
-ms-flex-direction: column; 
flex-direction: column; 
-webkit-box-align: center; 
-ms-flex-align: center; 
align-items: center; 
-webkit-box-pack: center; 
-ms-flex-pack: center; 
justify-content: center; 
overflow: visible; 
position: fixed;
text-align: center; 
bottom: -104px; 
left: 0; 
width: 100%; 
z-index: 999; 
max-height: 104px; 
background-image: none; 
background-color: #fff; 
box-shadow: 0 0 5px 0 rgba (0, 0, 0, 0.2); 
margin-bottom: 0; 
padding-top: 4px; 
transition: all .4s ease-in-out; 
} 
.sticky-ad-close-button { 
position: absolute; 
width: 28px; 
height: 28px; 
top: -28px; 
right: 0;
background-image: url ("data: image / svg + xml; charset = utf8,% 3csvg width = '13 'height = '13' viewBox = '341 8 13 13' xmlns = 'http: //www.w3. org / 2000 / svg 'xmlns: xlink =' http: //www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style = 'fill:% 234F4F4F' d = 'M354 9.31L352.69 8l -5.19 5.19L342.31 8 341 9.31.55.1 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z '% 3e% 3c / path% 3e% 3c / g% 3e% 3c / svg % 3e "); 
background-size: 13px 13px; 
background-position: 9px; 
background-color: #fff; 
background-repeat: no-repeat; 
box-shadow: 0 -1px 1px 0 rgba (0, 0, 0, 0.2); 
border: none; 
border-radius: 12px 0 0 0; 
cursor: pointer; 
} 
.sticky-ad-close-button: before { 
position: absolute; 
content: "";
top: -20px; 
right: 0; 
left: -20px; 
bottom: 0; 
} 
* { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
} 
: active,: 
focus { 
outline: 0 
} 
/ *]]> * / 
</ style> 
</ b: if>

Next, please copy the following javascript and save it before the code </body>

<b: if cond = 'data: blog.pageType not in {& quot; static_page & quot;, & quot; error_page & quot;} and data: blog.isMobileRequest == & quot; true & quot; and not data: blog.searchQuery '> 
<div class = "sticky-ad" id = "sticky-ad">

<! - Ad code please save below ->

<button class = "sticky-ad-close-button" onclick = "document.getElementById ('sticky-ad'). style.display = 'none';" aria-label = "Close this ad"> </ button> 
</ div> 

<script> 
// <! [CDATA [ 
window.addEventListener ("scroll", function () { 
var target = document.getElementById ('sticky- ad '); 
if (window.pageYOffset>300) { 
target.style.bottom = "0"; 
} 
}, false); 
//]]> 
</ script> 
</ b: if>

 

  • Please change with Adsense ad code. If the error is in storage, please Parse first.
  • Please use a horizontal ad unit and select 320×50 or 320×100 mobile ads.

Lastly, please save the template settings.

Related Articles

2 Comments

  1. Thanks for ones marvelous posting! I truly enjoyed reading it,
    you happen to be a great author. I will be sure
    to bookmark your blog and will often come back in the future.
    I want to encourage one to continue your great work, have a nice
    holiday weekend!

Leave a Reply

Your email address will not be published. Required fields are marked *

Close