How to add a floating sticky footer ad to the bottom of a website. Without the aid of a plugin, you may simply set up Floating Sticky Ad if you want to place it in the footer of your website. Friends, this advertising strategy increases ad clicks, which in turn increases your revenue.
You can see how the setup for AdSense Auto advertising is done. Then, automatically, pop-up, floating, sticky, and other types of AdSense advertising appear on your website. These Auto advertising, however, are not fixed.
Automatically show up differently on every page. However, the tutorial we’re going to share is 100 percent accurate, and it will make all of the posts and pages on the entire website display a sticky footer ad in a fixed size at the bottom.
Therefore, this is a Fixed Widget that will display a floating, sticky footer ad at the bottom (after the footer) of all of your post website’s pages.With the aid of CSS and HTML code, I manually added a floating sticky footer ad to my website. which is displayed on the webpage.
Read Also: How to Install Windows using Bootable Pendrive?
Sticky Floating Footer Advertisements will now be added to the post’s footer using HTML and CSS code, making it simple for you to add Sticky ads to your posts. Let’s learn step-by-step how it is used and how it works.
<!-- Footer sticky Ad Starts -->
<div class='Footer-Ads jhfdiuh0' id='Footer-Ads'>
<div class='Footer-Ads-close' onclick='document.getElementById("Footer-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='Footer-Ads-content'>
<center>
Add Ad Code Here
</center>
</div>
</div>
<!-- Footer sticky Ad Ends -->- Log in to your WordPress website first.
- Copy the HTML code shown above.
- You must now visit the Theme File Editor of your WordPress website after copying the code.
- where you may view all of your theme’s source code files.
- Now you must open the footer.php file, navigate to the bottom, and paste the copied code directly above the <body> element.
- After that, you must add your ads code in place of Add ad code here. The next step is to save this file.
In this direction, we have added the HTML code for the website’s floating, sticky footer ad. Next, we will add the CSS code.
CSS code for sticky footer ads to float.To insert Floating Sticky Footer Ad in Website Footer, CSS Code is needed. If CSS Code is not added, the footer sticky ad will not function. Please explain to us how to add CSS.
/* Footer sticky Ad Starts */
.Footer-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; }
.Footer-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); }
.Footer-Ads .Footer-Ads-content { overflow: hidden; display: block; position: relative; height: 100%; width: 100%; margin-right: 10px; margin-left: 10px; }
/* Footer sticky Ad Ends */ - First of all copy the CSS code given below.
- After copying the css code, now you do not have to go to your bed to customize the appearance of its website.
- Paste this copied CSS Code inside the Additional CSS and save it.
You just get the job done. You have installed Ishq’s loading cat in your website. In this way, you can setup your other website by following the same procedure.
If you use Generatpress Theme, then there is an even easier way to apply Footer Sticky Ad of the website, in which you can easily add Sticky Footer ad by adding Element. Let’s know the steps.
- First of all, you have to login to your WordPress website, after that copy the above html code.
- Now go to the Element option in your Appearance where you have to create a New Hook Elements.
- After creating the New Hook Element, paste the Copy html Sticky Footer ad Code. And this Element has to be setup in After Footer
- In Location, if you want to show Entire site i.e. entire site or only in Post, then you can select the post. After which publish this element.
When it comes time to add CSS, the procedure is the same as what we previously described for adding Generatepres Theme Bottom Floating Sticky Ad CSS. You can also add CSS code in a way that is similar.
In this method, you can add a sticky footer to your website. If you have any questions about this article, please leave a comment below.
