How to make a sticky bottom ad with adsense scripts 2023
To create a sticky bottom ad using the AdSense script you provided, follow these steps:
- Wrap the AdSense code inside a container div with a unique ID. This will allow us to target the div with CSS later on.
- Add the following CSS to make the container div stick to the bottom of the screen:
The position: fixed property makes the div stay in place regardless of scrolling, and bottom: 0 positions it at the bottom of the screen. The z-index property ensures that the ad is always on top of other elements on the page.
- Save the code as an HTML file and upload it to your website.
That’s it! Your AdSense ad should now appear as a sticky banner at the bottom of the screen.
To add an X close button on the left outside the AdSense ad, you can modify the HTML and CSS code as follows:
- Wrap the AdSense code inside a container div with a unique ID, as before. Add a new div for the close button inside the container div:
The close-button div contains the X character that will serve as the close button.
- Add the following CSS to position the close button on the left outside of the ad:
The position: absolute property positions the close button relative to the container div. The top and left properties adjust the position of the button, and the negative values move it outside of the ad. The cursor property changes the cursor to a pointer when hovering over the button, indicating that it is clickable. The font-size, font-weight, and color properties control the appearance of the X character.
- Add JavaScript to hide the ad and the close button when the button is clicked:
This code adds a click event listener to the close-button div. When the button is clicked, the container div (#sticky-ad) is hidden by setting its display property to none.
Save the modified code as an HTML file and upload it to your website. The AdSense ad should now appear as a sticky banner at the bottom of the screen, with an X close button on the left outside of the ad.
Here’s the merged code with the X close button on the left outside the AdSense ad:
Note that the HTML, CSS, and JavaScript code is all included in a single <div> element, and the CSS styles and JavaScript event listener are added inline. You can also move the inline styles and scripts to external files if you prefer.
