Friends, in today's post, I am going to tell all of you, how you can apply all footer sticky ads. I will easily tell you both the steps here on my blogger website and on WordPress website, so that you can easily install footer sticky ads on both your platforms, I will tell you all the steps here, step by step.
First friends, I am going to tell you that by applying footer sticky ads, your Adsense earning increases slightly. And you also benefit from this. And if you use it, then you will not remove the footer sticky aids close button. This is because friends, because if you remove it, then our visitors who are there have a lot of problems, so for this you should leave the close button of the footer sticky ads. And friends, you must watch it once, it will definitely increase your earning.
How to Add Footer Sticky Ads on Blogger
Friends, you must know that many people who are footer sticky aids. They say that these footer sticky ads can only be installed on WordPress. And we cannot put it on blogger. But friends, here today I will tell you both the steps that how you can apply footer sticky ads on Blogger and WordPress.
Step 1: - Friends, first of all you have to come to blogger's dashboard and login with your blogger's account.
Step 2:- Now friends, below you will get the option of a Theme section, you have to click on it.
Step 3:- After coming here, friends, you will get the option of customize, and on the friends wheel, you will also get an arrow mark on which you have to click and then you will get the option of edit HTML. And friends you have to click on that.
Step 4:- After the edit HTML is open here, first of all, I have given you an Additiomal CSS code below which you have to copy.
.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: 50px;
position: absolute; right: 0; top: -30px;
background: linear-gradient(to right, #0fcbe9, #0cd32d);
box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08); }
.sticky-ads .sticky-ads-close svg { width: 25px; height: 25px; fill: #fff; } .sticky-ads .sticky-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }
Step 5:- Friends, you have to copy this code with Additional CSS and do CTRL+F tab in your HTML tab and you have to search here in the search bar ]]></b:skin> and just above it you will get Additional CSS Paste the code below.
Now friends, after doing this, I have given you a new code, after adding which your footer sticky ads will start working.
Friends, here I will give you an HTML code, friends, which you have to add above the </body> tag and I will tell you stepwise how to add this code.
Step 1:- Friends, in the HTML tab that you have opened, you have to open the search bar once again by doing CTRL+F tab and there you have to search closing </body> tag.
Step 2:- Friends, now you will find this code in the last part below, if you do not find it, then you can easily search it.
Step 3:- Friends, I have given you an HTML code below and now you have to copy that code here.
<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:- Friends, you have copied the HTML code, then you have to paste that code just above the closing </body> tab and friends here you have to change two codes
Step 5:- First of all friends here you have to give a data-ad-client="ca-pub-xxxxxxxxxxx" ="xxxxxxxxxxx" Here friends you have to give your slot id which you have created ad code and in this you have to follow all the steps correctly.
How to Add Footer Sticky Ads on WordPress
Friends, now I will tell you how you can easily put footer sticky ads on your WordPress website and just here your steps will be some change, but friends, you just have to read the whole post carefully.
Step 1: - Friends, first of all you have to login to your Adsense dashboard and you friends have to create a responsive display ad unit.
Step 2: Friends, now I will give you an HTML code below, in that code you will have to replace two codes, first code friends your data-ad-slot="xxxxxxxxxxx" here you have to give your slot id in it, and now you have to enter data-ad-client="ca-pub-xxxxxxxxxxx" You have to give your Adsense publisher ID.
<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 3:- Friends, you have copied the above code, so now you have to first click on Appearance>Theme>Footer.php file and friends you have to search the closing </body> tag in it.
Step 4:- Friends, you just have to paste the HTML code above it and click on the update file.
Friends, now you have pasted the HTML code and now I will give you an additional CSS code, which you have to copy and paste, I will tell you stepwise.
Step 1:- Friends, you have just pasted a code above the closing </body> tag of Footer.php file, now you have to paste the additional code, now friends, first of all click on Appearance>Customize>Additional CSS And friends, I have given you a code below, you have to copy it.
.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: 50px;
position: absolute; right: 0; top: -30px;
background: linear-gradient(to right, #0fcbe9, #0cd32d);
box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08); }
.sticky-ads .sticky-ads-close svg { width: 25px; height: 25px; fill: #fff; } .sticky-ads .sticky-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }
Step 2:- Friends, you have to copy that code and paste it in Additional CSS, after that click on Save Changes and save it.
Conclusion
Friends, here I have told you friends step by step, how you can apply footer sticky ads, and here I have told for both the platforms, in which both Blogger and WordPress come, if you have any problem, then in the comment box below. Tell us
© Tech Shreyansh
