Banerių kūrimas html formatu. HTML5 reklamjuostės: kam jos skirtos ir kaip jas pasidaryti


Banerio kodų generatorius. Sukurti reklamjuostės kodą internete yra paprasta ir nesudėtinga procedūra. Kodėl jums net reikia reklamjuostės jūsų svetainėje?
Svetainėje pridedame reklamjuostę, kad galėtume reklamuoti prekes, paslaugas, reklamuoti prekės ženklą ir parodyti savo produktą.

Pridedame reklamjuostę į svetainę, norėdami reklamuoti prekes, paslaugas, prekės ženklo reklamą ir pan.

Svetainėje patalpindami reklamjuostės kodą norime ką nors paryškinti ir taip patraukti dėmesį.

Kaip praktiškai panaudoti banerius?
Galimi panaudojimai banerių reklama gali būti tiek, kiek norite. Paimkime realaus gyvenimo pavyzdį. Pavyzdžiui, užsiregistravote filialų programa. Kaip šios programos dalį jūs gaunate filialų nuorodos, kurio pagalba galite reklamuoti produktą.

Paprastai kartu su produkto reklama, norėdami padidinti savo pajamas, gaunate nukreipimo nuorodą, kad pritrauktumėte kitus partnerius.

Kaip partnerių programos medžiaga, jums gali būti pateikti paruošti reklamjuosčiai. Taigi, įdėdami reklamjuostės kodą tinkle, pavyzdžiui, savo svetainėje, reklamuojate produktą ir įdarbinate savo partnerius.

Internetinė reklamjuostės kodo gavimo paslauga

Su šiuo generatoriumi galite sukurti ir gauti paruoštą HTML kodą savo mygtukui ar reklamjuostei. Jei negalite patys parašyti kodo, tada užpildę formą vienu paspaudimu gausite paruoštą HTML, kurį galėsite įterpti į svetainės puslapius

Jūsų svetainės adresas

Įvesties pavyzdys: https://site/ įveskite iš https://
Reklamjuostės arba mygtuko vaizdo URL

Įvesties pavyzdys: https://site//moibaneri/1703.gif Patarimas užvedus pelės žymeklį virš reklamjuostės arba mygtuko (pavadinimo)

Iššokančiojo aprašymo pavyzdys: svetainės reklamjuostė apie premijas Reklamjuostės arba mygtuko plotis (plotis)

