How to add sticky ad in blogger website
Hey everyone, if you're looking to boost your website's earnings through AdSense or other monetization platforms, consider implementing a sticky ad at the bottom of your site. Sticky ads consistently display on the page, increasing your CPM and RPM, ultimately generating more revenue.
Now, let's delve into how you can seamlessly integrate this sticky ad onto your website using simple HTML and CSS code.
Demo of sticky ad
See the Pen Sticky ad or footer add for site by Dk technozone (@Dktechnozone) on CodePen.
Here's how to add a sticky ad widget on Blogger:
1. Copy and paste the provided CSS code above your closing head tag.
<style>.dktechnozone{ position: fixed; bottom: 0; left: 0; width: 100%; min-height: 70px; max-height: 200px; padding: 5px 0; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; display: flex; align-items: center; justify-content: center; background-color: #fff2ff; z-index: 20; } .dktechnozone-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: #fff; } .dktechnozone .dktechnozone-close svg { width: 32px; height: 32px; fill: #000; } .dktechnozone .dktechnozone-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }
</style>
2. Paste this HTML code anywhere within the body tag, preferably above the closing body tag, for optimal performance. Ensure to replace the code of AdSense ad code with your own adcode to ensure proper integration.
<div class='dktechnozone jhfdiuh0' id='dktechnozone'>
<!-- close button code -->
<div class='dktechnozone-close' onclick='document.getElementById("dktechnozone").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='dktechnozone-content'>
<!-- replace the adcode with yours size height:70px important -->
<ins class="adsbygoogle" style="display:inline-block;height:70px;width:100%;line-height:70px;"
data-ad-client="ca-pub-xxxxxxxxxxx"
data-ad-slot=""></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
3. Save your changes, then navigate to your website to view the results. If the ads aren't displaying, consider creating an ad with dimensions of 720×90 in your AdSense account.
4. Bonus - You can paste both css and html in same place in anywhere in your theme body tag
This straightforward guide simplifies the process of adding a sticky ad to your Blogger website. If you found this helpful, share it with your friends!"
Last word
In this post we will provided information about How to add sticky ad in blogger website , If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.
Broo AAP k website pe kon sae ads chal Raha hae