Hello guys, we are back with another interesting article about How to add Custom Sticky Widget on any Blogger Template.
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.
>
Click the arrow icon near "CUSTOMIZE"
>
Click "Edit HTML"
Search for /head and put the following code just before /head
Now search for /body and put the following code just before /body.
*Change the highlighted code with your AdSense code if you want to use AdSense ads on it. Otherwise, use any ads script you want.
Change data:view.isError to;
- data:view.isPost if you want to display ads only on the posting page.
- data:view.isSingleItem if you want to display ads on both the posting page and static page.
- data:view.isHomepage if you want to display ads only on the home page.
Save it and you're done. Congratulations, you have successfully created the Sticky Ad Widget on Blogger Template.
This is from VUInsider.com. Just give it a try and tell us about your experience/issues with it by commenting below.
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 features of this widget is it's completely 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 affect 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 "CUSTOMIZE"
>
Click "Edit HTML"
Search for /head and put the following code just before /head
HTML:
<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.
HTML:
<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 the posting page.
- data:view.isSingleItem if you want to display ads on both the posting page and static page.
- data:view.isHomepage if you want to display ads only on the home page.
Save it and you're done. Congratulations, you have successfully created the Sticky Ad Widget on Blogger Template.
This is from VUInsider.com. Just give it a try and tell us about your experience/issues with it by commenting below.