Cara Membuat Iklan Melayang Responsive di Layar Bawah Blog
Membuat iklan melayang yang responsive di layar bawah blog dapat meningkatkan pendapatan Anda dengan menarik lebih banyak perhatian pengunjung. Berikut adalah langkah-langkah untuk membuat iklan melayang di layar bawah blog Anda:
Langkah 1: Tambahkan Kode HTML
Tambahkan kode HTML berikut di dalam <body> blog Anda:
<div class="floating-ad" id="floating-ad">
<span class="close-ad" onclick="document.getElementById('floating-ad').style.display='none'">×</span>
<a href="URL_IKLAN_ANDA" target="_blank">
<img src="URL_GAMBAR_IKLAN" alt="Iklan Anda">
</a>
</div>
Langkah 2: Tambahkan CSS
Tambahkan kode CSS berikut di dalam <head> blog Anda untuk mengatur tampilan iklan:
<style>
.floating-ad {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
border-top: 1px solid #ccc;
text-align: center;
z-index: 9999;
padding: 10px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.floating-ad img {
max-width: 100%;
height: auto;
}
.close-ad {
position: absolute;
top: 5px;
right: 10px;
font-size: 20px;
color: #000;
cursor: pointer;
}
</style>
Langkah 3: Penyesuaian dan Pengujian
Sesuaikan URL iklan dan gambar di dalam kode HTML sesuai kebutuhan Anda. Setelah itu, uji iklan melayang di berbagai perangkat untuk memastikan iklan tampil dengan baik dan responsive.
Kesimpulan
Membuat iklan melayang responsive di layar bawah blog Anda dapat membantu meningkatkan interaksi pengunjung dengan iklan tersebut. Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah menambahkan iklan melayang ke blog Anda dan mengoptimalkan pendapatan iklan Anda.