How to add Sticky ad bar in Blogger? Working Method

Dhrobo

16 Mar, 2022

Blog posts have a great life span with the ability to acquire a wide range of readers. Getting them to stay on your blog for a while can be difficult, but with the help of the sticky bottom ad bar in blogger, you can increase the number of visitors to your blog to get more readers and increase brand awareness. This blog will show you how to add the sticky bottom ad bar to your blog.

What is a sticky Ad?

A sticky Ad is a type of ad bar that sticks to the top of your blog. It's displayed at the top of your blog post and is visible for a certain amount of time before it disappears.

To add a sticky bottom ad bar in Blogger, you need to sign-up to become a member of the code-sharing website, Github. Github provides a Sticky Bar Generator that you can use to create a sticky bottom ad bar in Blogger.

Types of Sticky Ads

Sticky Ads are separated into two categories. Horizontal and vertical, for example. Horizontal advertising is frequently seen in the title and footer of a website, and they are normally laid out in a landscape format from one end to the other.

Anchor ads, which may be seen in AdSense's "Auto Ads" area, are an example of horizontal sticky ads.

Vertical sticky adverts are commonly seen in the sidebar of a website, but they can also be found outside of it. These are created in such a way that they remain in the sidebar even if the user scrolls the page.

How to add Sticky ad bar in Blogger? Working Method

Benefits of using sticky ads in Blogger

Sticky ads are the perfect way to get more clicks to your blog posts. Bloggers can easily place sticky ads on the sidebar of their blog. When a user scrolls down, the ad will stay at the bottom of the sidebar and will scroll with them. This will also allow the ad to show on top of the regular blog post. Sticky ads are a great opportunity for bloggers to make a little bit of extra money on their blogs.

How to create Responsive Floating Bottom Sticky Ad in Blogger

Method 1

Add Bottom Sticky Ads Code in Blogger via Widget

Go to your Blogger dashboard.

Go to the Layout Page

Create a New JavaScript Widget

Paste the entire code from below

That's all there is to it - now save and check your post.

Method 2

Copy and paste the CSS code below right above this ]]></b:skin> code or copy it and paste it into the extra CSS section of your theme

Copy the CSS code. Then go to the Theme section and click on customization. Now in the advanced tab search for Add CSS section. Now paste the CSS code and save your 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; }

Now Create a responsive display Ad unit in Adsense.

From the display ad unit, copy the data-ad-client and data-ad-slot code.
Replace the two codes you copied above with the HTML code.
Paste the code directly above your theme's /body> tag and save it.
Congratulations on adding the Sticky Floating Bottom Ads to your Blogger site.

Alternative Ad Networks

If you use an alternative ad network other than AdSense such as a-ads, adsterra then follow the steps below.

Sticky Footer Ad Code :

$(document).ready(function() {$('img#closed').click(function(){$('#bl_banner').hide(90);});});

</script>

<div>

<----Enter Ads Code---->

</div>

Sticky Left & Right Ad Code For Blogger :

.fixed-leftSd,.fixed-rightSd{position:fixed;top:60px;width:160px;height:600px;z-index:9999;transform:translateZ(0)}

.fixed-leftSd{left:0}

.fixed-rightSd{right:0}

.close-fixedSd{position:absolute;width:160px;height:15px;line-height:15px;font-size:11px;font-weight:400;top:-15px;left:0;text-align:center;background:#e0e0e0;color:#666;padding:5px 0;cursor:pointer}

@media screen and (max-width:800px){.fixed-leftSd,.fixed-rightSd{display:none;visibility:hidden;}}

</style>

<b>CLOSE ADS</b>

</div>

<----Enter Ads Code----> Display Ads Responsive Verticle

</div>

<b>CLOSE ADS</b>

</div>

<----Enter Ads Code---->

</div>

Put the first code in the footer of the layout and the second in the sidebar with the html javascript option turned on.

The Disadvantage of Adding Bottom Sticky Ads in Blogger

Adding Sticky Ads to Bloggers has no significant drawbacks. You can also use it on your Wordpress blog to boost your Adsense click-through rate. You will have to deal with the following issues:

It will slow down the website's loading speed

Increase in LCP Score

Are Sticky Ads Safe to use?

Are sticky ads safe to use? Well, the intent of a sticky ad is to be more engaging than a regular ad. Since sticky ads have a higher chance of being seen, they should also have a higher chance of being clicked. When you are looking to make something more engaging, you can use a sticky ad.

They are also a good option for ad campaigns that are targeting a specific set of keywords because they aren't too distracting. However, they are not as effective as other types of ads. That’s because they are not as memorable and people are more likely to skip them. That’s why they are not the best option for advertising.

If you have any questions or problems when adding a sticky ad bar to a blog, please contact our support team. We are always happy to help and would love to hear from you!

How to add Sticky ad bar in Blogger? Working Method

What is a sticky Ad?

Types of Sticky Ads

Benefits of using sticky ads in Blogger