Home
Blogger Guide
Coding Guide

New Advance Bottom Sticky Ad Script for blogger and WordPress

Hi Dude, Welcome to our Pixabin, let see the one interesting topic "New Advance Bottom Sticky Ad Script for blogger and WordPress" in this blog article. Every blogger's dream is to get more revenue from blogger. this is the best way to increase your blog Revenue. if you want to add this sticky add to your Website Please follow the below steps and add the sticky ad to your website

What is a sticky Ad?

A sticky ad is the type of ad that floats on your website. These ads Your web page will be static. This is a popular type of advertising. There are many types of this. You can monetize your website with this sticky ad.

What are Responsive Bottom Sticky Ads?

Bottom Sticky ads are affixed to the bottom of your website. These bottom sticky ads are a great way to increase your website's ad revenue.

How does it be Works?

These bottom sticky ads will appear at the bottom of your website but the bottom sticky ad script we provided in this post will not work as a normal bottom sticky ad. 

The bottom sticky ads will automatically disappear when the user moves to the bottom page. The bottom sticky ads will automatically move up and display the ad when you move up.

More Info For Sticky Ads

  • This is Responsive for PC, Mobile, And Tablets
  • Sticky ads are also Called Anchor Ads
  • Sticky ads Give Highest Revenue
  • Increase Ad viewing Experience 

Various Types of Sticky Ads

There are many types of sticky Ads at this time. but all sticky ads do not Give a Good User Experience.
  • Bottom Sticky Ads
  • Header Sticky Ads
  • Sidebar Floating Sticky Ads
  • Sidebar Sticky Ads
  • And Etc

Pros and Cons for Sticky Ads

Pros

  • Increase your Adsense Ads Views and Visibility
  • Get higher advertisement Revenue
  • user can be close these Sticky Bottom Ads
  • This sticky bottom Ad is highly Customisable

Cons

  • Some users do not like sticky Ads
  • Not all Advertisement Platforms Allow Sticky Ads
  • This ads type block your Websites Loading Time

If you face any problem with this Script. please hit the download button and download the Source file on the device

Download Now Download

How to Setup these Bottom Sticky Ads on Blogger

  • Step 1: Open your Blogger Dashboard
  • Step 2: Go to Theme Section and Click  Drop Down Menu
  • Step 3: Click the "Edit HTML" Option on Theme Dashboard
  • Step 4: Click CTRL+F and Find </body> Tag on Theme HTML Section
  • Step 5: Copy the below Script and Paste Above on <./body> Tag.
  • Step 6: Change absence pub id and AD slot Number on this Script
<!-- Bottom Sticky Ad Script For Blogger - Pixabin.com-->
<div class='Pixabin-ads jhfdiuh0' id='Pixabin-ads'>
<div class='Pixabin-ads-close' onclick='document.getElementById(&quot;Pixabin-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='Pixabin-ads-content'>
<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxx' data-ad-slot='' style='display:inline-block;height:70px;width:100%;line-height:70px;'/><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
  </div>
<script>
var prevScrollpos=window.pageYOffset;function hidenotice(){var currentScrollPos=window.pageYOffset;if(prevScrollpos>currentScrollPos){document.getElementById("Pixabin-ads").style.bottom="0"}else{document.getElementById("Pixabin-ads").style.bottom="-50px"}
prevScrollpos=currentScrollPos}window.onscroll = function() {
    hidenotice()
};
</script>


  • Step 7: Next, again click Ctrl+F and Find <b:skin> tag.
  • Step 8: Copy the below CSS Script and Paste above on <b:skin> Tag.
  • Step 9: Next, Save the Template

/* Buttom Sticky Ad - Pixabin.com */

.Pixabin-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; } 
.Pixabin-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); } 
.Pixabin-ads .Pixabin-ads-close svg { width: 22px; height: 22px; fill: #000; } 
.Pixabin-ads .Pixabin-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }

  • Step 10: Now Your Bottom Sticky Ad is Ready to Show.

Video Guide For Blogger 👇

How to add this Bottom Sticky ad on WordPress?

  • Step 1: Open your WordPress Admin Dashboard
  • Step 2: Next, go to the plugin section and install the Tag Manager Plugin
  • Step 3: Open plugin Dashboard and Copy Below the CSS Script First
  • Step 4: Paste the script on <body> Section on Plugin Dashboard 

<style> /* Buttom Sticky Ad - Pixabin.com */
.Pixabin-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; } 
.Pixabin-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); } 
.Pixabin-ads .Pixabin-ads-close svg { width: 22px; height: 22px; fill: #000; } 
.Pixabin-ads .Pixabin-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }<style>

  • Step 5: Next Copy the Sticky Html Script  and Paste Directly on </body> Section  on Plugin Section
  • Step 6: Save the Change
  • Step 7: Done

Final Words

We hope this Bottom Sticky ad help with your blog designing. if you want to more information like this Article. Please Support my Pixabin Blog.

Post a Comment