Alert box

×

Visit premium theme zone

Visit

join telegram Channel for updates

join

How to add sticky ad in blogger website

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(&quot;dktechnozone&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='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.

Next Post Previous Post
2 Comments
  • Admin
    Admin 29 March 2024 at 21:33

    Broo AAP k website pe kon sae ads chal Raha hae

  • Dhanjee Rider
    Dhanjee Rider 3 May 2024 at 15:37

    Pta nhi (:

Add Comment
comment url