How to Create Hovering Ads HTML, CSS, JavaScript on Website or Blog

How to Create Hovering Ads HTML, CSS, JavaScript on Website or Blog

How to Create Hovering Ads HTML, CSS, JavaScript on a Website or Blog To make ads float on websites, you can use the JavaScript and CSS programming languages. The following is sample code to create a floating ad:

HTML: javascriptCopy code <div class="ads"> <img src="path/to/your/advertisement/image.jpg" alt="Advertisement"> </div> CSS: cssCopy code .ads { position: fixed; bottom: 10px; right: 10px; z-index: 9999; animation: slideup 5s easy-in-out infinite; } @keyframes slideup { 0% { transform: translateY(0); } 50% { transform: translate Y(-20px); } 100% { transform: translate Y(0); } } JavaScript: javascriptCopy code // Set the duration of the animation in seconds var duration = 5; // Set the delay before the animation starts in seconds var delay = 2; // Wait for the specified delay before showing the ad setTimeout(function() { document. querySelector('.ads').style.display = 'block'; }, delay * 1000); // Hidethe ad after the animation completes setTimeout(function() { document. querySelector('.ads').style.display = 'none'; }, (duration + delay) * 1000); You can adjust the position, duration and type of animation according to your needs. Then, you can embed the code on your website pages to make ads fly.

Cara Buat Iklan Melayang HTML, CSS, JavaScript di Website atau Blog

Untuk membuat iklan melayang pada website, Anda dapat menggunakan bahasa pemrograman JavaScript dan CSS. Berikut ini adalah contoh kode untuk membuat iklan melayang:

HTML:

javascript
<div class="ads">
  <img src="path/to/your/advertisement/image.jpg" alt="Advertisement">
</div>

CSS:

css
.ads {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 9999;
  animation: slideup 5s ease-in-out infinite;
}

@keyframes slideup {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

JavaScript:

javascript
// Set the duration of the animation in seconds
var duration = 5;

// Set the delay before the animation starts in seconds
var delay = 2;

// Wait for the specified delay before showing the ad
setTimeout(function() {
  document.querySelector('.ads').style.display = 'block';
}, delay * 1000);

// Hide the ad after the animation completes
setTimeout(function() {
  document.querySelector('.ads').style.display = 'none';
}, (duration + delay) * 1000);

Anda dapat menyesuaikan posisi, durasi, dan jenis animasi sesuai dengan kebutuhan Anda. Kemudian, Anda dapat menyematkan kode tersebut pada halaman website Anda untuk membuat iklan melayang.