How to add sticky footer ad in blogger | Increase Adsense Earning in 2021

how to add sticky footer ad in blogger, how to increase adsense earning in 2021, uinquetech.xyz

You have seen many website has sticky ads in the footer. This type of ads generate good income as it is at the footer and when scrolling it is clicked.

You can easily place this type of add in WordPress with the help any ad inserting plugin. But what about blogger. You have searched everywhere how to add sticky footer ads in blogger.

You can only add sticky footer ads in blogger with the help on coding.

Don't worry. I will provide you the code and also the method to use the code and increase your adsense earning.

{tocify} $title={Table of Contents}

What is Sticky Footer Ads?

If you don't know what is sticky footer ad then tell you that it is ad that is placed at the footer of the website, but it is sticky i.e., it does not move when you scroll up and down.

It is proved that in comparison to the header sticky ads, footer sticky ads generates more income. This is because it is at the footer and when a user reads an article and scrolls down it is clicked either by mistake or willfully.

How to place sticky footer ads?

You can easily add this to blogger website by just adding a few lines of CSS code. The codes are provided below.

STEP 1:- Open Blogger and Go to Themes

Open your blogger dashboard and go to the 'Themes' at the left hand site of the interface.

blogger dashboard, uinquetech.xyz

STEP 2:- Go to Customize Option

Click on the 'customize' button to add the below given CSS code in your theme.

theme section in blogger, uinquetech.xyz

STEP 3:- Go to Advanced and add CSS

Go to the advanced option and then click on the drop-down menu and then select 'add CSS'.

advanced option in blogger theme customize section, uinquetech.xyz

STEP 4:- Paste the CSS code and Save

Now copy the below given CSS code and paste it in the 'Add custom CSS' field and save it.

how to add custom CSS code in blogger template.,uinquetech.xyz

CSS Code:-

@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;
}
} {codeBox}


STEP 5:- Go To Layout and add a widget

Now go to the Layout section and add a 'HTML/JavaScript' widget. Paste the below code in in the content area and save it.

how to add widgets in blogger in 2021, uinquetech.xyz

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

 

Note: Create a add unit in adsense and replace 'Your Ads Code Here' with your adsense ad code.{alertSuccess}


Now, go to your website you will see that the ad is there. Please note that this ad will only be seen in mobile devices. On Desktop this add wil go to that place where you have placed it.


Such as If you have placed the ad code in the sidebar then you will see this add in the sidebar in desktop/desktop mode.


Conclusion

I hope I was able to make you understand. If you want to contact me then please visit the contact us page. If you have any suggestion or query you may comment below.

Tags For This Post:
how to add sticky footer ads in bloggerhow to increase the adsense earningshow to earn money online
best way to earn money online, best online earning platform
Aniket Kumar Singh

Aniket Kumar Singh, the founder and author of this blog, is a student of class 11th from Science stream - PCM Who lives in Muzaffarpur, Bihar, India.

Please Don't Spam

Post a Comment (0)
Previous Post Next Post