How to Create Sticky Footer Ads for Blogger & WordPress 2024

Hello bloggers Welcome to technicgyan! Are you creating engaging content and building up a loyal following, yet your ad revenue seems stagnant? Allow me to introduce an effective tool for increasing ad performance: sticky footer ads.

Footer ads cling firmly to your screen no matter where your reader scrolls – like those pesky tunes that get stuck in your head, such as Baby Shark – drawing readers in with advertisements for gadgets they may never have known they needed until now! Are you Curious? Buckle up; we are diving headlong into this exciting area for both Blogger and WordPress sites.

How to Create Sticky Footer Ads for Blogger & WordPress

Create New Optine button to build sticky footer. Enter title and website; if necessary click Add New Website link if it does not appear in list.

Your first option for adding code that links your site with Google Adsense is using one or more of the head, footer and post injector plugins we discussed previously; install and activate them under Settings > Headers and Footers if it hasn’t already. However, if you prefer not using such an approach and instead editing code directly within your theme directly yourself then another plugin that inserts code directly into header or footer of pages (in this instance header only) would work instead.

The Head and Footer Code Manager plugin is an invaluable free and valuable tool that enables users to add custom code into the footer of any website. After installing and activating it, simply create a snippet with desired code from within WordPress itself to enter directly into its code field. With Head and Footer Post Injection’s advanced settings feature you can even automatically copy/paste into your site!

How to Create Sticky?

Adhesive ads are fixed ads that remain visible at exactly the same position as the user scrolls through the content. A sticky display is generally used in the header, footer, left, right and left / right sidebar.

Types of Sticky Ads

Advertising can be divided into two categories. Vertical adhesive advertising is designed to stick to the sidebar of a web page even as the user scrolls down the page. Horizontal ads are placed in the header and footer of the website and distributed from one end to the other. The anchor ads we receive in the AdSense automatic ads section are an example of horizontal sticky ads. Vertical sticky ads can also be placed in a sidebar on a web page (in this case in the sidebar itself).

Benefits Of Using Sticky Ads In Blogger

Before proceeding with the steps below, make sure you backup your topic so that if something is wrong, you can simply return your site to its original location by uploading the backup file. Adhesive 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.

Readme: Bigrock Review 2024 Biggest Indian Hosting Platform

How to create Responsive Floating Bottom Sticky Ad in Blogger 

To add a bottom sticky ad on Blogger follow the below steps.

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.

Copy the Below CSS code (Very Important)

.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; }

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. 

  • Now Go to Adsense and create a responsive display Ad unit. 
  • Now copy the data-ad-client & data-ad-slot code from the display ad unit. 
  • Copy the below HTML code and replace the two codes that you copied above. 

HTML code for Sticky footer ad

<div class="wp-block-codemirror-blocks-code-block code-block"><pre>&lt;div class='NR-Ads jhfdiuh0' id='NR-Ads'&gt;
&lt;div class='NR-Ads-close' onclick='document.getElementById(&amp;quot;NR-Ads&amp;quot;).style.display=&amp;quot;none&amp;quot;'&gt;&lt;svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'&gt;&lt;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'/&gt;&lt;/svg&gt;&lt;/div&gt;
 
&lt;div class='NR-Ads-content'&gt;
&lt;center&gt;
&lt;ins class=&quot;adsbygoogle&quot;
     style=&quot;display:inline-block;height:70px;width:100%;line-height:70px;&quot;
     data-ad-client=&quot;ca-pub-xxxxxxxxxxx&quot;
     data-ad-slot=&quot;xxxxxxxxxxx&quot;&gt;&lt;/ins&gt;&lt;script&gt;
     (adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;&lt;/center&gt;
&lt;/div&gt;
&lt;/div&gt;</pre></div>
  • Now paste the code just above the </body> tag of your theme & save it. 
  • Now you have successfully added the Sticky Floating Bottom Ads To Blogger Site.

How to create Responsive Floating Bottom Sticky Ad in WordPress

How to Create Sticky ads, Ever been to a website and watched a sidebar component that followed you while scrolling? These are tacky floating widgets, and they enhance click-through prices and conversions. The best part is it’s not hard to bring a sticky sidebar floating device in WordPress. You do not have to understand any coding, and you can implement it at the moment.

In this tutorial, I will share with you a simple means to bring a WordPress tacky widget. In mere minutes, it is possible to add more flexibility to your site.

  • First Download This Plugin it is Very Important Plugin Easy To add Sticky Footer ads.
  • Install Ace ads Plugin & Activated.
  • First Create New ads Unit
  • First Go to the Setting and Select You Ads…
  • Done.

Readme: Hostinger Reviews In India & USA Cheapest Price

Saurabh Vishwakarama is Founder & CEO of Techncigyan.com & Publisher with an Entrepreneur. He is Also a Student & Full Time Passionate Blogger.

Leave a Comment