Įvesties pavyzdys (įveskite tik skaičių

Taip atsitiko, kad man patinka dirbti su CSS kodu, todėl buvo įdomu žemiau padaryti mygtuką, kuris gali būti naudojamas kaip reklamjuostė, tai yra svetainė:


div.sb (teksto įtrauka: 0px; kontūras: 2px vientisas #f4e9ce; kraštinė: 2px vientisas #ddcca2; užpildymas: 4px 3px 3px; fono vaizdas: -moz-linear-gradient(#f4e9ce, #ddcca3); fonas -vaizdas: -webkit-gradient(linijinis, centre viršuje, centre apačioje, nuo(#f4e9ce), iki(#ddcca3)); filtras: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#f4e9ce,endColorStr= #ddcca3); fono vaizdas: -o-linear-gradient(top,#f4e9ce,#ddcca3); aukštis: 65px; plotis: 260px; šriftų šeima: Impact, Arial, Verdana; šrifto dydis: 200%; šriftas -svoris: 100; teksto pakeitimas: didžiosios raidės; šrifto stilius: įstrižas; šrifto svoris: paryškintas; ) span.sb1 (kraštinė apačioje: #ddcca2 5 pikselių vientisa; spalva: #991500; paraštė: 0; teksto šešėlis: -1px -1px balta, 1px 1px #333; plūduriuoti: kairėje; ) span.sb2 (spalva: #ddcca2; paraštė: 11px 0; padėtis: santykinė; teksto šešėlis: 1px 1px 1px #000; plūduriuoti: kairėje; ) Blogger's Cheat Sheet

Kaip sukurti animaciją „Photoshop“.

Tačiau kadangi šis nekenksmingas kodas gali išgąsdinti vartotojus savo simbolių tūriu, o vaizdas nėra dinamiškas, naudodamas programą nufotografavau monitoriaus ekrano dalį šiuo mygtuku, taip paverčiau jį vaizdu. Jūs negalite to naudoti ilgas kelias piešdami paveikslėlį . Tačiau pirmiausia turite nuspręsti dėl būsimos reklamjuostės dydžio. Juos galima rasti banerių tinklas, su kuriuo planuojate dirbti. Manęs neribojo jokios ribos.

Nėra galimybės sukurti sluoksnių vaizdams BMP ir PNG formatais, todėl jums reikia (JPEG ir GIF atveju šį veiksmą praleisime):

1 pav. Perkelkite vaizdą į „Photoshop“.

Dėl to, kad elementus ištrinti lengviau nei baigti piešti, pasirinkdami (2 pav.) dubliuosime mus dominantį sluoksnį.


Tada pasirinkę (žr. mėlyną foną) vieną iš sluoksnių ir nurodę tik ant jo esančią akį, lašintuvu (I) automatiškai nustatome ir nustatome pasirinktą spalvą, o pieštuku (B) pašaliname nereikalingus fragmentus, juos dažydami. į fono paletę. Šios procedūros metu man patinka priartinti nuotraukas: jei žiūrite į 1 pav., tai yra 100%, bet aš rodau į 300%, kad nepaveiktų nereikalingų elementų. Taip pat naudinga funkcija yra sluoksnio skaidrumas (2 pav.).

Tada kiekvienam kadrui dedame akį (akį) tik ant tų sluoksnių, kurie jame turėtų būti rodomi.


O kadrui nustatysime laikotarpį, per kurį vartotojas jį stebės, spustelėdamas pele ant sekundžių.

Reklamjuostė HTML5 yra reklamjuostė, kurioje rodomas tinkintas HTML turinys arba vaizdas. HTML kodas gali būti įprastas HTML puslapis su stiliais ir scenarijais. Jis telpa į iframe ir turi ribotas priėjimasį svetainės turinį.

Naudojant „HTML5 reklamjuostės“ šabloną, reklamjuostę galima pridėti dviem būdais:
1. Paruošę tik vaizdą. Nuorodos, į kurią reikia eiti, buvimas reklamjuostės parametruose reguliuoja vaizdo spustelėjimą.
2. Redagavimo priemonėje parengę HTML skelbimą pagal instrukcijas: arba.
Jei prie reklamjuostės bus pridėtas ir HTML kodas, ir vaizdas, bus rodomas HTML kodas.

Parametrai, kuriuos galima konfigūruoti pridėjus prie ADFOX:
- Reklaminio skydelio plotis, aukštis.
- Nuosavas css stilius reklamjuostės konteineriui.

HTML kūrybos kūrimas

1. Peržiūrėkite HTML kodo reikalavimus

  • Didžiausias leistinas HTML failo dydis yra 65 000 baitų.
  • Pageidautina įdėti JavaScript ir CSS reklamjuostės HTML kode. Jei gautas HTML kodas viršija didžiausią leistiną dydį, turite sumažinti kodą perkeldami JavaScript ir CSS į atskirus failus:
    - išsaugoti js ir css kodasį atskirus failus su plėtiniu .js arba .css;
    - failų svoris neturi viršyti 300 Kb;
    - įkelkite failus į reklaminės kampanijos skirtuką „Failai“ ir įtraukite gautas nuorodas į failus į HTML kodą.

    Js ir css failų sujungimo pavyzdys:

    HTML kodas neleidžia naudoti santykinių failų kelių.

  • Projekte gali būti tik vienas failas su plėtiniu .html.
  • Didžiausias leistinas failų skaičius projekte yra 50;
  • Leidžiami failų tipai projekte: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
  • Maksimalus kiekvieno failo dydis (taip pat taikomas archyve esantiems failams):
    - 300Kb;
    - 1 MB vaizdo failams.
  • Failų pavadinimuose turi būti tik angliškos abėcėlės skaičiai arba raidės ir apatinis brūkšnys. Failo pavadinime neleidžiama naudoti rusiškų raidžių, tarpų, kabučių ir specialiųjų simbolių;
  • Kintamųjų ir objektų pavadinimuose negalima naudoti rusiškų raidžių.
    Vienintelė išimtis yra reklamjuostės tekstas.
  • Baigto projekto formatas yra ZIP archyvas.
Vaizdo reikalavimai

Naudokite didelės raiškos vaizdus, ​​​​tai žymiai pagerins reklamjuostės kokybę mobilusis įrenginys, nors tai sumažins reklamjuostės įkėlimo greitį.

Galite naudoti SVG vaizdus. Jie yra vektoriniai, o tai reiškia, kad jie geriau atrodys visuose įrenginiuose – mobiliuosiuose ir staliniuose kompiuteriuose. Jie taip pat turi mažą failo dydį ir gali būti animuoti.

Priimtini vaizdo formatai: png, gif, jpg, svg.
Maksimalus vieno failo svoris: 300Kb.

2. Pasirinkite redaktorių, kuriame kursite savo HTML skelbimą, ir spustelėkite atitinkamą nuorodą. Paruoškite archyvą su HTML skelbimu pagal instrukcijas:

Adobe Animate CC redaktorius – vieno mygtuko reklamjuostė

Adobe Animate CC Editor – reklamjuostė su keliais mygtukais

1. Atsisiųskite reklamjuostės su keliais mygtukais šabloną

2. Sukurkite HTML5 drobės projektą naudodami „Adobe Animate“ (arba atidarykite esamą)

3. Pridedant mygtukus ar filmo klipus, įterptus į sceną, svarbu suteikti jiems egzemplioriaus pavadinimą, kad galėtumėte pridėti spustelėjimą dešinieji mygtukai. Rekomenduojame naudoti pavadinimus mygtukas 1 - mygtukas 9.

Taip pat žiūrėkite:

Mygtuko pridėjimo ir egzemplioriaus pavadinimo priskyrimo instrukcijos

Mygtukas pagrindinėje scenoje

1. Scenoje sukurkite kokį nors objektą, pavyzdžiui, naudodami Stačiakampio įrankį.
Tada pasirinkite jį ir kontekstinis meniu pasirinkite "Konvertuoti į simbolį..."

2. Atsidariusiame dialogo lange pasirinkite Tipas: Mygtukas, Pavadinimas gali būti paliktas nepakeistas, spustelėkite Gerai.

3. Priskirkite šiam mygtukui egzemplioriaus pavadinimą, kad spustelėjimas veiktų.

4. Įrašykite šio mygtuko kodą skiltyje Veiksmai:

Window.buttons.push(//Parašykite mygtukų kelius atskirdami kableliais, pridėdami tai pradžioje this.button1 //Mygtukų vietos pabaiga);

Įdėtas mygtukas

1. Tarkime, kad mygtukas yra kito simbolio viduje, pavyzdžiui, filmo klipe.
IN šiame pavyzdyješiam filmo klipui suteiktas egzemplioriaus pavadinimas "vardas"

2. Pagal dukart spustelėkite eikite į pavadinimą, bus įdėtas mygtukas.

3. Nurodydami kelią iki tokio mygtuko Veiksmuose, turėsite pridėti objekto egzemplioriaus pavadinimą po šio, kuriame jis įdėtas:

Window.buttons.push(//Parašykite mygtukų kelius atskirdami kableliais, pridėdami tai pradžioje this.name.button1 //Mygtukams skirtos vietos pabaiga);

Skaidrių mygtukų kūrimo instrukcijos

1. Pasirinkite norimą elementą ir paverskite jį simboliu

2. Įveskite pavadinimą ir pasirinkite Type: Button

3. Dukart spustelėkite simbolį, kad pereitumėte prie jo:

4. Įdėkite pagrindinį kadrą į paspaudimo kadrą

5. Pašalinkite aukštyn, virš, žemyn esančių rėmelių turinį

6. Skaidrus mygtukas paruoštas:

4. Prie projekto pridėkite veiksmų sluoksnį (prie jo pridėsime mygtukų kodą)

5. Atidarykite langą kodui įrašyti

Window.buttons.push(//Parašykite mygtukų kelius, atskirtus kableliais, pridedant tai pradžioje //Mygtukams skirtos vietos pabaiga); setAdfox();

Jei mygtukas yra pagrindinėje scenoje, tada, pavyzdžiui, iškart po jo parašykite jo egzemplioriaus pavadinimą

Šis.mygtukas1

Jei mygtukas yra įdėtoje scenoje, tada po to pirmiausia parašykite scenos egzemplioriaus pavadinimą, o tada mygtuko egzemplioriaus pavadinimą:

This.scene_instance_name.button2

Galutinio kodo veiksmų sluoksnyje pavyzdys:

Window.buttons.push(//Parašykite kableliais atskirtų mygtukų kelius, pridėdami tai this.button1, this.scene_instance_name.button2 //Mygtukams skirtos vietos pabaiga pradžioje); setAdfox();

7. Pirmasis mygtukas kodo eilutėje iškvies pirmąją nuorodą iš ADFOX, antrasis - antroji ir pan.

Kartu su HTML skelbimu pateikite valdytojui, kuris pridės reklamjuostę prie ADFOX, informaciją apie mygtukų ir nuorodų numerių atitikimą.

8. Atidarykite publikavimo parinktis ir prijunkite šabloną iš pirmo taško ir paskelbkite projektą pasirinkdami norimą katalogą.

9. Paskelbę projektą suarchyvuokite jį .zip formatu. Jūsų skelbimas paruoštas įkelti į ADFOX reklamjuostę.

Google Web Designer redaktorius

Šios reklamjuostės kodas gali būti naudojamas kaip pagrindas kuriant skelbimus redaktoriuje.

Šablone yra scenarijus adfox_HTML5.js ir parametrų rinkinys teisingas veikimas perėjimai ir įvykių skaičiavimas:
%reference%, %user1%, %eventN%, kur N yra įvykio numeris nuo 1 iki 30.

2. Spustelėkite apdorojimas.

Visi įvykiai priskiriami konkretiems animacijos elementams skirtuke Įvykiai.


Interaktyviosios srities komponentas naudojamas veiksmams iškviesti.
Pridėkite jį ir pasirinkite įvykį Touch Area → Touch/Click (arba „Tap Area > Touch/Click“ angliškoje versijoje).


Skirtuke „Pasirinktinis kodas“ nurodykite paspaudimo funkcijos iškvietimą.

2.1 Jei naudojamas vienas šuolio mygtukas:

CallClick();

2.2 Jei yra keli perėjimo mygtukai:

CallClick(n);

kur n

2.3 Jei reikia suaktyvinti įvykį iš animacijos be perėjimo, naudokite šį kodą:

CallEvent(n);

kur n yra įvykio, kurį reikia iškviesti, numeris.



Tempimo (guminio) reklamjuostės įgyvendinimo bruožas.

Kad reklamjuostė nusidriektų per visą konteinerio, kuriame jis bus, plotį svetainėje, skydelyje Savybės Padėčiai ir matmenims nurodykite procentus, o ne pikselius.

Taip pat naudokite parinktis „Lygiuoti su sudėtiniu rodiniu“ Ir "Gumos išdėstymas" viršutinėje įrankių juostoje.
Jei įgalinsite sklandų išdėstymą prieš naudodami bet kokius lygiavimo įrankius, tada, kai pakeisite pirminio sudėtinio rodinio dydį, visi elementai bus sulygiuoti vienas su kitu ir pagal sudėtinio rodinio matmenis.
Tokiu atveju vienu metu galite naudoti ir santykinius elementų dydžius procentais, ir absoliučius dydžius pikseliais.

4. Projekto publikavimas.

Pridėdamas reklamjuostę prie ADFOX, vadovas turės žinoti mygtukų ir įvykių numerių atitiktį. Kiekvienam įvykiui vadovas parašys savo nuorodą, į kurią bus galima pereiti, kuri vėliau bus perduota į reklamjuostės kodą naudojant kintamąjį.

Paskelbę projektą supakuokite jį .zip formatu. Jūsų skelbimas paruoštas įkelti į ADFOX reklamjuostę.

Kiti redaktoriai

1. Reklamjuostės paspaudimų skaičiavimas

Kad ADFOX galėtų apskaičiuoti reklamjuostės paspaudimų statistiką, žymoje esančiame HTML kode ir href atribute turite įrašyti kintamąjį:

%banner.reference_user1%

Taip pat nuorodoms naudokite tikslinį atributą su kintamuoju %banner.target% atributo vertėje.
Jei atributo trūksta, nuoroda atsidarys iframe viduje, tai yra, reklamuojama svetainė atsidarys reklamjuostės erdvėje.

HTML kodo pavyzdys reklamjuostės paspaudimams skaičiuoti:

Reklamuotojo svetainė

Reklamjuosčių, kurios bus įdėtos, HTML kode mobiliosios programos, norėdami skaičiuoti paspaudimus, naudokite makrokomandą: %reference%@%banner.user1%

2. Paspaudimų iš kelių reklamjuosčių nuorodų skaičiavimas

Tarkime, reklamjuostė turi kelias nuorodas, kurias reikia sekti, nukreipiančias į skirtingus reklamuojamos svetainės puslapius, ir kiekvienam iš jų reikia gauti paspaudimų skaičių.

Pirma nuoroda Antroji nuoroda

Pakeiskite href atributo reikšmes kintamaisiais %request.reference%@%banner.eventN% , kur N turėtų būti įvykio numeris nuo 1 iki 28.
Pavyzdžiui:

Pirma nuoroda Antroji nuoroda

Apie nuorodų ir kintamųjų atitiktį reikia pranešti vadybininkui, kuris prideda reklamjuostę prie ADFOX. Kadangi pridėdami reklamjuostę turėsite nurodyti pirmąją 1 įvykio nuorodą, o antrąją 2 įvykio nuorodą.

Reklamjuostės pridėjimas ADFOX

Norėdami pridėti reklamjuostę ADFOX, pasirinkite norimą reklamjuostės tipą ir šabloną „Reklamjuostė HTML5“.

Nurodykite reklamjuostės parametrus:

Archyvas su HTML5 skelbimu – įkelkite .zip archyvą su projektu, laukas „HTML5 kūrybos kodas“ turi likti tuščias (pridėjus reklamjuostę jis bus užpildytas jūsų projekto .html failo turiniu).

HTML5 kūrybos kodas – įkelkite ZIP archyvą su projektu, paruoštu HTML redaktoriuose arba įklijuokite HTML kodą.

Jei reklamjuostėje yra kelios nuorodos, pridėkite jas reklamjuostės skirtuke Įvykiai, perėjimo URL laukuose.
Pasiteiraukite nuorodų numerių ir įvykių atitikimo HTML skelbimų kūrėjams.

Nuoroda į matavimo pikselį – pagal numatytuosius nustatymus naudojamas ADFOX pikselis //banners.adfox.ru/transparent.gif, jei reikia sekti parodymus trečiosios šalies sistemoje, ištrinkite ADFOX pikselį ir nurodykite kitą nuorodą.

Reklamos plotis (px arba %) – nurodykite reklamjuostės plotį.

Kūrinio aukštis (px arba %) – nurodykite reklamjuostės aukštį.

Vaizdas – įkelkite vaizdą.
Skelbimų rodymo sąlygos:
- Pridėtas HTML kodas ir vaizdas - bus rodomas HTML kodas.
- vaizdas pridėtas - vaizdas bus rodomas.
- Pridėtas HTML kodas - bus rodomas HTML kodas.

Reklamjuostės konteinerio klasės atributo pavadinimas – nurodykite reklamjuostės konteinerio klasės atributo pavadinimą (arba kelis pavadinimus, atskirtus tarpu).

Naudokite „SafeFrame“ (taip|ne) – „safeFrame“ yra technologija, kuri apvynioja reklamą į specialų „iframe“, turintį griežtą API. „SafeFrame“ neleidžia jame pateikiamiems skelbimams rinkti duomenų ir sąveikauti su likusia puslapio dalimi už „safeFrame“ ribų.
taip – ​​įjungti safeFrame naudojimą ir uždrausti prieigą prie tinklalapio;
ne – neįjungti safeFrame. Reklaminės juostos kodas turi prieigą prie tinklalapio.

Reklamjuosčių bloko stiliai – tinkinti reklamjuostės konteinerio stiliai vienoje eilutėje. Be stiliaus: ekranas. Pavyzdžiui, „kraštinė: 1 piks. vientisa raudona;“. Neteisingas reikšmes naršyklė atmes.

Slankiojantis blokas (arba kaip jis dar vadinamas judantis, fiksuotas, lipnus) reikalingas svetainėje, kad vartotojas, slinkdamas puslapiu, matytų vieną stacionarų elementą, kuriame dažniausiai dedama reklama (anonsai, baneriai ar kontekstas) .

Deja, Adsense taisyklės draudžia tai daryti. Tačiau daugelis svetainių savininkų nepaiso taisyklių, rizikuodami. Galbūt jie už tai net nebaudžiami, bet rizikuoti nepatarčiau.

Į tokius YAN blokus dedu savo tizerius/banerius, o kartais vietoj reklamos rodau ten panašius įrašus ar kokią lankytojui naudingą informaciją.

Papasakosime, kaip galite sukurti slankią bloką savo svetainėje.

Užduotis: padaryti paskutinį bloką šoniniame stulpelyje (šoninėje juostoje) slankiojantį. Be to, kad jis priliptų tik tuo metu, kai vartotojas jį pasiekia slinkdamas, o ne iškart atidarius puslapį. Be to, blokas turi „prilipti“ pasiekęs poraštę (t. y. jos neuždengti).

Labiausiai veikiantis būdas

Yra daug galimybių įdiegti lipnų bloką, tačiau ne visi jie veikia tinkamai. Aš tau pasakysiu iš Asmeninė patirtis: tas pats bloko įrengimo būdas gali veikti vienoje svetainėje, bet kitoje atsiras staktos.

Žemiau pateikiamas slankiojo bloko, kuris veikė beveik visose svetainėse, kuriose jį įdiegiau, pavyzdys. Jambų nebuvo. Variklis taip pat nėra svarbus (DLE, WordPress, LiveStreet ir kt.).

Norimoje šoninio stulpelio vietoje įklijuokite šį HTML kodą:

$(langas).scroll(function() (
var sb_m = 20 ; /* užpildas viršuje ir apačioje */
var mb = 300; / * rūsio aukštis su parašte */
var st = $(langas).scrollTop() ;
var sb = $(".lipnus blokas" ) ;
var sbi = $(".sticky-block .inner" ) ;
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.aukštis();

If(sb_h + $(document).scrollTop() + sb_m + mb< $(document) .height () ) {
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(( "paddingTop" : h) );
}
Kitas(
sb.css(( "paddingTop" : 0 ) );
}
}
} ) ;

Šiame kode galite nustatyti paminkštinimą viršuje, apačioje, taip pat savo poraštės aukštį, t.y. aukštis, kuriame blokas turi sustoti.

Dabar prijungkime JS. Norėdami tai padaryti, skiltyje HEAD parašykite:

Lengviausias būdas (skirta „WordPress“)

Taip pat saugus metodas, bet įdiegus papildinį. Veikia be staktų.

Privalumai:

  • nereikia suprasti/suprasti HTML;
  • montavimo paprastumas ir greitis.

Trūkumai:

  • nėra lankstus. Visas valdiklis (įskaitant pavadinimą ir dizainą) tampa plaukiojantis. Tarkime, bus sunku padaryti šį bloką kitos spalvos ar dydžio.
  • Kaip naudoti:

  • Atsisiųskite papildinį.
  • Montuojame.
  • Aktyvuokime.
  • Eikite į administratoriaus skydelį skirtuke: Dizainas -> Valdikliai. Atidarykite valdiklį, kurį norime pataisyti.
  • Pažymėkite langelį šalia „Pataisyti valdiklį“ ir spustelėkite mygtuką „Išsaugoti“.
  • Kiti stumdomų blokų diegimo būdai

    Jie man atrodė ne tokie patogūs ir ne tokie aiškūs kaip du aukščiau pateikti metodai. Bet vis tiek papasakosiu apie juos.

    1 variantas (be „jQuery“)

    Įdėkite į šoninę juostą:

    Stilius rašome HTML (geriau juos pridėti tiesiai į CSS):


    .lipnus(
    padėtis: fiksuota;
    z indeksas: 101;
    }
    .sustabdyti(
    padėtis: santykinė;
    z indeksas: 101;
    }

    Dabar į puslapį pridedame patį scenarijų (geriau jį įdėti į atskirą failą, kaip ir „Daugiausia darbo metodo“):


    (funkcija() (
    var a = document.querySelector("#šalyje1" ) , b = null, P = 0 ; // jei nulis pakeičiamas skaičiumi, blokas išliks, kol viršutinis naršyklės lango kraštas pasieks viršutinį elemento kraštą. Gali būti neigiamas skaičius
    window.addEventListener("scroll" , Scroll, false) ;
    document.body.addEventListener("scroll" , Scroll, false) ;
    function Ascroll() (
    if (b == null) (
    var Sa = getComputedStyle(a, "" ) , s = "" ;
    for (var i = 0 ; i< Sa.length; i++) {
    if (Sa[ i].indexOf("dėžutės dydžio" ) == 0 || Sa[ i].indexOf("perpildymas" ) == 0 || Sa[ i].indexOf("width" ) == 0 || Sa[ i].indexOf("padding" ) == 0 || Sa[ i].indexOf("border" ) == 0 || Sa[ i].indexOf("outline" ) == 0 || Sa[ i].indexOf("box-shadow" ) == 0 || Sa[ i].indexOf("fonas" ) == 0 ) (
    s += Sa[ i] + ": " +Sa.getPropertyValue(Sa[ i] ) + "; "
    }
    }
    a.innerHTML = "" +a.innerHTML+"" ;
    b = a.vaikai[ 0 ] ;
    a.style .height = b.getBoundingClientRect() .height + "px" ;
    a.style .padding = "0" ;
    a.style .border = "0" ;
    }
    var Ra = a.getBoundingClientRect() ,
    R = Math.round(Ra.top + b.getBoundingClientRect() .height - document.querySelector("footer" ) .getBoundingClientRect() .top + 0 ) ; // bloko parinkiklis, kurio viršutinį kraštą pasiekus reikia atsegti lipnųjį elementą; Math.round() skirtas tik IE; jei nulis pakeičiamas skaičiumi, blokas prilips, kol apatinis elemento kraštas pasieks poraštę
    jei ((Ra.top – P)

    < / iframe >

    < / div >

    Ir čia yra CSS:

    /* numatytasis aukštis */ #skelbimas (aukštis:60px; ) @tik medijos ekranas ir (aukštis:90px) ( /* 90 pikselių aukščio */ #skelbimas (aukštis:90px; ) ) @tik medijos ekranas ir (aukštis:125px) ) ( /* 125 pikselių aukščio */ #skelbimas ( aukštis: 125 pikseliai; ) )

    /* numatytasis aukštis */

    #Reklama (

    aukštis: 60px;

    @media tik ekranas ir (aukštis: 90 piks.) (

    /* 90 pikselių aukščio */

    #Reklama (

    aukštis: 90 pikselių;

    @media tik ekranas ir (aukštis: 125 piks.) (

    /* 125 pikselių aukščio */

    #Reklama (

    aukštis: 125px;

    Stebėkite parodymus ir paspaudimus

    Geriausias dalykas HTML5 skelbimuose yra tai, kad juos galima sekti naudojant Google Analizė, kaip ir įprastose svetainėse.

    Dalintis