.jpg) |
| Ilustrasi Ads |
Iklan yang menarik menjadi kunci untuk menarik perhatian pembaca. Salah satu pendekatan inovatif untuk meningkatkan keterlibatan pengguna adalah penggunaan iklan slide atau bisa juga dikenal dengan Slide Ads, Pada kesempatan ini kami akan mengupas detail tentang cara membuat iklan video YouTube yang menarik menggunakan kode HTML, CSS, dan JavaScript.
Apa Itu Slide Ads
Kode yang kami berikan merupakan elemen Slide Ads yang menampilkan video YouTube dalam suatu kontainer yang tetap. Kontainer ini memiliki dimensi yang ditentukan dan ditempatkan di sisi kanan layar. Slide Ads ini dirancang untuk menarik minat pengguna tanpa menghalangi konten utama. Mari kita bahas komponen-komponen utama dari kode tersebut.
1. Styling Kontainer Slider
Class `.ad-slider` mendefinisikan gaya kontainer ini, termasuk dimensinya, posisinya, dan tampilannya. Kontainer ini ditempatkan pada jarak tetap dari tepi kanan layar, sehingga konten utama tetap terlihat.
2. Styling Tombol Tutup
Class `.close-button` menentukan tampilan tombol tutup dalam iklan slider. Tombol ini memberikan opsi kepada pengguna untuk menutup iklan jika mereka menginginkannya. Tombol ini memiliki teks tebal dan latar belakang merah untuk memastikan keterlihatannya.
3. Desain Responsif
Kode ini mencakup aturan media untuk menyesuaikan dimensi dan posisi slider untuk layar dengan lebar maksimal 600 piksel. Pendekatan responsif ini memastikan iklan tetap menarik secara visual pada berbagai perangkat.
4. Menanamkan Video YouTube
Tag `<iframe>` dalam kode HTML iklan slider menanamkan video YouTube. Atribut `src` berisi URL video, sementara atribut `allow` menentukan izin autoplay dan tampilan layar penuh.
5. Fungsi JavaScript
Fungsi JavaScript `showAd()`, `hideAd()`, dan `closeAd()` bertanggung jawab untuk menampilkan, menyembunyikan, dan menutup iklan, secara berurutan. Fungsi `setInterval()` memicu fungsi `showAd()` pada interval reguler untuk memastikan iklan ditampilkan secara berkala.
Keterlibatan Pengguna
Iklan slide atau Slide Ads dapat meningkatkan keterlibatan pengguna dengan menempatkannya secara strategis tanpa mengganggu konten utama. Desainnya yang mencolok dan konten video yang otomatis diputar sangat mungkin menarik perhatian pengguna. Tombol tutup memberi pengguna kendali atas pengalaman iklan mereka, menciptakan pengalaman pengguna yang positif.
Praktik Terbaik untuk Iklan Slide yang Efektif
- Pastikan konten video YouTube sesuai dengan minat audiens target Anda.
- Pertahankan video agar singkat untuk menjaga keterlibatan pengguna. Video yang terlalu panjang dapat menyebabkan tingkat keluar yang lebih tinggi.
- Pertimbangkan untuk menambahkan panggilan untuk tindakan (CTA) dalam iklan slider untuk mengarahkan pengguna untuk melakukan tindakan yang diinginkan setelah menonton video.
- Uji A/B Eksperimen dengan berbagai konten video, desain, dan penempatan untuk mengidentifikasi elemen yang paling resonan dengan audiens Anda.
Berikut Cara Membuat Iklan Video yang diambil dengan cara embed di Youtube.
CSS
/* SF Youtube Bowo GhostblaCk */
.ad-slider {
width: 270px;
height: 120px; /* Sesuaikan tinggi dengan tinggi video Anda */
background-color: #ccc;
position: fixed;
top: 50%;
right: -320px; /* Sesuaikan jarak ke kanan */
z-index: 9999;
transform: translateY(-50%);
transition: right 0.1s ease-out;
border-radius: 10px;
}
/* Style untuk tombol tutup iklan */
.close-button {
background-color: red;
color: white;
padding: 5px 10px;
border: none;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
cursor: pointer;
position: absolute;
top: 5px;
right: 5px;
}
.close-button:hover {
background-color: red;
}
@media (max-width: 600px) {
.ad-slider {
width: 54%;
height: 110px;
top: auto;
bottom: 170px;
transform: translateY(-50%);
transition: right 0.2s ease-out;
}
}
/* Styling untuk video YouTube dalam elemen iframe */
.ad-slider iframe {
border-radius: 10px;
width: 100%;
height: 100%;
}
Untuk HTML dan JS nya sebagai berikut.
<div class='ad-slider'>
<!-- Ganti 'YOUTUBE_VIDEO_ID' dengan ID video YouTube yang ingin Anda tampilkan -->
<iframe allow='autoplay; fullscreen' frameborder='0' height='180' src='GANTI DENGAN URL EMBED ?autoplay=1' width='320'/>
<button class='close-button'>X</button>
</div>
<!-- JAVASCRIPT SLIDER -->
<script>
// Bowo Ghostblack Fungsi untuk memunculkan iklan slider
function showAd() {
var adSlider = document.querySelector('.ad-slider');
adSlider.style.right = '0';
}
// Bowo Ghostblack Fungsi untuk menyembunyikan iklan slider
function hideAd() {
var adSlider = document.querySelector('.ad-slider');
adSlider.style.right = '-320px'; // Sesuaikan jarak ke kanan dengan lebar slider
}
// Bowo Ghostblack Fungsi untuk menutup iklan slider
function closeAd() {
var closeButton = document.querySelector('.close-button');
closeButton.addEventListener('click', hideAd);
}
setInterval(showAd, 10000);
closeAd();
</script>
<!-- END -->
Penutup
Slide Ads , adalah cara efektif untuk mempresentasikan konten video YouTube kepada pengunjung. Dengan menempatkannya secara strategis dan menggunakan visual yang menarik, bisnis dapat menarik perhatian pengguna dan mempromosikan produk atau layanan mereka.
Dengan menggabungkan desain responsif dan elemen interaktif seperti "button close", pengalaman iklan yang mulus dan ramah pengguna. Saat lanskap digital terus berkembang, pendekatan inovatif seperti slide ads memberikan kontribusi pada strategi pemasaran online yang lebih efektif.
Comments0