How to add sticky Footer ad in Blogger ?

In this article, I will show you how you can add a bottom sticky footer Ad to your Blogger website.

Hello Everyone. How are you? Today, In this article I will show you How you can add a bottom sticky footer in your Blogger website. So, If you want to add footer sticky ad on your Blogger website read the full article. 

How to add sticky Footer ad in Blogger ?

Adsense Bottom Sticky ads helps website owner to increase their ad impression and ad click. And overall earning improve. In fact Nowdays many big websites and Newspaper websites using sticky ads on their Website. It helps to increase your CTR as well. As long as you follow AdSense guidance to use sticky ad Your earnings and ad impression will get boost. 

Now let's learn what's sticky ad. And the benefits of using sticky ads. And mainly how to implement one in your Blogger website. 

What is sticky ad?

I think you can guess ad type from it's name. Sticky ads are special type of ads which stick into certain parts of your website. It maybe on your website header, on your Website footer or on sidebar. However you can't use a floating ad like pop ads. Sticky ads has highest ad impression than other ad units. And it attract users much more than other ad does. Much attractive your ad is much click you get. 

In this article I will show you How you can add resposive bottom sticky ad on your Blogger website. It's same as AdSense anchor ad. Like Anchor ad you can easily close the ad by clicking close button. But unlike anchor ads when your users go to another page or refresh the page the ads will appear again. And all the ads are high quality and high CPC display ad.

In this article I will show you a very easy way to add bottom sticky ad on your Blogger website. Make sure other elements of your website is separate from ad unit. You can read the Adsense guidelines to use sticky Ad here.

The guidelines from Adsense to use sticky ads

  • Don't overload your screen with ads and make sure ads cover less screen than your content on your website. Don't use to much ad on your Website and cover viewport. And make sure your content and ads looks different.
  • The ad should never come near to another ad or near the scrool bar. Which will cause disturbance to users.
  • Sticky ads are not allowed to float on screen or follow users cursor. 
  • Ad unit must not overlap content of any other page or post.

Steps to add sticky ads on Blogger

To add bottom sticky ad on your Blogger website follow the steps as below. Before starting the process download backup of your website. Incase if something goes wrong you can fix it.

Step 1: Go to your Blogger Dashboard and click on theme section than select Edit ad HTML.

Step 2: Copy the CSS code below and paste the code just above ]]></b:skin> on your theme and save the theme.

  .sticky-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; } 

.sticky-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); } 

.sticky-ads .sticky-ads-close svg { width: 22px; height: 22px; fill: #000; } .sticky-ads .sticky-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }
  

You can do the same process without searching for ]]></b:skin>. Go to theme section and click on Customise. Now Go to Advance and choose Add CSS. Than paste the code on box and save the theme.

Step 3: Now go to your Adsense account and create a new resposive ad unit. Than copy the data-ad-client and data-ad-slot from the code of ad unit.

Step 4: Now copy the below HTML code and replace data-ad-client and data-ad-slot with the highlighted part. Make sure the numbers are accurate. 

<div class='sticky-ads' id='sticky-ads'>
<div class='sticky-ads-close' onclick='document.getElementById(&quot;sticky-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='sticky-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 5: Now again go to your Theme section and find </body>. Paste the code right above body tag and save the theme. 

You can also do the same process from layout se and. Go to your Layout section and create a new widget from a class which is visible to full website and select HTML/ JavaScript and paste the the code. But for some theme this method may not work. So adding this code above body tag is better option. 

Now your bottom sticky ads is ready and visible on your website. You can easily close ad by clicking on "x" button. If you create a new ad unit than wait for atleast 10 minutes to appear ads on your Website. 

Conclusion 

Bottom sticky ads are very useful to increase your Adsense ad revenue. Here some static data I have prepared to show you-

  • CTR rate is 40-60% higher than other ad unit.
  • High visibility than other placements of same ad units.
  • 30-60% higher CPM than other ad unit. And get much more click than other placements.

I hope your sticky ads visible in your website. If you face any problem while adding bottom sticky ad feel free to ask me on the comment section. I will try my best to answer your questions.

Hi! Zakir Here. I am a Bangladeshi Blogger and content writer. I share Blogging related and WordPress tutorial on This website. I have shared lot's of SEO related content as well.

Post a Comment

Don't upload any spam link and words that harms others in the comment box. Please comment using your Google account or with name and urls. Use anonymous only If you are not signed in.
© ZHS ThemE. All rights reserved. Developed by Jago Desain