How to Install a Floating Blogger Adsense Ad Script Code (Double Click)

How to Install a Floating Blogger Adsense Ad Script Code (Double Click)

To install a floating Adsense ad script code on your Blogger website, follow these steps:

1. Log in to your Blogger account and navigate to your blog’s dashboard.

2. Click on the "Layout" tab on the left-hand side of the screen.

3. Click on "Add a Gadget" where you want to place the floating Adsense ad. You can place the ad code in any widget area that allows HTML/Javascript.

4. Choose "HTML/JavaScript" gadget from the list of available gadgets.

5. In the content section of the gadget, paste the Adsense floating ad code you have generated from your Adsense account.

6. Give the gadget a title (optional) and click on "Save" to add the gadget to your blog.

7. Preview your blog and check to see if the ad is displaying properly. If it is not, try adjusting the ad code or widget position.

That’s it! Your floating Adsense ad should now be visible on your blog. Note that it may take a few minutes for the ad to start displaying properly.

The following is an example of a floating ad script code that can be used on websites:

php
<style>
/* Styling for the floating ad */
.floating-ad {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

/* Styling for the close button */
.floating-ad .close-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    background-color: #f00;
    border-radius: 50%;
    cursor: pointer;
}

/* Styling for the ad content */
.floating-ad .ad-content {
    padding: 10px;
}
</style>

<div class="floating-ad">
    <div class="close-btn">X</div>
    <div class="ad-content">
        <!-- Place your ad code here -->
    </div>
</div>

<script>
// Script to close the floating ad when the close button is clicked
document.querySelector('.close-btn').addEventListener('click', function() {
    document.querySelector('.floating-ad').style.display = 'none';
});
</script>

You can place this script code in your HTML file or website template. Make sure to replace <!-- Place your ad code here --> with your Adsense ad code. Don't forget to adjust the styling according to your needs.

How to Place Responsive Floating Ads on a Blog

The solution to the problem of low clicks is to use floating ads. Floating ads are ads that will appear (pop up) on the page of a blog. So that the attention of visitors will go directly there and the possibility of clicking will be greater. Then how do you make Responsive Floating Ads on the Blog? The method is quite easy, just go ahead. 

1. First enter the blogger dashboard

2. Go to theme, then click Edit HTML

3. After that, look for the code </body> by pressing Ctrl + F. After you find it, put this code right above the code </body>

<script type='text/javascript'>
        $(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#btm_banner&#39;).hide(90);});});
</script>
        <!--start: floating ads-->
        <div id='floatads' style='width:100%;margin:auto; text-align:center;float:none;overflow:hidden; display:scroll;position:fixed; bottom:0;z-index:9999'>
         <div><a id='close-floatads' onclick='document.getElementById(&apos;floatads&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmwL97aHDwibNjkipp0TF9nDO0vJLAprMetlqNc47urATSZXbdvGkg7WeghjY-Zs5yIlFD3VWvEYT1ieeSAKds6Vydq9edX2CqqfCa33xz2w6PhhJOcNq-UoIcbsGdpObstg6KQmN_pWg/s1600/btn_close.gif' title='close button'/></a></div>
    <div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
<!--Script iklan-->
TARUH KODE IKLAN ANDA DISINI
<!--Akhir script iklan-->
        </div>
 </div><!--end: floating ads-->

4. After that click save template. 

How to edit floating ads

To set the ad width, please edit the blue code, if you want to change the ad width to more than 728px then you have to replace the number 728px according to the desired ad width. However, if you want to change but the width is smaller than 728px, then the number 728px does not need to be replaced. 

To change the ad, please replace the red code with your ad code. 

Yes, that's more or less the way to create floating ads with the close button on blogger. By using floating ads, usually the clicks you get will be bigger than usual. The thing to pay attention to when placing floating ads is not to let them cover your article.