Atribut HTML: Cara Kerja & Penggunaan Efektif

Perkembangan web yang pesat menuntut pemahaman mendalam tentang fondasi pembangunannya. Salah satu elemen krusial yang seringkali luput dari perhatian, padahal memiliki peran sentral, adalah HTML&results=all">atribut HTML. Atribut ini, layaknya sifat-sifat yang melekat pada suatu objek, memberikan informasi tambahan kepada elemen HTML, memungkinkannya berfungsi dan ditampilkan sesuai keinginan. Tanpa atribut, elemen HTML hanyalah kerangka kosong, kehilangan potensi interaksi dan visual yang kaya.

Banyak pemula seringkali menganggap atribut HTML sebagai sesuatu yang rumit dan membingungkan. Padahal, konsepnya cukup sederhana. Atribut memberikan detail spesifik tentang elemen HTML. Detail ini bisa berupa sumber gambar, teks alternatif, URL tautan, atau bahkan gaya visual. Memahami cara kerja dan penggunaan atribut HTML secara efektif adalah kunci untuk menciptakan halaman web yang dinamis, interaktif, dan mudah diakses.

Artikel ini akan mengupas tuntas tentang atribut HTML, mulai dari definisi dasar, sintaksis, jenis-jenis atribut yang umum digunakan, hingga contoh penerapan praktisnya. Kita juga akan membahas bagaimana atribut HTML dapat dioptimalkan untuk meningkatkan aksesibilitas dan performa website Kalian. Dengan pemahaman yang komprehensif, Kalian akan mampu memanfaatkan atribut HTML secara maksimal untuk mewujudkan ide-ide kreatif Kalian dalam dunia web.

Penting untuk diingat, atribut HTML selalu berada di dalam tag pembuka elemen HTML. Mereka terdiri dari nama atribut dan nilai atribut, dipisahkan oleh tanda sama dengan (=). Nilai atribut biasanya diapit oleh tanda kutip ganda () atau tunggal (''). Pemilihan tanda kutip tergantung pada preferensi Kalian, namun konsistensi sangat dianjurkan.

Sintaksis atribut HTML sangatlah sederhana. Secara umum, formatnya adalah sebagai berikut: . Contohnya, pada tag , Kalian dapat menggunakan atribut src untuk menentukan sumber gambar: . Atribut src adalah nama atribut, gambar.jpg adalah nilai atribut, dan keduanya dipisahkan oleh tanda sama dengan (=).

Kalian juga dapat menggunakan lebih dari satu atribut dalam satu tag HTML. Setiap atribut dipisahkan oleh spasi. Contohnya: Link. Dalam contoh ini, tag memiliki dua atribut: href yang menentukan URL tautan, dan title yang memberikan teks bantuan saat kursor diarahkan ke tautan tersebut.

Perlu diperhatikan bahwa beberapa atribut memiliki nilai boolean, yang berarti mereka hanya memiliki dua kemungkinan nilai: true atau false. Dalam HTML, nilai boolean seringkali direpresentasikan dengan kehadiran atribut itu sendiri (true) atau ketiadaan atribut tersebut (false). Contohnya, atribut disabled pada tag akan menonaktifkan elemen input jika ada.

Ada ratusan atribut HTML yang tersedia, masing-masing dengan fungsi spesifik. Namun, ada beberapa atribut yang sangat umum digunakan dan perlu Kalian pahami. Atribut src, seperti yang telah disebutkan sebelumnya, digunakan untuk menentukan sumber gambar atau media lainnya. Atribut href digunakan untuk menentukan URL tautan. Atribut alt digunakan untuk memberikan teks alternatif untuk gambar, yang sangat penting untuk aksesibilitas dan SEO.

Atribut title memberikan teks bantuan saat kursor diarahkan ke elemen HTML. Atribut class dan id digunakan untuk memberikan identifikasi unik pada elemen HTML, yang berguna untuk styling dengan CSS dan manipulasi dengan JavaScript. Atribut style memungkinkan Kalian untuk menerapkan gaya visual langsung ke elemen HTML, meskipun penggunaan CSS eksternal lebih disarankan untuk pemeliharaan kode yang lebih baik.

