NatijalarSozlamalar
← Reklama va hamkorlik

Reklama beruvchilar uchun

Banner reklama talablari

Banner qayerda ko‘rinishi, qanday o‘lcham va formatda tayyorlanishi, HTML5 banner qoidalari va tayyor jonli namunalar. Materialni yuborishdan oldin pastdagi tekshiruv ro‘yxatidan o‘ting.

Manba: https://oliygoh.uz/reklama/banner-talablari

1. Joylashuv xaritasi

  • Joy oldindan zahiralanadi — banner yuklanguncha sahifa siljimaydi (nisbat bo‘yicha o‘lcham ajratiladi).
  • Rasm slotni kenglik bo‘yicha to‘ldiradi (object-fit: cover). Nisbat joydan ~15% gacha farq qilsa, rasm chetlaridan biroz kesiladi. Shuning uchun muhim matn va logo chetlardan kamida 5% ichkarida (xavfsiz zona) bo‘lsin.
  • Kenglik: desktopda konteyner kengligi 1168 px gacha; mobil ko‘rinish — ekran kengligi minus chetlar (390 px ekranda ~358 px).
  • Mobil rasm (image_mobile) alohida yuklanadi va 768 px dan tor ekranlarda ko‘rsatiladi. Yuklanmasa desktop rasm ishlatiladi.
#Joy (slug)QayerdaDesktopMobilTavsiya etilgan o‘lcham
1Yuqori banneroliygoh_topHar sahifada, menyudan keyin — sahifa ochilishi bilan birinchi ko‘rinadi (eng ko‘p ko‘rinadigan joy)7:13:2desktop 2100×300 pxmobil 1080×720 px
2Yon paneloliygoh_sidebarMaqola, maqolalar ro‘yxati va OTM sahifalarining yon paneli (hamkor OTM sahifasida bu joy yo‘q)2:13:2desktop 800×400 pxmobil 1080×720 px
3Maqola ichidaoliygoh_postMaqola sahifasida, sarlavha rasmi tagida va matn boshlanishidan oldin5:13:2desktop 1500×300 pxmobil 1080×720 px
4Pastki banneroliygoh_footerHar sahifada, sahifa oxirida (footer ustida)7:13:2desktop 2100×300 pxmobil 1080×720 px
5Sticky bannerbottom_stickyEkran pastiga yopishgan (pastdan 6px ajralgan, burchaklari yumaloq), kontent kengligida, balandligi desktopda 120px, mobilda 80px (mobilda eni ekran kengligida, pastdan va yonlardan 5px bo‘shliq bilan); ichiga istalgan HTML yoki banner qo‘yiladi. “Reklama” belgisi va × tugmasini sayt o‘zi qo‘yadi (yopilsa 3 soat qaytmaydi)39:44:1desktop 2340×240 pxmobil 960×240 px

2. Rasm banner talablari

Fayl

  • Format: JPG, PNG yoki WebP (tavsiya: JPG yoki WebP).
  • Hajm: tavsiya ≤ 300 KB (bu tavsiya, qat’iy chegara emas).
  • Desktop rasm kengligi kamida 1600 px. Sayt 800 / 1200 / 1600 px, mobil uchun 480 / 720 px kichraytirilgan variantlarni o‘zi tayyorlaydi; asl fayl eng kattasi bo‘lsin.
  • Desktop va mobil uchun alohida rasm tayyorlang (o‘lchamlar yuqoridagi jadvalda).

Mazmun

  • Matn o‘qiladigan, kontrast yetarli bo‘lsin; mayda yozuvlardan qoching.
  • “Reklama” yorlig‘ini sayt o‘zi qo‘yadi — rasmga yozish shart emas.
  • Havola — https URL, alohida maydonda beriladi (UTM teglari tavsiya etiladi).
  • Muhim element chetlardan kamida 5% ichkarida.

Galereya rejimi

  • Bir joyda bir nechta rasm (maksimal 12 ta) 4 soniyadan aylanadi.
  • Hammasi bir xil nisbatda bo‘lsin.
  • Birinchi rasm eng muhimi — ko‘rsatilgan balandlikni aynan u belgilaydi.

3. HTML5 banner talablari

HTML5 banner — zip fayl emas. Admin paneldagi “Kod” (desktop) va “Kod mobil” maydoniga HTML + CSS + JS bitta parcha qilib qo‘yiladi (maksimal 200 000 belgi). Rasm, shrift va videolar tashqi manzildan — faqat https absolyut URL (nisbiy yo‘l ishlamaydi).

Sandbox: nima mumkin, nima taqiqlangan

Sayt bannerni cheklangan sandbox iframe ichida chizadi.

Ruxsat

  • Skriptlar (JS) ishlaydi.
  • Havolalar yangi oynada ochiladi (<base target="_blank"> avtomatik).
  • Har bir <a href> bosilishi avtomatik hisoblanadi (klik statistikasi) — alohida hisoblagich kodi yozish shart emas.

Taqiq

  • Sahifa DOM’iga kirish.
  • Cookie va localStorage.
  • Forma yuborish.
  • Top-navigatsiya (window.top.location).
  • alert / confirm oynalari.
  • Fullscreen va avtomatik ovoz.

