How to Create Sticky ads: Click the Create New Optine button to create the sticky footer. Enter a title and select the website you want to make. If you do not find your website in the list, click the Add New Website link.
Your first option is to use the head, footer, and post injector plugins, which we used earlier to add the code to link your site to Google Adsense. If you do not have the plugin installed, install and enable it under Settings > Headers and Footers. However, if you do not want to use a plugin to manage the entire ad process, and you do not want to be able to edit the code in your theme, you can also use another plugin to insert code into the header and footer of your page (in this case, it is the header).
The Head and Footer Code Manager plugin is a free and valuable tool to add custom code to the footer of your website. After installing and activating the plugin, create a snippet and insert your desired code into the code field. The Head & Footer Post Injection plugin allows you to copy the code from the settings screen and paste it automatically into your website.
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 2021 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><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, 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.