Hello Everyone! Welcome Back to TechiFeed. I have written a new informative post for you to read. So, Keep reading to find out more!
But first, you must grasp the fundamentals of sticky ads, the many types of sticky advertisements, and the AdSense team's instructions for effectively implementing such ads.
Responsive Bottom Sticky Ads In Blogger
A sticky ad is a fixed ad that remains shown in the same spot regardless of whether or not the user scrolls through the content. These are commonly seen in the header, footer, left/right bar, and left and right sidebars.
Sticky Ad Formats
Sticky advertising is classified into two types. For example, horizontal and vertical.
Horizontal advertising is often put in the header and footer of a website and is spread from one end to the other in a landscape format.
Anchor advertising in AdSense's "auto ads" section is an example of a horizontal sticky ad.
Vertical sticky advertisements are typically put in a website's sidebar and, in rare situations, outside of the sidebar. These are built to remain in the sidebar even if the user scrolls down the page.
The Advantages of Using Sticky Ads in Blogger
Sticky ads are a terrific strategy to raise your AdSense earnings since they increase your website's overall impression and click-through rate [CTR] and improve your CPM value over time.
Here are some statistics to back up my claim.
- 40-60% CTR is higher when compared to standard display advertisements.
- Enhance Viewability: Up to 200% more visible than other formats in the same places.
- 30-70% Higher CPM: Advertisers pay more for these advertisements.
We will also go through the criteria for placing sticky advertisements in Blogger, but first, let's look at how you may add sticky footer advertising to your website.
Before you begin, back up your theme so that if anything goes wrong, you can quickly restore your website to its last place by uploading the backup file.
How to Make a Responsive Floating Bottom Sticky Ad in Blogger?
Follow the instructions below to add a sticky bottom ad to Blogger.
Step 1: Copy the CSS code below and paste it directly above this ]]>/b: skin> code, or place it in your theme's extra CSS section.
.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; }
Go to the Theme section and select Customization. Now, on the advanced tab, look for the Add CSS area. Now copy and paste the CSS code into your theme and save it.
Step 2: Create a responsive display Ad unit in AdSense.
Paste the data-ad-client and data-ad-slot code from the display ad unit into your code.
Step 3: Replace the two codes you copied above with the HTML code below.
<div class='sticky-ads' id='sticky-ads'>
<div class='sticky-ads-close' onclick='document.getElementById("sticky-ads").style.display="none"'><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 4: Paste the code directly above your theme's /body> tag and save it.
You have now successfully installed Sticky Floating Bottom Ads to your Blogger site.If you can't locate the ]]>/b:skin> code, look for the </style> tag or insert it in between your theme's CSS codes.
How to show sticky ads on mobile devices only?
Sticky advertisements are a terrific method to increase AdSense revenue, but they can hurt the user experience on desktop computers.
So, all you have to do is add an If condition just above & below the supplied HTML code.
<b:if cond='data:blog.isMobileRequest == "true"'> HTML To Show Only in Mobile Devices </b:if>
Blogger Sticky Left & Right Ad Code
Grab the code below and insert the display ad code if you want to show sticky advertising on both the left and right sides of your theme. Now copy and paste the entire code into your theme's sidebar.
<style scoped='' type='text/css'>
.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>
<div class="fixed-leftSd">
<div aria-label="Close Ads" class="close-fixedSd" role="button" tabindex="0" onclick="this.parentElement.style.display="none"">
<b>CLOSE ADS</b>
</div>
<----Enter Ads Code----> Display Ads Responsive Verticle
</div>
<div class="fixed-rightSd">
<div aria-label="Close Ads" class="close-fixedSd" role="button" tabindex="0" onclick="this.parentElement.style.display="none"">
<b>CLOSE ADS</b>
</div>
<----Enter Ads Code----> Display Ads Responsive Verticle
</div>
How to Add Sticky Ads to a Website?
- At no point should less than 30% of the screen be covered.
- Each viewport has one vertical sticky.
- Each page has one horizontal sticky.
- No cursor-associated motions (sticky ad must stay stationary) (sticky ad must remain immobile)
- There is enough whitespace/border between the ad and the text to separate it from the content.
Sticky advertising, according to Google, should not be used on gaming sites or pages with an infinite scroll to create a better user experience.
Frequently Asked Questions
What is a responsive bottom sticky ad in Blogger?
A responsive bottom sticky ad in Blogger is a type that stays fixed at the bottom of the screen as the user scrolls through the website. It is designed to be responsive, meaning that it will adjust its size and layout to fit the screen of any device.
How do I add a responsive bottom sticky ad to my Blogger website?
To add a responsive bottom sticky ad to your Blogger website, you will need to add some code to your website's template. You can find instructions and code snippets online to guide you through this process. It's recommended to have some knowledge of HTML and CSS to implement it.
Will a responsive bottom sticky ad affect the performance of my website?
Adding a responsive bottom sticky ad to your website may impact its performance, depending on the size and complexity of the ad. However, it should be minimal if the ad is optimized for fast loading.
Can I customize the appearance of my responsive bottom sticky ad?
Yes, you can customize the appearance of your responsive bottom sticky ad by editing the CSS style. You can change the ad's colors, font, and layout to match your website's design.
What are the best ad networks for responsive bottom sticky ads in Blogger?
Some popular ad networks that support responsive bottom sticky ads in Blogger include Google AdSense, Media.net, and Infolinks. You can also check out other ad networks that support sticky ads and test which one works best for your website.
Are there any guidelines I should follow when using responsive bottom sticky ads on my Blogger website?
Yes, it's recommended to follow the ad network's terms of service and guidelines when using responsive bottom sticky ads on your Blogger website. Additionally, ensure the ad does not obstruct any critical content of your website and does not affect your website's performance.
Stay Connected
I hope you liked the above informative content. Please share this post and follow our blog for more great content.
If you have any questions or problems, feel free to ask in the comments section.
© Copyright: TechiFeed
