Blogger : How to add Floating AdSense Ad at Bottom Screen

To add a floating AdSense ad at the bottom of the screen on your Blogger website, you can use a combination of HTML, CSS, and JavaScript. Here's a step-by-step guide:

1. Log in to your Blogger Account:
2. Go to Blogger and log in to your account.
3. Access Theme Editor:
4. In your Blogger dashboard, navigate to the blog you want to edit.
5. Click on "Theme" in the left-hand menu.
6. Edit HTML:
7. Click on the "Edit HTML" button.

Backup your Template:

Before making any changes, it's a good practice to make a backup of your template. Click on the "Download Theme" button to save a copy of your existing template.

Add the following CSS code just before the </b:skin> tag:

Add CSS for the Floating Ad:

...

   .stky-ads {

    position: fixed;

    bottom: -10px;

    left: 0;

    width: 100%;

    min-height: 30px;

    max-height: 93px;

    padding: 5px 5px;

    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: #ffffff;

    z-index: 20;

}

.stky-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);

    cursor: pointer;

}

.stky-ads .stky-ads-close svg {

    width: 22px;

    height: 22px;

    fill: #000;

}

.stky-ads .stky-ads-content {

    overflow: hidden;

    display: block;

    position: relative;

    height: 100px;

    width: 100%;

    margin-right: 10px;

    margin-left: 10px;

}

...

Add HTML for the AdSense Ad:

Add the following HTML code where you want the AdSense ad to appear (preferably just before the </body> tag):

html

...

<div class='stky-ads jhfdiuh0' id='stky-ads'>

      

<div class='stky-ads-close' onclick='document.getElementById(&quot;stky-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>   

<center>

<div class='stky-ads-content'> 

<div>

<center>

<div> 

 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    <ins class="adsbygoogle"

         style="display:block"

         data-ad-client="YOUR-AD-CLIENT-ID"

         data-ad-slot="YOUR-AD-SLOT-ID"

         data-ad-format="auto"></ins>

    <script>

         (adsbygoogle = window.adsbygoogle || []).push({});

    </script>

</div>

</center>

</div>

</div>

</center>

</div>

...

Replace "YOUR-AD-CLIENT-ID" and "YOUR-AD-SLOT-ID" with your AdSense ad client ID and ad slot ID.

Save Theme:

Click on the "Save theme" button to save your changes.

Preview and Adjust:

Preview your blog to see if the floating AdSense ad is displaying correctly. Adjust the CSS code as needed to fit your design.

Remember to comply with AdSense policies, and ensure that the ad placement adheres to Google's guidelines to prevent any issues with your AdSense account.