How to add Custom Sticky Ad Widget on any Blogger Template

Hello guys, we are back with another interesting article about How to add Custom Sticky Ad Widget on any Blogger Template. Previously we shared How to Remove --> on Custom Blogger Templates.



This Adsense Ad type is very attractive to readers so hence is very much revenue generating. But in Google AdSense, you can't customize it or use it for your own personal/commercial advertisements. So, we decided to come up with an alternative having more features.

But you first need to know some advantages of this Ad widget. Below are the advantages of Custom Sticky Ad Widget.

1: Complete Customizable

One of the main feature of this widget is it's complete customizable. You can adjust colors, heights, widths, etc with some basic knowledge about coding.

2: Multi-Ad Usable

This feature is very interesting as not only you can use AdSense ads but any other ads from any ad network. You also can use your own advertising images too.

3: Pure CSS

No JavaScript is used in it which makes it very lite having no issues with page speed. A pure css code will not effect on your blog's page speed.

Getting Started

Login to Blogger.com and navigate to "Theme". Before getting started, backup your existing template first.
Click the arrow icon near to "CUSTOMIZE"
Click "Edit HTML"
Search for /head and put the following code just before /head

<style>
/* Sticky Ad by vuinsider.com */
.sticky-ad{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-ad .sticky-adClose{width:45px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:0 12px 0 0;position:absolute;left:0;top:-30px;background-color:#fefefe;box-shadow:0 -6px 18px 0 rgba(9,32,76,.08)}
.sticky-ad .sticky-adClose svg{fill:#767676}
.sticky-ad .sticky-adContent{flex-grow:1;overflow:hidden;display:block;position:relative}
.sticky-adInput:checked + .sticky-ad{padding:0;min-height:0}
.sticky-adInput:checked + .sticky-ad .sticky-adContent{display:none}
@media screen and (min-width:800px){
.sticky-ad{display:none}
}
</style>

Now search for /body and put the following code just before /body.

<b:if cond='!data:view.isError'>
<input class='sticky-adInput hidden' id='sticky-adIn' type='checkbox'/>
<div class='sticky-ad' id='sticky-ad'>
<label class='sticky-adClose' for='sticky-adIn'><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></label>
<div class='sticky-adContent'>

<!-- Put you ad script here-->
<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>
<!-- End -->

  </div>
</div>
</b:if>

*Change the highlighted code with your Adsense code if you want to use AdSense ads on it. Otherwise use any ads script you want.

Optional settings

Change data:view.isError to;
- data:view.isPost if you want to display ads only on post page.
- data:view.isSingleItem if you want to display ads on both post page and static page.
- data:view.isHomepage if you want to display ads only on home page.


Save it and you're done. Congratulations, you have successfully created the Sticky Ad Widget on Blogger Template.

Here are Top 3 Ad Networks For Small Publishers that you must try. These ad networks are used by us and are legit.

This is it from VUInsider.com. Just give it a try and tell us about your experience/issues with it by commenting below.

You can also join our WA Group to discuss or ask for something.
https://chat.whatsapp.com/Gw9b1ucgvaeB58TFZd35qB