How to add Custom Sticky Widget on any Blogger Template

  • Join us to download any resource for free. You will be able to download or guest post.
    Sign Up Now

kashif

Administrator
Staff member
VIP Member
Apr 12, 2022
18,041
1,815
113
Pakistan
www.vuinsider.com
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.

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.
 

Similar threads

March 2024

Total amount
$38.00
Goal
$250.00
Donation ends:

Staff online

Members online

Forum statistics

Threads
9,024
Messages
22,620
Members
51,442
Latest member
Ромка

About us

  • Our community has been around from 2017 and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. Providing Free Resources to help newcomers/startups. We are working every day to make sure our community is one of the best.

Quick Navigation

User Menu