Ildiz element va balandlik

Eng tashqi elementga data-oliygoh-banner atributini qo‘ying: balandlik shu elementdan o‘lchanadi (atribut bo‘lmasa — body balandligi). Balandlik iframe’dan sahifaga avtomatik uzatiladi (ResizeObserver) va joy shunga moslashadi; maksimum 1200 px.

Kenglik va nisbat

  • Banner slot kengligiga cho‘ziladi (fluid): qat’iy px kenglik bermang — width:100%, flex, grid yoki container query ishlating.
  • Balandlikni nisbat bilan bering (aspect-ratio): desktop kodi joy nisbatiga mos (masalan 7/1), mobil kodi (“Kod mobil”) 3/2 ga mos.
  • Bitta kod ikkala qurilmada ham ishlashi mumkin (container yoki media query) — 3-namunaga qarang.

Sticky bannerni yopish

Sticky joyda “Reklama” belgisi va “×” tugmasini sayt o‘zi qo‘yadi (kontent kengligidagi, balandligi 120px panel). Bannerning ichiga o‘z “×” tugmangizni va position:fixed stillarini qo‘shmang. “×” bosilsa joy 3 soat qayta ko‘rsatilmaydi.

Tavsiyalar

  • Tizim shriftlari yoki https orqali shrift ishlating.
  • Animatsiya ≤ 15–30 soniya; CSS animatsiya JS dan afzal (CPU ni yormaydi).
  • prefers-reduced-motion ga hurmat qiling.
  • Inline kod ≤ 150 KB, tashqi aktivlar yengil bo‘lsin.
  • Tashqi trekerlar, iframe va popup bo‘lmasin; kontrast yetarli bo‘lsin.

4. HTML5 namunalar (jonli)

Namunalar saytdagi haqiqiy ishlab chiqarish o‘rami bilan (xuddi shu sandbox iframe va bridge) chiziladi — ko‘rganingiz saytda chiqadigan natija. Brend — “Sizning brend”, havolalar — example.com; tashqi so‘rov yo‘q. Ko‘rsatilgan kod admin paneldagi maydonga qo‘yiladigan parcha.

1. Oddiy matnli banner

7/1 · yuqori/pastki

Bridge: kutilmoqda…

Nima ko‘rsatadi: Gradient fon, sarlavha va tugma. Statik, animatsiyasiz — eng yengil variant. Mobilda qo‘shimcha matn yashirinadi.

