Add Responsive Bottom Sticky Ads in Blogger

TrickPk 9/20/21  Recently , Updated

Also Read

Hello Guys, Welcome to TrickPk. If you want to add Bottom Sticky Ads in Blogger and want to generate more revenue then this article will be very helpful for you.

Google AdSense also provide this stick ad unit that can be added by enabling Auto-ads on blog. But the disadvantage of Google's default Stick Ad is that sometimes it appears sometimes it doesn't,it also appears in random places in top or bottom.

What are Sticky Ads?

Sticky Ad (Anchor Ad) is a type of overlay ad which stays at the fixed position of a webpage regardless of scrolling. These are generally used in top, bottom, left & right sidebar.

Benefits of Adding Sticky Ads:

Sticky Ads are very helpful to increase the revenue as it increases the impression and CTR, CPM value of your website. Also it increases the viewability of ads which is very helpful to optimize the ad revenue.

View Demo

How to Add Responsive Bottom Sticky Ads in Blogger | Anchor Ads

---

Following are the basic steps to Add Floating Bottom Sticky Ads in your blog. 

Follow the steps given below to add Bottom Sticky Ad in Blogger as are

Step 1. Adding CSS Codes

• Copy the following CSS Codes and paste just above to ]]></b:skin> tag.

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

Step 2. Adding HTML Codes

• Copy the following codes and paste just above to </body> tag.

<div class='TrickPk-ads jhfdiuh0' id='TrickPk-ads'> <div class='TrickPk-ads-close' onclick='document.getElementById(&quot;TrickPk-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='TrickPk-ads-content'> <!--AdSense Ad Unit--> <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>

Step 3. Adding AdSense Codes

Go to your AdSense account and create a new Responsive Display Ad Unit.

Now copy the data-ad-client & data-ad-slot codes from the Display Ad Unit and paste these codes where we have marked places for these.

If you are using AdNetwork other than Google AdSense,then delete the code given below and paste your ad codes in its place.

<!--AdSense Ad Unit-->

<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>

In mobile generally the size of Sticky Ad is 320×50 and on desktop they are generally 728×90.

So make the ad unit of these sizes to make it 100% responsive.

If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button.

This is all about Adding Sticky Bottom Ads in Blogger. I hope this article is very useful for you and you must have easily added this Sticky Ads Widget to your blog. Please share this article and if you are facing any problem, then tell in the comments, we will reply as soon as possible.

Copyright © TrickPk