Hello bloggers, Welcome to technicgyan! Are you creating engaging content and building a loyal following, yet your ad revenue seems stagnant? Allow me to introduce an effective tool for increasing ad performance: sticky footer ads.
Table of Contents
Footer ads cling firmly to your screen no matter where your reader scrolls – like those pesky tunes 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 Blogger and WordPress sites.
Create a New Optine button to build a sticky footer. Enter the title and website; if necessary, click the Add New Website link if it does not appear in the list.
Your first option for adding code that links your site with Google Adsense is using one or more 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 to use such an approach and instead edit code directly within your theme, another plugin inserting code directly into the header or footer of pages (in this instance, header only) would work.
The Head and Footer Code Manager plugin is an invaluable, free, and valuable tool that enables users to add custom code to any website’s footer. After installing and activating it, create a snippet with the desired code from WordPress to enter directly into its code field. With Head and Footer Post Injection’s advanced settings feature, you can automatically copy/paste content into your site!
How to Create Sticky?
Adhesive ads are fixed ads that remain visible at precisely 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 exemplify 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, back up your topic so that if something is wrong, you can return your site to its original location by uploading the backup file. Adhesive ads are:
- A great way to increase your Adsense revenue is to increase your website’s overall impression.
- Click-through rate (CTR).
- CPM value over time.
Statistical data support the points mentioned above. 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 exact 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 CSS code below (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; }
To do that, go to the Theme section and click on Customization. Now, in the advanced tab, search for the 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 HTML code below and replace the two codes you copied above.
HTML code for Sticky footer ad
<div class="wp-block-codemirror-blocks-code-block code-block"><pre><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>
<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></center>
</div>
</div></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: Have you 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 that bringing a sticky sidebar floating device to WordPress is simple. You do not have to understand any coding and can implement it now.
I will share a simple way to create a WordPress tacky widget in this tutorial. In mere minutes, adding more flexibility to your site is possible.
- First, Download This Plugin It is a Very Important Plugin Easy To Add Sticky Footer ads.
- Install Ace ads Plugin & Activated.
- First, Create New ads. Unit
- First, Go to Settings and Select Your Ads…
- Done.