Selain itu, ada juga atribut-atribut yang spesifik untuk elemen HTML tertentu. Misalnya, atribut type pada tag digunakan untuk menentukan jenis input (teks, email, password, dll.). Atribut rows dan cols pada tag digunakan untuk menentukan ukuran area teks. Memahami fungsi dari setiap atribut akan membantu Kalian mengoptimalkan penggunaan elemen HTML.</p><h id="heading-18"><h3>Atribut HTML untuk Aksesibilitas</h3></h><p>Aksesibilitas web adalah aspek penting yang seringkali terabaikan. Memastikan bahwa website Kalian dapat diakses oleh semua orang, termasuk mereka yang memiliki disabilitas, adalah tanggung jawab moral dan hukum. Atribut HTML memainkan peran penting dalam meningkatkan aksesibilitas. <b id="heading-19">Atribut <i>alt</i></b> pada tag <img> adalah contoh utama. Dengan memberikan teks alternatif yang deskriptif, Kalian memungkinkan pembaca layar untuk menyampaikan informasi visual kepada pengguna tunanetra.</p><p><b id="heading-20">Atribut <i>aria-</i></b> adalah serangkaian atribut yang dirancang khusus untuk meningkatkan aksesibilitas. Atribut-atribut ini memberikan informasi tambahan tentang peran, status, dan properti elemen HTML kepada teknologi bantu. Contohnya, <i>aria-label</i> dapat digunakan untuk memberikan label yang lebih deskriptif untuk elemen yang tidak memiliki label visual. <i>aria-hidden</i> dapat digunakan untuk menyembunyikan elemen dari pembaca layar.</p><p>Selain itu, penggunaan elemen HTML yang semantik (seperti <header>, <nav>, <main>, <footer>) juga berkontribusi pada aksesibilitas. Elemen-elemen ini memberikan struktur yang jelas pada halaman web, memudahkan teknologi bantu untuk memahami konten dan navigasi.</p><h id="heading-21"><h3>Optimasi Atribut HTML untuk SEO</h3></h><p>Mesin pencari seperti Google menggunakan atribut HTML sebagai salah satu faktor dalam menentukan peringkat website Kalian. Mengoptimalkan atribut HTML dapat membantu meningkatkan visibilitas website Kalian di hasil pencarian. <b id="heading-22">Atribut <i>alt</i></b> pada tag <img> sangat penting untuk SEO. Dengan memberikan teks alternatif yang relevan dengan gambar, Kalian membantu mesin pencari memahami konten gambar dan mengindeksnya dengan benar.</p><p><b id="heading-23">Atribut <i>title</i></b> juga dapat berkontribusi pada SEO, meskipun dampaknya tidak sebesar atribut <i>alt</i>. Dengan memberikan judul yang deskriptif untuk tautan, Kalian memberikan informasi tambahan kepada mesin pencari tentang tujuan tautan tersebut. Selain itu, pastikan untuk menggunakan atribut <i>lang</i> pada tag <html> untuk menentukan bahasa website Kalian. Ini membantu mesin pencari memahami bahasa konten Kalian dan menargetkan audiens yang tepat.</p><p>Hindari penggunaan atribut HTML yang tidak perlu atau berlebihan. Kode yang bersih dan efisien lebih disukai oleh mesin pencari. Fokuslah pada penggunaan atribut yang relevan dan memberikan nilai tambah bagi pengguna dan mesin pencari.</p><h id="heading-24"><h3>Contoh Penerapan Atribut HTML dalam Kode</h3></h><p>Berikut adalah beberapa contoh penerapan atribut HTML dalam kode:</p><ul> <li><b id="heading-25">Menampilkan Gambar dengan Teks Alternatif:</b> <img src=logo.png alt=Logo Perusahaan></li> <li><b id="heading-26">Membuat Tautan dengan Judul:</b> <a href=https://www.example.com title=Kunjungi website kami>Pelajari Lebih Lanjut</a></li> <li><b id="heading-27">Membuat Input Teks dengan Placeholder:</b> <input type=text placeholder=Masukkan nama Anda></li> <li><b id="heading-28">Menonaktifkan Tombol:</b> <button disabled>Simpan</button></li> <li><b id="heading-29">Memberikan ID pada Elemen:</b> <div id=header>Header Website</div></li></ul><p>Contoh-contoh ini menunjukkan bagaimana atribut HTML dapat digunakan untuk memberikan informasi tambahan dan mengontrol perilaku elemen HTML. Dengan memahami contoh-contoh ini, Kalian dapat mulai menerapkan atribut HTML dalam proyek web Kalian sendiri.</p><h id="heading-30"><h3>Perbandingan Atribut HTML dengan CSS</h3></h><p>Seringkali, Kalian mungkin bertanya-tanya, kapan sebaiknya menggunakan atribut HTML dan kapan sebaiknya menggunakan CSS? Secara umum, <b id="heading-31">atribut HTML digunakan untuk memberikan informasi struktural dan semantik tentang elemen HTML</b>, sedangkan <b id="heading-32">CSS digunakan untuk mengontrol tampilan visual elemen HTML</b>.</p><p>Misalnya, Kalian dapat menggunakan atribut <i>alt</i> pada tag <img> untuk memberikan teks alternatif untuk gambar, tetapi Kalian tidak dapat menggunakan atribut <i>alt</i> untuk mengubah warna gambar. Untuk mengubah warna gambar, Kalian perlu menggunakan CSS. Demikian pula, Kalian dapat menggunakan atribut <i>class</i> dan <i>id</i> pada elemen HTML untuk memberikan identifikasi unik, tetapi Kalian perlu menggunakan CSS untuk menerapkan gaya visual ke elemen-elemen tersebut.</p><p>Dengan memisahkan konten (HTML) dari presentasi (CSS), Kalian dapat menciptakan kode yang lebih terstruktur, mudah dipelihara, dan fleksibel. Ini adalah prinsip dasar dari pengembangan web modern.</p><h id="heading-33"><h3>Kesalahan Umum dalam Penggunaan Atribut HTML</h3></h><p>Bahkan pengembang web berpengalaman pun terkadang melakukan kesalahan dalam penggunaan atribut HTML. Beberapa kesalahan umum meliputi: <b id="heading-34">lupa menutup atribut</b> (misalnya, <img src=gambar.jpg>), <b id="heading-35">menggunakan atribut yang tidak valid</b> (misalnya, <p style=color: blue>), <b id="heading-36">tidak memberikan nilai atribut</b> (misalnya, <a href=>Link</a>), dan <b id="heading-37">menggunakan tanda kutip yang tidak konsisten</b>. </p><p>Kesalahan-kesalahan ini dapat menyebabkan website Kalian tidak berfungsi dengan benar atau tidak ditampilkan dengan benar. Oleh karena itu, penting untuk selalu memeriksa kode Kalian dengan cermat dan menggunakan validator HTML untuk mendeteksi kesalahan.</p><h id="heading-38"><h3>Tutorial Singkat: Menambahkan Teks Alternatif pada Gambar</h3></h><p>Berikut adalah tutorial singkat tentang cara menambahkan teks alternatif pada gambar:</p><ul> <li><b id="heading-39">Buka kode HTML halaman web Kalian.</b></li> <li><b id="heading-40">Temukan tag <img> yang ingin Kalian tambahkan teks alternatifnya.</b></li> <li><b id="heading-41">Tambahkan atribut <i>alt</i> ke tag <img>.</b></li> <li><b id="heading-42">Berikan teks alternatif yang deskriptif dan relevan dengan gambar.</b></li> <li><b id="heading-43">Simpan kode HTML dan refresh halaman web Kalian.</b></li></ul><p>Dengan mengikuti langkah-langkah ini, Kalian dapat meningkatkan aksesibilitas dan SEO website Kalian.</p><h id="heading-44"><h3>Review: Pentingnya Memahami Atribut HTML</h3></h><p>Atribut HTML adalah elemen fundamental dalam pengembangan web. Memahami cara kerja dan penggunaan atribut HTML secara efektif adalah kunci untuk menciptakan halaman web yang dinamis, interaktif, mudah diakses, dan dioptimalkan untuk mesin pencari. Dengan menguasai atribut HTML, Kalian akan memiliki fondasi yang kuat untuk membangun website yang sukses. <i>Penguasaan atribut HTML bukan hanya tentang sintaksis, tetapi tentang memahami bagaimana memberikan makna dan fungsi pada elemen-elemen web Kalian.</i></p><h id="heading-45"><h3>{Akhir Kata}</h3></h><p>Semoga artikel ini memberikan pemahaman yang komprehensif tentang atribut HTML. Ingatlah bahwa belajar web development adalah proses berkelanjutan. Teruslah bereksperimen, mencoba hal-hal baru, dan jangan takut untuk membuat kesalahan. Dengan dedikasi dan ketekunan, Kalian akan menjadi pengembang web yang handal. Selamat berkarya!</p> <style>#relBefore { position: relative; margin-top: 42px; padding: 1.5em; border-top: 1px solid #f1f6fd; border-bottom: 1px solid #f1f6fd; font-size: 16px; margin-bottom: 0px; } #relBefore span { font-weight: 400; margin: 0; padding: 6px 14px; background-color: #fefefe; border: 1px solid #e6e6e6; border-radius: 15px; position: absolute; top: -15.5px; left: 20px; } div#relBefore a { display: contents; line-height: 2; } #relBefore ul { margin: 8px 0 0; padding-left: 20px; } #relBefore li { list-style-type: none; transition: all 0.4s ease; background: transparent !important; }</style><div id="relBefore"> <span>Baca Juga:</span> <ul> <li><a href="whatsapp-atasi-foto-video-simpan-otomatis">➝ WhatsApp: Atasi Foto & Video Simpan Otomatis.</a></li> <li><a href="pcie-gen-3-vs-gen-4-pilih-yang-tepat">➝ PCIe Gen 3 vs Gen 4: Pilih yang Tepat!</a></li> <li><a href="pengikut-instagram-cepat-strategi-cerdas-efektif">➝ Pengikut Instagram Cepat: Strategi Cerdas & Efektif</a></li> </ul> </div> <!-- WG SHARE POST--> <!-- COMMENT INSD--> <!-- WG AI --> </section> </article> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <style> div#slTop { margin-top: 60px!important; } /* Basic styles */ .owl-carousel .item { display: flex; flex-direction: column; align-items: center; text-align: center; } .item img { max-width: 100%; height: auto; border-radius: 5px; } .owl-nav button { background: none; border: none; color: #4d0270; /* Change color as needed */ font-size: 24px; /* Adjust size as needed */ cursor: pointer; /* Ensure pointer cursor for clickable area */ padding: 10px; /* Add padding for better click area */ } .owl-nav button:hover { color: #c6005f; /* Change color on hover */ } </style> <div class="slTop section gh-outer" id="slTop"> <h3 style=" margin-bottom: 20px; ">Baca Juga: </h3> <div class="widget HTML" data-version="2" id="HTML14"> <div class="widget-content"> <div class="owl-carousel owl-loaded owl-drag"> <div class="owl-stage-outer"> <div class="owl-stage"> <div class="owl-item" style="width: 250px;"> <div class="item"> <a href="/bahaya-ngecas-hp-di-tempat-umum-data-terancam" title="Bahaya Ngecas HP di Tempat Umum: Data Terancam!"> <img src="https://tse1.mm.bing.net/th?q=Bahaya+Ngecas+HP+di+Tempat+Umum:+Data+Terancam!" alt="Bahaya Ngecas HP di Tempat Umum: Data Terancam!"> </a> <h2 class="rect-title"><a href="/bahaya-ngecas-hp-di-tempat-umum-data-terancam">Bahaya Ngecas HP di Tempat Umum: Data Terancam!</a></h2> <div class="post-meta"><div class="rcDTe">Update jam 08:55:00</div></div> </div> </div><div class="owl-item" style="width: 250px;"> <div class="item"> <a href="/driver-tidak-terdeteksi-solusi-cepat-mudah" title="Driver Tidak Terdeteksi? Solusi Cepat & Mudah!"> <img src="https://tse1.mm.bing.net/th?q=Driver+Tidak+Terdeteksi?+Solusi+Cepat+&+Mudah!" alt="Driver Tidak Terdeteksi? Solusi Cepat & Mudah!"> </a> <h2 class="rect-title"><a href="/driver-tidak-terdeteksi-solusi-cepat-mudah">Driver Tidak Terdeteksi? Solusi Cepat & Mudah!</a></h2> <div class="post-meta"><div class="rcDTe">Update jam 07:56:00</div></div> </div> </div><div class="owl-item" style="width: 250px;"> <div class="item"> <a href="/download-scribd-cepat-mudah-efisien" title="Download Scribd: Cepat, Mudah, & Efisien"> <img src="https://tse1.mm.bing.net/th?q=Download+Scribd:+Cepat,+Mudah,+&+Efisien" alt="Download Scribd: Cepat, Mudah, & Efisien"> </a> <h2 class="rect-title"><a href="/download-scribd-cepat-mudah-efisien">Download Scribd: Cepat, Mudah, & Efisien</a></h2> <div class="post-meta"><div class="rcDTe">Update jam 07:54:00</div></div> </div> </div><div class="owl-item" style="width: 250px;"> <div class="item"> <a href="/driver-chipset-gpu-pasang-dengan-benar" title="Driver Chipset & GPU: Pasang dengan Benar!"> <img src="https://tse1.mm.bing.net/th?q=Driver+Chipset+&+GPU:+Pasang+dengan+Benar!" alt="Driver Chipset & GPU: Pasang dengan Benar!"> </a> <h2 class="rect-title"><a href="/driver-chipset-gpu-pasang-dengan-benar">Driver Chipset & GPU: Pasang dengan Benar!</a></h2> <div class="post-meta"><div class="rcDTe">Update jam 06:55:00</div></div> </div> </div><div class="owl-item" style="width: 250px;"> <div class="item"> <a href="/dm-baru-aman-enkripsi-video-call" title="DM Baru: Aman, Enkripsi, & Video Call"> <img src="https://tse1.mm.bing.net/th?q=DM+Baru:+Aman,+Enkripsi,+&+Video+Call" alt="DM Baru: Aman, Enkripsi, & Video Call"> </a> <h2 class="rect-title"><a href="/dm-baru-aman-enkripsi-video-call">DM Baru: Aman, Enkripsi, & Video Call</a></h2> <div class="post-meta"><div class="rcDTe">Update jam 06:53:00</div></div> </div> </div> <!-- Add more items similarly --> </div> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ $('.owl-carousel').owlCarousel({ loop: true, margin: 20, nav: true, items: 5, // Show 5 items on desktop autoplay: true, autoplayTimeout: 3000, autoplayHoverPause: true, responsive: { 0: { items: 1 // 1 item on mobile }, 600: { items: 2 // 2 items on small tablets }, 992: { items: 5 // 5 items on desktop } } }); }); </script> </main> <footer class="gh-footer gh-outer"> <div class="gh-footer-inner gh-inner"> <div class="gh-footer-bar"> <span class="gh-footer-logo is-title"><img style="width:220px!important;height:auto!important;" alt="" class="ls-is-cached lazyloaded" src="https://ik.imagekit.io/masdoni/ChatGPT_Image_Jan_11__2026__07_38_40_-removebg-preview_nosqB8M7l.png" title=""></span> <nav class="gh-footer-menu"><ul class="nav"><li><a href="https://berilmu.eu.org/tentang-kami">Tentang Kami</a></li><li><a href="https://berilmu.eu.org/hubungi-kami">Hubungi Kami</a></li><li><a href="https://berilmu.eu.org/kebijakan-privasi">Kebijakan Privasi</a></li><li><a href="https://berilmu.eu.org/syarat-dan-ketentuan">Syarat dan Ketentuan</a></li></ul></nav> <div class="gh-footer-copyright"> Powered by <a href="/" target="_blank">berilmu.eu.org</a> </div> </div> <section class="gh-footer-signup"> <h2 class="gh-footer-signup-header"><img style="width:220px!important;height:auto!important;" alt="" class="ls-is-cached lazyloaded" src="https://ik.imagekit.io/masdoni/ChatGPT_Image_Jan_11__2026__07_38_40_-removebg-preview_nosqB8M7l.png" title=""></h2> <p class="gh-footer-signup-subhead">Platform edukasi teknologi gratis. Temukan tutorial Excel, belajar Python, tips AI terbaru, dan panduan produktivitas kerja yang praktis dan mudah dipahami.</p> <style> .social-share{display:flex; gap:12px; margin-top:20px; justify-content:center} .social-share a{width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff!important; font-size:18px; transition:0.3s} .social-share a:hover{opacity:0.8; transform:translateY(-3px)} .facebook{background:#3b5998} .twitter{background:#1da1f2} .linkedin{background:#0077b5} .instagram{background:#e1306c} .whatsapp{background:#25D366} </style> <div class="social-share"> <a href="https://www.facebook.com/sharer/sharer.php?u=https://berilmu.eu.org" class="facebook" target="_blank"><i class="fab fa-facebook-f"></i></a> <a href="https://twitter.com/intent/tweet?url=https://berilmu.eu.org" class="twitter" target="_blank"><i class="fab fa-twitter"></i></a> <a href="https://www.linkedin.com/shareArticle?url=https://berilmu.eu.org" class="linkedin" target="_blank"><i class="fab fa-linkedin-in"></i></a> <a href="https://api.whatsapp.com/send?text=https://berilmu.eu.org" class="whatsapp" target="_blank"><i class="fab fa-whatsapp"></i></a> </div> </section> </div> </div> </footer> </div> <div id="ghost-portal-root"> <style> .gsmodal { position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; display:flex; align-items:center; justify-content:center; background:#fff; visibility:hidden; opacity:0; transition:0.3s; } .gsmodal.gsshow { visibility:visible; opacity:1; } .gscontent { width:90%; max-width:600px; text-align:center; } .gscontent input { width:100%; padding:15px; border:0; border-bottom:2px solid #eee; font-size:24px; outline:none; } .gsclose { position:absolute; top:20px; right:20px; background:none; border:0; font-size:30px; cursor:pointer; } </style> <div class="gsmodal"> <button class="gsclose">×</button> <div class="gscontent"> <form action="/search"> <input name="q" placeholder="Search..." required type="search"> <button type="submit" style="display:none"></button> </form> <p style="margin-top:15px; color:#888">Press Enter to search</p> </div> </div> </div> <script> const triggers = document.querySelectorAll('.gh-search'); const modal = document.querySelector('.gsmodal'); const close = document.querySelector('.gsclose'); triggers.forEach(t => t.onclick = () => modal.classList.add('gsshow')); close.onclick = () => modal.classList.remove('gsshow'); window.onclick = (e) => { if(e.target == modal) modal.classList.remove('gsshow'); } </script> <script src="https://cdn.jsdelivr.net/gh/iwgs/newswave@refs/heads/main/js/source.js?v=fce98be120"></script> <script></script> <style> #bannerAds { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); overflow: hidden; transition: all 0.5s ease-in-out; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; user-select: none; cursor: default; box-sizing: border-box; } #bannerAds.fixed { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 50% !important; max-width: none !important; border-radius: 16px !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important; z-index: 99999 !important; cursor: pointer; } #bannerAds img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: inherit; pointer-events: none; user-select: none; } #bannerAds .close-btn { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, 0.85); border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 18px; color: #444; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease, color 0.3s ease; user-select: none; z-index: 10; } #bannerAds .close-btn:hover, #bannerAds .close-btn:focus { background: #e53e3e; color: white; outline: none; } /* Text overlay container */ #bannerAds .text-overlay { position: absolute; bottom: 20px; left: 20px; right: 20px; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); font-weight: 700; font-size: 1.5rem; line-height: 1.2; pointer-events: none; user-select: none; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } #bannerAds.fixed .text-overlay { font-size: 1.25rem; bottom: 16px; left: 16px; right: 16px; } /* Title container */ #bannerAds .title { position: absolute; top: 12px; left: 20px; right: 60px; color: #222; font-weight: 700; font-size: 1.25rem; line-height: 1.2; user-select: none; pointer-events: none; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #bannerAds.fixed .title { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); top: 12px; left: 16px; right: 60px; font-size: 1.1rem; } /* Progress bar container */ #bannerAds .progress-bar-container { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(0, 0, 0, 0.1); border-radius: 0 0 12px 12px; overflow: hidden; pointer-events: none; user-select: none; } #bannerAds.fixed .progress-bar-container { border-radius: 0 0 16px 16px; } /* Progress bar fill */ #bannerAds .progress-bar-fill { height: 100%; background: #e53e3e; width: 0%; transition: width linear; } /* Responsive adjustments */ @media (max-width: 400px) { #bannerAds.fixed { width: 90vw !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } #bannerAds .text-overlay { font-size: 1.1rem; bottom: 14px; left: 14px; right: 14px; } #bannerAds .title { font-size: 1rem; left: 14px; right: 50px; } #bannerAds.fixed .title { font-size: 1rem; left: 14px; right: 50px; } } </style> <!-- Banner Ads Container --> <div aria-label="Promotional banner advertisement" id="bannerAds" role="region" tabindex="0" > <button aria-label="Close banner ad" class="close-btn" id="closeBtn" type="button"> <i aria-hidden="true" class="fas fa-times"></i> </button> <div class="title" aria-hidden="true">Display Ads</div> <div class="progress-bar-container" aria-hidden="true"> <div class="progress-bar-fill" id="progressBar"></div> </div> </div> <script> (function () { const banner = document.getElementById("bannerAds"); const closeBtn = document.getElementById("closeBtn"); const progressBar = document.getElementById("progressBar"); // Constants for timing const INITIAL_DELAY = 5000; // 5 seconds initial delay before fixed popup const BASE_INTERVAL = 10000; // 10 seconds base interval after close const DAY_MILLISECONDS = 24 * 60 * 60 * 1000; const AUTO_CLOSE_DURATION = 10000; // 10 seconds auto close duration when popup shown // Keys for localStorage const STORAGE_KEY = "bannerAdsState"; // State object structure: // { // lastCloseTime: timestamp in ms, // currentIntervalMultiplier: number, // lastShowTime: timestamp in ms // } // Initialize or reset state if 24 hours passed function getState() { const stateRaw = localStorage.getItem(STORAGE_KEY); if (!stateRaw) { return { lastCloseTime: 0, currentIntervalMultiplier: 1, lastShowTime: 0, }; } try { const state = JSON.parse(stateRaw); if (Date.now() - state.lastCloseTime > DAY_MILLISECONDS) { // Reset after 24 hours return { lastCloseTime: 0, currentIntervalMultiplier: 1, lastShowTime: 0, }; } return state; } catch { return { lastCloseTime: 0, currentIntervalMultiplier: 1, lastShowTime: 0, }; } } function saveState(state) { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } // Show banner as fixed popup function showFixedPopup() { banner.style.display = "block"; banner.classList.add("fixed"); startProgressBar(AUTO_CLOSE_DURATION); startAutoCloseTimer(AUTO_CLOSE_DURATION); } // Show banner as normal full width banner (initial) function showInitialBanner() { banner.style.display = "block"; banner.classList.remove("fixed"); resetProgressBar(); clearAutoCloseTimer(); } // Hide banner function hideBanner() { banner.style.display = "none"; resetProgressBar(); clearAutoCloseTimer(); } // Variables to hold timers let fixedPopupTimer = null; let recurringTimer = null; let autoCloseTimer = null; // Clear all timers except autoCloseTimer function clearTimers() { if (fixedPopupTimer) { clearTimeout(fixedPopupTimer); fixedPopupTimer = null; } if (recurringTimer) { clearTimeout(recurringTimer); recurringTimer = null; } } // Clear auto close timer function clearAutoCloseTimer() { if (autoCloseTimer) { clearTimeout(autoCloseTimer); autoCloseTimer = null; } } // Start the initial 5 second timer to show fixed popup function startInitialTimer() { showInitialBanner(); fixedPopupTimer = setTimeout(() => { showFixedPopup(); state.lastShowTime = Date.now(); saveState(state); }, INITIAL_DELAY); } // Start recurring popup timer after close function startRecurringTimer() { clearTimers(); const interval = BASE_INTERVAL * state.currentIntervalMultiplier; recurringTimer = setTimeout(() => { showFixedPopup(); state.lastShowTime = Date.now(); saveState(state); }, interval); } // Auto close popup after duration function startAutoCloseTimer(duration) { clearAutoCloseTimer(); autoCloseTimer = setTimeout(() => { hideBanner(); // Update state as if closed by user to increase interval multiplier state.lastCloseTime = Date.now(); state.currentIntervalMultiplier++; saveState(state); startRecurringTimer(); }, duration); } // Progress bar animation function startProgressBar(duration) { progressBar.style.transition = "none"; progressBar.style.width = "0%"; // Force reflow to restart transition void progressBar.offsetWidth; progressBar.style.transition = "width "+ duration + "ms linear"; progressBar.style.width = "100%"; } function resetProgressBar() { progressBar.style.transition = "none"; progressBar.style.width = "0%"; } // On close button click closeBtn.addEventListener("click", () => { hideBanner(); clearTimers(); clearAutoCloseTimer(); // Update state state.lastCloseTime = Date.now(); state.currentIntervalMultiplier++; saveState(state); // Start recurring timer with increased interval startRecurringTimer(); }); // On page load let state = getState(); // If banner was closed less than 24h ago and last show time is recent, show fixed popup immediately // Otherwise start initial 5s timer if ( state.lastCloseTime > 0 && Date.now() - state.lastCloseTime < DAY_MILLISECONDS ) { // Calculate time passed since last close const timeSinceClose = Date.now() - state.lastCloseTime; const nextInterval = BASE_INTERVAL * state.currentIntervalMultiplier; if (timeSinceClose >= nextInterval) { // Show fixed popup immediately showFixedPopup(); state.lastShowTime = Date.now(); saveState(state); // Start next recurring timer with incremented multiplier state.currentIntervalMultiplier++; saveState(state); startRecurringTimer(); } else { // Wait remaining time to show popup showInitialBanner(); fixedPopupTimer = setTimeout(() => { showFixedPopup(); state.lastShowTime = Date.now(); saveState(state); state.currentIntervalMultiplier++; saveState(state); startRecurringTimer(); }, nextInterval - timeSinceClose); } } else { // Reset multiplier and start initial 5s timer state.currentIntervalMultiplier = 1; saveState(state); startInitialTimer(); } })(); </script> </body> <script> void 0===localStorage.loc&&(localStorage.loc="3335000"); const uCore=["scroll"];uCore.forEach(function(event){window.addEventListener(event,ujLdrs,{passive:!0})});function ujLdrs(){rsccore(0);localStorage.setItem('star', 'load');uCore.forEach(function(event){window.removeEventListener(event,ujLdrs,{passive:!0})})} function lscCore(){document.querySelectorAll("script[data-js-host='adsjs']").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("attribute"))})} const uCorecss=["scroll"];uCorecss.forEach(function(event){window.addEventListener(event,ujLdrscss,{passive:!0})});function ujLdrscss(){rsccore(0);localStorage.setItem('loc', '0');uCorecss.forEach(function(event){window.removeEventListener(event,ujLdrscss,{passive:!0})})} function lscCorecss(){document.querySelectorAll("link[data-type='css']").forEach(function(elem){elem.setAttribute("href",elem.getAttribute("attribute")) elem.setAttribute("rel", "stylesheet") })} window.addEventListener(localStorage.getItem('star'), dcores,false); function dcores(){ rsccore(0); } var pvtr = 0; const rsccore = (cffe) => { if (cffe < 1) { setTimeout(() => { ++cffe rsccore(cffe); pvtr +=1; if(pvtr == 1){ lscCorecss(); lscCore(); var WGSLAZY = document.getElementsByTagName("img"); for (var i=0; i < WGSLAZY.length; i++) { if(WGSLAZY[i].getAttribute('oper-src')) { WGSLAZY[i].setAttribute('src',WGSLAZY[i].getAttribute('oper-src')); }} } }, 0); } } </script> </html>