Create Floating Sticky Ad In WordPress, Blogger, With Plugins And HTML CSS (Without Plugin)

Create Floating Sticky Ad In WordPress, Blogger, With Plugins And HTML CSS (Without Plugin)

Hey guys, I know you want to insert a floating Sticky bottom Advertisement on your website. Maybe if you have built your website in Blogger or WordPress or any other CMS these plugins and methods work with anything. I have given you tech tips, HTML, CSS Codes, Templates, WordPress Plugins through which you can create a floating sticky bottom Ad so easily.

How to make a sticky banner bottom floating Ad in your WordPress or Blogger website? Here are some plugins, codes though you can create floating Ad. So let's get started.

How To Create Sticky Bottom Ad In Blogger Website

This is how you can make a sticky bottom Ad in your Blogger website:

  1. First of all login to your Blogger Dashboard
  2. Open Your Template’s HTML Editor
  3. Press Ctrl+F and search for </style>
  4. Then simply copy the below code and paste just before </style>
  5. Save the Template.

@media only screen and (min-width: 310px) and (max-width:500px) {
#adBottom {
left:0;
position: fixed;
text-align:center;
bottom: 0px;
width:100%;
z-index:999;
}
}

6. Now Go back to Blogger Layout

  • Add new Gadget
  • Select HTML/Javascript Gadget
  • Now Copy Below Code and Paste it there.

<div id="adBottom">
Your Ads Code Here
</div>

7. Now go to your AdSense and Create a new Ad unite

  • Select fixed size
  • and enter the size 340×100
  • Now copy the ad code and replace it with “Your Ads Code Here“
  • Save the Gadget.
Related Story
How to Add Apple Touch Icon For Blogger Website?

Done! That’s It. Now you have created a Sticky Ad in a Blogger website.

Now let's talk about how you can do it in WordPress with plugins.

WordPress Plugins For Sticky Bottom Floating Banner Advertisement

Here are some WordPress plugins which are free to use, don't need to purchase from anywhere, and can create what you have wished for, is make a sticky banner bottom Ad in your webiste.

Here is a great Plugin Called "Adace". You can download and use it for free from Here. This plugin will not available in the WordPress Plugin section. Don't worry it is one hundred percent safe to download. Click Here to download Adace WordPress Plugin free.

With Adace, you can not only create a "Sticky Ad" for Adsense, ADX, or any other 3rd party Advertising networks ad unit codes in various positions but also create Link Ads and Coupon Ads with this small size plugin. You can create a very amazing sliding-up animation for floating bottom advertisement which works with both, your main website and AMP site.

Related Story
Top 10 Tips and Tricks For Android App Developers

Similarly, You can also download one more Plugin which works great and used by many WordPress website owners, that is Floating Ads Bottom. Just install it for free from the WordPress Plugin library or download it from here. It works 100% legitly. The Ads works for both Desktop and mobile users. This plugin doesn't support for AMP.

In AMP, if you want to place a sticky banner Ad, you can use, Advanced Ads For AMP And WP WordPress Plugin which is available for free in the WP Plugin library. You can also use the pro version of Ad Inserter which also supports various featured formats to display Advertisements.

Create Floating Banner Ad With HTML And CSS Code (Without Plugin)

This is how you can make sticky banner Ad with the help of HTML and CSS code. Simply copy and paste these codes in your WordPress Theme place and let it work as you want without installing any heavy Plugins.

First, You need to copy this CSS Code (written below) and paste it into the "Additional CSS" section of Appearance>Customize.

CSS CODE:

.NR-Ads { position: fixed; bottom: 0px; left: 0; width: 100%; min-height: 70px; max-height: 90px; padding: 5px 5px; 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; }
.NR-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); }
.NR-Ads .NR-Ads-close svg { width: 22px; height: 22px; fill: #000; }
.NR-Ads .NR-Ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }

Now you have to copy this HTML code and paste it into the Footer file located in "Theme Editor", just before closing the body tag </body>.

HTML CODE:

<div class='NR-Ads jhfdiuh0' id='NR-Ads'> <div class='NR-Ads-close' onclick='document.getElementById(&quot;NR-Ads&quot;).style.display=&quot;none&quot;'><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='NR-Ads-content'> <center> Your Ads Code Here.... </center> </div> </div>

Don't forget to past your Adsense, ADX or any other advertisement code in the HTML Code " Your Ads Code Here... ". You can use Adsense, Google Ad Manager (GAM) code, Media.net or any other Ad codes.

Related Story
Wordpress Error 500 Due to Cplugin, Mplugin.php Malware: How To Remove Completely From Server

I guess, I have given you much information about how to easily create a sticky bottom Ad on your website, on Blogger or WordPress, anywhere.


See more Tips and tricks, news updates in Blogging. Feel free to join us on TwitterInstagramReddit, and Google News.

This is Piyush Chittora (Shanky). Owner of this site. Happy Blogging!!!