Hello friend, you would like to add Responsive Bottom Sticky Ads or Anchor Ads
to your blog. This is the right article for you. Sticky ads give extra revenue
incentives on Adsense ads, then this article will be a help to your blogger
site.
But, Before that, you learn some basic information about Bottom Sticky Ads,
various types of sticky ads on google AdSense guidelines to proceed with this
ad properly.
What is a Sticky Ad?
A Sticky Ads is the Most Common Adsence Ad format. this ad format is used on
many more websites. sticky ads stay visible on permanently your web page and
can not move or scroll on your website content.
this ad format is mostly used by the header section, footer section, and Right
or Left sidebars on the website.
Various types of Sticky Ads
There are two types of sticky ads. it's broadly Divided into Horizontal sticky
ads And Vertical Sticky ads that are using commonly. Horizontal sticky Ads
were mostly used on Header Section And Footer Section on the Webpage. it's
generally Spread from one to Another End in Landscape View.
Google Adsense auto ads provide the Anchor Ads ( Sticky ads ) of a Horizontal
sticky ad on the header or footer section. Vertical Sticky ads are mostly Used
from the Left or Right Sidebar on the Websites. this case of ads was
Permanently Stay on the Sidebar Section Even the user can scroll the web page.
Benefits of using Bottom sticky ads in Blogger
- Boost your Adsense Revenue
- increase Adsense impression
- increase your CTR [Click Through Rate]
- improve your CPM value
Some statistical data here prove this information
Gives 45% to 60% higher CTR compared to normal advertising formats
- Improve ad visibility and user experience
- Give 30% to 70% more CPM
We will also discuss the Adsense guidelines for add Sticky ads on the blogger
website. let’s see how to add Bottom Sticky Ads on the (Footer) bottom of the
website.
Before, you read the article Step By step how to add the bottom sticky ads on
the footer section and make sure to Back your website theme. if get a problem
with this script you easily Restore it on your website. First You Click The
Download Button And Download the Script.
How to add Responsive Floating Bottom Sticky Ads On Blogger Step by Step
Step 1: Open your Blogger Account
Step 2: Open the Theme Section on the Sidebar
Step 3: Click The Edit HTML on the Theme Section
Step 4: Copy the CSS&JS Script on below Section
Step 5: Find ]]></b:skin> section the Html Script and Copy the
CSS script on Downloaded File.
Step 6: Next, just paste the CSS Script above on ]]></b:skin>
Tag or paste it in the additional CSS section of your theme.
.Pixabin { 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-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 .Pixabin-close svg { width: 22px; height: 22px; fill: #000; } .Pixabin .Pixabin-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }
Step 7: Now Open Your Adsense Account and create a responsive display Ad
unit. Now copy the data-ad-client And data-ad-slot code from the display ad
unit Script.
Step 8: Copy the Second HTML Script on Downloaded File and replace the
two codes ca-pub-xxxxxxxxxxx and data-ad-slot=”xxxxxxxxxxx” that you copied
above.
<div class='Pixabin jhfdiuh0' id='Pixabin'>
<div class='Pixabin-close' onclick='document.getElementById("Pixabin").style.display="none"'><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-content'>
<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>
</div>
</div>
One more important thing does not edit any Script only paste your Ad
publisher id And Ad slot id on the Script.
Step 9: Now Paste the Script Above On the </body> Tag.
Step 10: Next Save the Theme.
Now Your Ready Show Bottom Sticky Ads on Your Blogger Website.
Video Guide 👇
Guidelines to add sticky ads
- Sticky Ads cover less than 25% of the web screen at any time.
You can add a vertical maximum of one sticky ad on the viewport.
- You can add a horizontal maximum of one sticky ad on the Page.
You can add a Maximum of one Bottom sticky ads on the boundary of the
content.
Final Words
l hope this Article help to add Responsive bottom Sticky ads Script to your
website. And Please Do Support my blog And Share this Article Thanking You.