Hello Everyone, in this post I will share how to add sticky ads at the bottom of the blog. One of the most widely used marketing media to promote products and services is the Internet. With the various surveys conducted, internet users are projected to increase year on year.
High usage rates certainly have a positive effect on advertisers and publishers. Content creators can easily make money from everything they do, be it writing or videos.
Meanwhile, for business actors, high access to the Internet can be an attractive area to reach more potential customers. Well, one of the places that often displays ads for products and services is blog pages. Yes, blogs are indeed a solid medium for advertisers to promote their products.
Looking back as a blogger, definitely advertising has become a very important thing. Advertising is a method that is often used to increase revenue. One of them is the type and location of ads. It is important for you to optimize the ads on your blog to generate income. Keeping all these things in mind, in today's post, I will share how to add bottom sticky ads in blogger.
How to Add Bottom Sticky Ads in Blogger :-
Step 1 :- Go to Your AdSense Account.
Step 2 :- After Click on Ads Section.
Step 3 :- Then Select Display ads and Create New 728×90 Ads Unit.
Step 4 :- Then Login & Open Your Blogger Account.
Step 5 :- Now Click on Theme Menu.
Step 6 :- After Click on Edit Html.
Step 7 :- Then Paste The Given Css Code Above The </head> Tag.
<style type="text/css">
.bottom-sticky-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;}
.sticky-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);}
.bottom-sticky-ads .sticky-ads-close svg{width:24px;height:24px;fill:#000;}
.bottom-sticky-ads .sticky-ads-content{overflow:hidden;display:block;position:relative;height:70px;width:100%;margin-right:10px;margin-left:10px;}
</style>
Step 8 :- Then Copy The Given Code and Put it Above The </body>.
<div class='bottom-sticky-ads' id='bottom-sticky-ads'>
<div class='sticky-ads-close' onclick='closeads()'><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='sticky-ads-content'>
<ins class="adsbygoogle"
style="display:inline-block;height:70px;width:100%;line-height:70px;"
data-ad-client="ca-pub-xxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxx"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
function closeads() {
document.getElementById('bottom-sticky-ads').style.display='none';
}
//]]>
</script>
Note :- Change The Marked Ca Pub Id and Ad Slot Id.
Step 9 :- Finally, Don't Forget to Click on Save Theme and See The Result.