Add Sticky Floating Bottom Ads | Sticky Footer Ads in Blogger
Hello Guys, Do you want to know How to add Responsive Bottom Sticky Ads in Blogger site | Floating bottom ads in Blogger code. I will tell you the easy way. With the help of which you can add sticky floating bottom ads to your website or blog. This article will be useful for you in that you can add sticky ads to your Blogger website and increase revenue in Adsense.
Add Sticky Floating Bottom Ads | Sticky Footer Ads in Blogger |
Before directly adding this to your website first we must know its advantages and some disadvantages. So let us understand the basics of what is sticky ads, different types of sticky ads, and what are the guidelines given by the Adsense team for proper implementation of these ads.
More Script: Color Picker script for bloggers
What is a bottom sticky Ad?
A sticky ad is a fixed ad that stays visible in the exact same position regardless of the user scrolling through the content. Basically, it is generally used at different positions of website like header, footer, left/right bar, left & right sidebar. But If you don't follow AdSense guidelines and add many ads anywhere on our website then it may cause problems to our account.
So In this guide, we will be adding fixed bottom ads to the blogger website or you can also use them on any website.
Floating bottom ads Is it safe to use?
A very important question for you that Is it safe? before doing anything with your google ads we must learn some basics of it. Many bloggers think that if they will add Adsense code in the popup box Adsense will cancel their account at the same time after verification. And whoever is thinking this is absolutely correct.
But our floating fixed ads widget is different and you can use Adsense ads in this box we still say we are not liable for your account suspension if you add this box and your account will get suspended in any way [ Just for safety ]. If you add Adsense ads or any other ads and box position is fixed then there is no problem in installing blogger footer fixed responsive ads box inside blogger template. After embedding the ads box you can double your revenue from your website.
Many News and professional websites are also using it so there is no issue to use on our website.
More Script: RGB Color Guessing Game Script
Benefits of using bottom sticky ads or floating bottom ads in Blogger
Adhesive(Fixed) ads are a great way to increase your Adsense revenue as they increase the overall impression, click-through rate (CTR) of your website and increase your CPM value over time.
Statistical data support the above-mentioned points. Before we discuss the guidelines for placing sticky ads in bloggers, let us understand why you should add sticky footers to your site. Up to 200% more visible than other formats with the same placement.
Here are some statistical data that proves the above point.
- 40-60 % Higher CTR: compared to normal display ads
- Improve Viewability: Up to 200% more viewable than other formats on the same placements.
- 30-70% Higher CPM: Advertisers shell out more for these ads.
Also now let us know What you Consider Before Implementation floating bottom ads or footer sticky ads?
- If you have a gaming blog, then don’t use it.
- Don’t use it on infinite post loading
- Your sticky footer Adsense, should not cover more than 30% of your computer, tablet, and mobile screen.
According to Google sticky ads shouldn’t be implemented on Gaming sites and pages with infinite scroll to provide a better user experience.
Also, Check- Gradient Color Code Generator Script
How to create Responsive Floating Bottom Sticky Ad in Blogger
Before proceeding with the below steps make sure to take a backup of your theme, so that if you do anything wrong, you can easily restore your website to its original position by uploading the backup file.
To add a bottom sticky ad on Blogger follows the below steps.
There are two simple methods to add to your website, so first, try the below method if this does not work on your website then try the second method.
Method 1: Add Bottom Sticky Ads Code in Blogger via Widget
STEPS:
1. Open Blogger Dashboard
2. Open Layout Page
3. Add New JavaScript Widget - Watch Complete video
4. Copy complete code from below and paste - Watch Complete Video
5. That's it - Save and Check your Post Now
NOTE: If this method not working on your website then follow the second method
Method 2: Add Responsive sticky ads in Blogger via Template edit
Step-1: Copy the below CSS code and paste it just above this ]]></b:skin> code or paste it in the additional CSS section of your theme. For that 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.
2. In simple words Add below CSS in your website template.
3. Now Go to Adsense and create a responsive display Ad unit.
4. Now copy the data-ad-client & data-ad-slot code from the display ad unit.
5. Copy the below HTML code and replace the two codes that you copied above.
6. Now paste the code just above the </body> tag of your theme & save it.
7. Great now successfully added the Sticky Floating Bottom Ads To Blogger Site.
Copy below the complete code block and replace your ad with an Adsense responsive ad of a suitable size.
<style>
.Arpian-ads {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
min-height: 70px;
max-height: 90px; /* modify as per your website design*/
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;
}
.Arpian-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);
}
.Arpian-ads .Arpian-ads-close svg {
width: 22px;
height: 22px;
fill: #000;
}
.Arpian-ads .Arpian-ads-content {
overflow: hidden;
display: block;
position: relative;
text-align:center;
height: 70px;
width: 100%;
margin-right: 10px;
margin-left: 10px;
}
</style>
<div class='Arpian-ads' id='Arpian-ads'>
<div class='Arpian-ads-close' onclick='document.getElementById("Arpian-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='Arpian-ads-content'> Place your Ad Code </div>
</div>
Useful script for blogger:
Automatically Add Related Articles in the Middle of the Post
Advanced HTML Sitemap Page on the Blogger website
Responsive Bottom Sticky Ads or Footer Ads on WordPress
WordPress has a lot of options to implement the sticky footer Adsense code. You can use the Ad Inserter plugin to show the sticky ad inside the article or put the code inside a “Custom HTML” widget to show it all over the site.
- First of all login to your WordPress Dashboard.
- Go to Appearance → Widgets → Custom HTML and add it to the sidebar.
- Now, put the above code and save it.
- That’s it.
If you have any caching plugins, then don't forget to clear the cache, in order to show the Sticky Adsense on your blog.
For a complete demo of the script with a proper installation and usage guide please watch the complete video.
Responsive Bottom Footer Ads Blogger Script
In Conclusion of Add Sticky Floating Bottom Ads | Sticky Footer Ads in Blogger
I hope this guide will help you add a responsive floating bottom Sticky Ad to the Blogger website. If you like this guide then don’t forget to share this with your friends and join our Telegram channel for more updates.
I have tried to be as informative as to provide all these scripts. Use any of the above-mentioned scripts and If you face any problems or have any suggestions. Let me know them in the comments section.
Well, that’s it in this post, will see you again with a new and useful script for the blogger platform. I hope you like this script and share it with your friends. Thanks for visiting.
Also, Check Interested Amazing another Script:
meme creator generator tool script
Love Calculator Prank Website Php Script
Voice to Text Note Maker website Script
8 comments
Click here for commentsI tried to implement this code but the problem is ad is covering half of the screen..can you please help me?
Replyhi @prithi
Reply1. Try to use small size ads [ small height banner ads]
2. Modify max-height of class Arpian-ads ex.
.Arpian-ads{
max-height: 70px; /* 70px will be good to go but modify height as per your need*/
}
Thanks for comment I will also modify in actual code so thanks for this. And hope you like our website content so please subscribe to our youtube channel and watch other useful scripts.
Thanks
worked perfectly for me. Thank you.
ReplyFYI: I implemented the code into HTML box in Layout instead of add css
hi, Thanks for your valuable comment.
ReplyYou can find many more useful scripts related to blogger website like defer google analytics or tag manager, increase your blog speed, useful scripts, tool websites script, and many more.
Thanks for visiting. Also Check our YouTube Channel for more information and all demo and steps.
How can i use this code in mobile version . Footer not showing in mobile
Replyhello Junaid,
ReplyThanks for your comment.
You can try again by watching mentioned video. And If still facing issue. you can contact use visit contact us page for more.
try transparant background wiht ad
ReplyThis is great, only problem I have it that the close button is not working ?
ReplyConversionConversion EmoticonEmoticon