HTML faylni yuklab olish
<style>
  .sb{box-sizing:border-box;width:100%;aspect-ratio:7/1;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 5%;background:linear-gradient(120deg,#1a6be0,#6a3df0);color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
  .sb b{display:block;font-size:clamp(14px,2.3vw,26px);line-height:1.15}
  .sb span{display:block;margin-top:4px;font-size:clamp(11px,1.4vw,15px);opacity:.92}
  .sb a{flex:none;padding:.6em 1.25em;border-radius:999px;background:#fff;color:#1a3fa8;font-weight:700;font-size:clamp(12px,1.5vw,16px);text-decoration:none}
  @media (max-width:480px){.sb span{display:none}}
</style>
<div class="sb" data-oliygoh-banner>
  <div><b>Sizning brend — qabul 2027</b><span>Grant va chegirmalar haqida bilib oling</span></div>
  <a href="https://example.com/?utm_source=oliygoh&utm_medium=banner&utm_campaign=qabul2027">Batafsil</a>
</div>

2. Animatsiyali (CSS) banner

7/1 · yuqori/pastki

Bridge: kutilmoqda…

Nima ko‘rsatadi: Sarlavha 3 ta qatorni almashtirib turadi (faqat CSS, JS yo‘q). Animatsiya 18 soniya o‘ynaydi va oxirgi qatorda to‘xtaydi; prefers-reduced-motion yoqilgan bo‘lsa darhol oxirgi qator ko‘rinadi.

HTML faylni yuklab olish
<style>
  .sa{box-sizing:border-box;width:100%;aspect-ratio:7/1;min-height:64px;overflow:hidden;display:flex;align-items:center;gap:16px;padding:0 5%;background:linear-gradient(110deg,#0f1b33,#1a4fa8,#0f1b33);background-size:200% 100%;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;animation:sa-bg 9s ease-in-out 2 alternate}
  .sa-t{position:relative;flex:1;min-width:0;height:1.4em;font-size:clamp(14px,2.5vw,28px);font-weight:800;line-height:1.4}
  .sa-t span{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;animation:sa-line 6s both}
  .sa-t span:nth-child(2){animation-delay:6s}
  .sa-t span:nth-child(3){animation:sa-last 6s 12s both}
  .sa a{flex:none;padding:.6em 1.25em;border-radius:999px;background:#ffc93c;color:#2b1d00;font-weight:700;font-size:clamp(12px,1.5vw,16px);text-decoration:none}
  @keyframes sa-line{0%{opacity:0;transform:translateY(8px)}10%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
  @keyframes sa-last{0%{opacity:0;transform:translateY(8px)}15%,100%{opacity:1;transform:none}}
  @keyframes sa-bg{to{background-position:-100% 0}}
  @media (prefers-reduced-motion:reduce){.sa,.sa-t span{animation:none}.sa-t span:nth-child(3){opacity:1}}
</style>
<div class="sa" data-oliygoh-banner>
  <div class="sa-t"><span>Sizning brend — qabul 2027</span><span>Grant va chegirmalar</span><span>Hujjat topshirish davom etmoqda</span></div>
  <a href="https://example.com/?utm_source=oliygoh&utm_medium=banner&utm_campaign=animatsiya">Ko‘rish</a>
</div>

3. Adaptiv — bitta kod ikkala qurilmada

7/1 desktop · 3/2 mobil

Bridge: kutilmoqda…

Nima ko‘rsatadi: Container query: kenglik 560 px dan kam bo‘lsa banner 3/2 nisbatli ustun maketga o‘tadi. Ildiz elementga data-oliygoh-banner qo‘yilgan — balandlik shundan o‘lchanadi.

HTML faylni yuklab olish
<style>
  .sc{container-type:inline-size;width:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
  .sc-in{box-sizing:border-box;width:100%;aspect-ratio:7/1;min-height:64px;display:flex;align-items:center;gap:16px;padding:0 5%;background:#f1f6ff;color:#0f1b33;border:1px solid #c9dcff}
  .sc-logo{flex:none;width:clamp(36px,5cqw,56px);aspect-ratio:1;border-radius:12px;background:#1a6be0;color:#fff;display:grid;place-items:center;font-weight:800;font-size:clamp(14px,2cqw,22px)}
  .sc-tx{flex:1;min-width:0}
  .sc-tx b{display:block;font-size:clamp(14px,2.2cqw,24px);line-height:1.2}
  .sc-tx span{display:block;margin-top:2px;font-size:clamp(12px,1.4cqw,15px);color:#3a4a68}
  .sc-in a{flex:none;padding:.65em 1.3em;border-radius:12px;background:#1a6be0;color:#fff;font-weight:700;text-decoration:none}
  @container (max-width:560px){
    .sc-in{aspect-ratio:3/2;flex-direction:column;justify-content:center;text-align:center;gap:10px}
    .sc-logo{width:56px;font-size:22px}
    .sc-tx b{font-size:20px}
  }
</style>
<div class="sc" data-oliygoh-banner>
  <div class="sc-in">
    <div class="sc-logo">SB</div>
    <div class="sc-tx"><b>Sizning brend — ochiq eshiklar kuni</b><span>Ro‘yxatdan o‘ting va sovg‘a oling</span></div>
    <a href="https://example.com/?utm_source=oliygoh&utm_medium=banner&utm_campaign=adaptiv">Ro‘yxatdan o‘tish</a>
  </div>
</div>

4. Sticky banner — yopish tugmasi bilan

12/1 desktop · 4/1 mobil

Bridge: kutilmoqda…

Nima ko‘rsatadi: Eslatma: sticky joyda “×” tugmasini endi sayt o‘zi qo‘yadi (3 soat qaytmaydi), banner ichida o‘z “×” tugmasi kerak emas. Bu namuna eski ko‘rinishni ko‘rsatadi.

HTML faylni yuklab olish
<style>
  .sx{container-type:inline-size;width:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
  .sx[data-hidden="1"]{display:none}
  .sx-in{position:relative;box-sizing:border-box;width:100%;aspect-ratio:12/1;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 52px 0 4%;background:#12233f;color:#fff}
  .sx-in b{font-size:clamp(13px,1.8cqw,20px)}
  .sx-in a{flex:none;padding:.5em 1.1em;border-radius:999px;background:#ffc93c;color:#2b1d00;font-weight:700;font-size:14px;text-decoration:none}
  .sx-x{position:absolute;top:6px;right:8px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:18px;line-height:1;cursor:pointer}
  @container (max-width:600px){.sx-in{aspect-ratio:4/1;padding-left:4%}}
</style>
<div class="sx" data-oliygoh-banner>
  <div class="sx-in">
    <b>Sizning brend — qabul davom etmoqda</b>
    <a href="https://example.com/?utm_source=oliygoh&utm_medium=banner&utm_campaign=sticky">Batafsil</a>
    <button class="sx-x" id="sx-x" type="button" aria-label="Yopish">×</button>
  </div>
</div>
<script>
  document.getElementById("sx-x").addEventListener("click", function () {
    document.querySelector("[data-oliygoh-banner]").setAttribute("data-hidden", "1");
  });
</script>

Jonli namunalar chop etilgan nusxada ko‘rsatilmaydi — ularni onlayn sahifada ko‘ring: https://oliygoh.uz/reklama/banner-talablari#namunalar

5. Qabul tekshiruv ro‘yxati

Materialni yuborishdan oldin belgilab chiqing.

Savol bormi? Material tayyormi?

Banner, havola va kampaniya muddatini yuboring — tekshirib, joylashtirishni kelishamiz.

@Oliygoh_admin
↑↓ tanlashEnter ochishEsc yopish