Generator de coduri banner. Crearea unui cod banner online este o procedură simplă și simplă. De ce ai nevoie chiar de un banner pe site-ul tău?
Adăugăm un banner pe site pentru a face publicitate pentru bunuri, servicii, pentru a promova un brand și pentru a vă prezenta produsul.
Adăugăm un banner pe site pentru a face publicitate bunurilor, serviciilor, promovării mărcii și așa mai departe.
Prin plasarea codului banner pe site, dorim să evidențiem ceva, atrăgând astfel atenția.
Cum pot fi folosite practic bannerele?
Utilizări posibile banner publicitar pot fi câte vrei. Să luăm un exemplu din viața reală. De exemplu, v-ați înregistrat în Program de afiliere. Ca parte a acestui program, primești link-uri afiliate, cu ajutorul căruia poți promova un produs.
De regulă, împreună cu promovarea produsului, pentru a vă crește veniturile, primiți un link de recomandare pentru a atrage alți parteneri.
Ca materiale în programul de afiliere, vi se pot pune la dispoziție bannere gata făcute. Astfel, prin plasarea codului banner în rețea, de exemplu pe site-ul dvs., faceți publicitate produsului și vă recrutați proprii parteneri.
Serviciu online pentru primirea unui cod bannerCu acest generator puteți crea și primi cod HTML gata făcut pentru butonul sau bannerul dvs. Dacă nu puteți scrie singur codul, atunci prin completarea formularului veți primi HTML gata făcut cu un singur clic, care poate fi inserat în paginile site-ului
|
Se întâmplă că îmi place să lucrez cu codul CSS, așa că a fost interesant să fac mai jos un buton care să poată fi folosit ca banner, adică un site web:
div.sb ( text-indent: 0px; contur: 2px solid #f4e9ce; chenar: 2px solid #ddcca2; umplutură: 4px 3px 0px 3px; imagine de fundal: -moz-linear-gradient(#f4e9ce, #ddcca3); fundal -imagine: -webkit-gradient(liniar, centru sus, centru jos, de la (#f4e9ce), la (#ddcca3)); filtru: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#f4e9ce,endColorStr= #ddcca3); imagine de fundal: -o-linear-gradient(sus,#f4e9ce,#ddcca3); înălțime: 65px; lățime: 260px; font-family: Impact, Arial, Verdana; dimensiunea fontului: 200%; font -greutate: 100; text-transform: majuscule; stil font: oblic; greutate font: bold; ) span.sb1 ( chenar-jos: #ddcca2 5px solid; culoare: #991500; margine: 0; text-shadow: -1px -1px alb, 1px 1px #333; float: stânga; ) span.sb2 ( culoare: #ddcca2; margine: 11px 0; poziție: relativ; text-shadow: 1px 1px 1px #000; float: stânga; ) Blogger's Cheat Sheet
Dar, deoarece acest cod inofensiv poate speria utilizatorii cu volumul său de caractere, iar imaginea nu este dinamică, folosind programul am fotografiat o secțiune a ecranului monitorului cu acest buton, transformând-o astfel într-o imagine. Nu puteți folosi acest lucru un drum lung prin desenarea unui tablou în . Dar mai întâi trebuie să decideți cu privire la dimensiunea viitorului banner. Ele pot fi găsite în rețea de bannere, cu care intenționați să lucrați. Nu am fost limitat de niciun fel de granițe.
- "Animaţie",
- „Straturi” ( tastă rapidă F7),
- „Unelte”.
Nu există nicio modalitate de a crea straturi pentru imagini în formatele BMP și PNG, așa că trebuie să (pentru JPEG și GIF sărim peste acest pas):
 |
| Fig.1 Transferați imaginea în Photoshop. |
Datorita faptului ca este mai usor sa stergem elemente decat sa terminam desenul, vom duplica, selectand (Fig. 2), stratul care ne intereseaza.
Apoi, după ce am selectat (vezi fundalul albastru) unul dintre straturi și indicând doar ochiul pe acesta, folosim pipeta (I) pentru a determina și a seta automat culoarea selectată, iar creionul (B) pentru a elimina fragmentele inutile prin pictarea lor. în paleta de fundal. În timpul acestei proceduri, îmi place să măresc fotografiile: dacă te uiți la Fig. 1, este 100%, dar arăt spre 300% pentru a nu afecta elementele inutile. De asemenea functie utila este transparența stratului (Fig. 2).
Apoi pentru fiecare cadru punem un ochi (ochi) doar pe acele straturi care ar trebui să fie afișate pe el.
Și vom seta pentru cadru perioada de timp în care utilizatorul îl va observa, făcând clic cu mouse-ul pe secunde.
Banner HTML5 este un banner care afișează conținut HTML personalizat sau o imagine. Codul HTML poate fi cel obișnuit Pagina HTML cu stiluri și scenarii. Se potrivește într-un iframe și are acces limitat la conținutul site-ului.
Folosind șablonul „Banner HTML5”, un banner poate fi adăugat în două moduri:
1. Avand pregatit doar imaginea. Prezența unui link la care să accesați în parametrii bannerului reglează posibilitatea de a face clic pe imagine.
2. După pregătirea reclamei HTML în editor conform instrucțiunilor: sau.
Dacă în banner sunt adăugate atât codul HTML, cât și o imagine, codul HTML va fi afișat.
Parametri configurabili atunci când sunt adăugați la ADFOX:
- Lățimea, înălțimea bannerului.
- Stiluri proprii CSS pentru containerul banner.
1. Examinați cerințele codului HTML
- Dimensiunea maximă permisă a fișierului HTML este de 65.000 de octeți.
- Este de preferat să plasați JavaScript și CSS în codul HTML al bannerului. Dacă codul HTML rezultat depășește dimensiunea maximă permisă, atunci trebuie să reduceți codul mutând JavaScript și CSS în fișiere separate:
- salvați js și cod cssîn fișiere separate cu extensia .js sau .css;
- fișierele nu trebuie să depășească 300Kb în greutate;
- încărcați fișierele în fila „Fișiere” a campaniei de publicitate și includeți linkurile rezultate către fișiere în codul HTML.Exemplu de conectare a fișierelor js și css:
Codul HTML nu permite utilizarea căilor de fișiere relative.
- Un proiect poate conține un singur fișier cu extensia .html.
- Numărul maxim permis de fișiere într-un proiect este de 50;
- Tipuri de fișiere permise în proiect: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
- Dimensiunea maximă a fiecărui fișier (se aplică și fișierelor din arhivă):
- 300Kb;
- 1MB pentru fișiere video. - Numele fișierelor trebuie să conțină numai cifre sau litere din alfabetul englez și caracterul de subliniere. Nu este permisă utilizarea de litere rusești, spații, ghilimele și caractere speciale în numele fișierului;
- Nu puteți folosi litere rusești în numele variabilelor și obiectelor.
Singura excepție este textul de pe banner. - Formatul proiectului finalizat este o arhivă zip.
Utilizați imagini de înaltă rezoluție, acest lucru va îmbunătăți dramatic calitatea banner-ului dispozitiv mobil, deși va reduce viteza de încărcare a bannerului.
Puteți utiliza imagini SVG. Sunt vectori, ceea ce înseamnă că vor arăta mai bine pe toate dispozitivele - mobile și desktop. De asemenea, au o dimensiune mică a fișierului și pot fi animate.
Formate de imagine acceptabile: png, gif, jpg, svg.
Greutatea maximă a unui fișier: 300Kb.
2. Selectați editorul în care veți dezvolta reclamă HTML și faceți clic pe linkul corespunzător. Pregătiți o arhivă cu reclamă HTML conform instrucțiunilor:
Adobe Animate CC Editor - Banner cu un singur buton
Adobe Animate CC Editor - Banner cu mai multe butoane
1. Descărcați un șablon pentru un banner cu mai multe butoane
2. Creați un proiect HTML5 Canvas în Adobe Animate (sau deschideți unul existent)
3. Când adăugați butoane sau clipuri video încorporate într-o scenă, este important să le dați un nume de instanță, astfel încât să puteți adăuga apoi un clic la butoanele din dreapta. Vă recomandăm să folosiți nume butonul 1 - butonul 9.
Vezi si:
Instrucțiuni pentru adăugarea unui buton și atribuirea unui nume de instanță
Buton pe scena principală1. Creați un obiect pe scenă, de exemplu, folosind Instrumentul dreptunghi.
Apoi selectați-l și meniul contextual selectați „Conversie în simbol...”
2. În caseta de dialog care apare, selectați Tip: Buton, Numele poate fi lăsat neschimbat, faceți clic pe Ok.
3. Atribuiți un nume de instanță acestui buton pentru ca clicul să funcționeze.
4. Scrieți codul pentru acest buton în Acțiuni:
Window.buttons.push(//Scrieți căile butoanelor separate prin virgule, adăugând aceasta la început this.button1 //Sfârșitul spațiului pentru butoane);
1. Să presupunem că butonul se află în interiorul altui simbol, de exemplu în interiorul unui clip video.
ÎN în acest exemplu acestui clip de film i se dă Numele instanței „nume”
2. Prin dublu click intrați în interiorul numelui, va fi un buton imbricat.
3. Când specificați calea către un astfel de buton în Acțiuni, va trebui să adăugați numele de instanță al obiectului după acesta în care este imbricat:
Window.buttons.push(//Scrieți căile butoanelor separate prin virgule, adăugând acest lucru la început this.name.button1 //Sfârșitul spațiului pentru butoane);
Instrucțiuni pentru crearea butoanelor transparente
1. Selectați elementul dorit și convertiți-l într-un simbol
2. Introduceți un nume și selectați Tip: Buton
3. Faceți dublu clic pe un simbol pentru a merge la acesta:
4. Introduceți cadru-cheie în cadrul de accesare
5. Îndepărtați conținutul cadrelor sus, peste, jos
6. Butonul transparent este gata:
4. Adăugați un strat Actions la proiect (vom adăuga cod pentru butoane la acesta)
5. Deschideți o fereastră pentru a scrie cod
Window.buttons.push(//Scrieți căile butoanelor separate prin virgule, adăugând aceasta la începutul //Sfârșitul spațiului pentru butoane); setAdfox();
Dacă butonul se află în scena principală, atunci scrieți numele instanței imediat după aceasta, de exemplu
Acest.buton1
Dacă butonul se află în interiorul unei scene imbricate, apoi scrieți mai întâi numele instanței scenei și apoi numele instanței butonului:
Acest.nume_instanță_scenă.button2
Exemplu de cod final în stratul Acțiuni:
Window.buttons.push(//Scrieți căile butoanelor separate prin virgule, adăugând this.button1, this.scene_instance_name.button2 //Sfârșitul spațiului pentru butoane la început); setAdfox();
7. Primul buton din linia de cod va apela primul link de la ADFOX, al doilea - al doilea și așa mai departe.
Împreună cu reclamă HTML, furnizați managerului care va adăuga bannerul la ADFOX informații despre corespondența butoanelor și numerelor de link.
8. Deschideți opțiunile de publicare și conectați șablonul din primul punct și publicați proiectul selectând directorul dorit.
9. După publicarea proiectului, arhivați-l în format .zip. Reclamă este gata pentru a fi încărcată în bannerul ADFOX.
Editorul Google Web Designer
Codul acestui banner poate fi folosit ca bază la crearea reclamelor în editor.
Șablonul conține script adfox_HTML5.js si un set de parametri pt funcţionare corectă tranziții și numărarea evenimentelor:
%reference%, %user1%, %eventN%, unde N este numărul evenimentului de la 1 la 30.
2. Faceți clic pe procesare.
Toate evenimentele sunt alocate unor elemente de animație specifice prin fila Evenimente.
Componenta Zona interactivă este utilizată pentru a invoca acțiuni.
Adăugați-l și selectați evenimentul Touch Area → Touch/Click (sau „Tap Area > Touch/Click” în versiunea în limba engleză). 
În fila „Cod personalizat”, specificați un apel la funcția de clic.
2.1 Dacă se folosește un buton de salt:
CallClick();
2.2 Dacă există mai multe butoane de tranziție:
CallClick(n);
unde n
2.3 Dacă trebuie să declanșați un eveniment dintr-o animație fără tranziție, utilizați următorul cod:
CallEvent(n);
unde n este numărul evenimentului care ar trebui apelat.
Caracteristica implementării unui banner de întindere (cauciuc).
Astfel încât bannerul să se întindă pe lățimea containerului în care va fi amplasat pe site, pe panou Proprietăți Pentru poziție și dimensiuni, specificați procente în loc de pixeli.
Utilizați și opțiunile „Aliniați la container”Și „Aspect cauciuc” pe bara de instrumente de sus.
Dacă activați Fluid Layout înainte de a utiliza orice instrument de aliniere, atunci când redimensionați containerul părinte, toate elementele vor fi aliniate între ele și la dimensiunile containerului.
În acest caz, puteți utiliza simultan atât dimensiunile relative ale elementelor în procente, cât și dimensiunile absolute în pixeli.
4. Publicarea proiectului.
Când adăugați un banner la ADFOX, managerul va trebui să cunoască corespondența butoanelor și numerelor evenimentului. Pentru fiecare eveniment, managerul va scrie propriul link la care să navigheze, care va fi apoi trecut în codul banner folosind o variabilă.
După publicarea proiectului, arhivați-l în format .zip. Reclamă este gata pentru a fi încărcată în bannerul ADFOX.
Alți editori
1. Numărarea clicurilor pe un banner
Pentru ca ADFOX să calculeze statistici privind clicurile pentru un banner, trebuie să scrieți o variabilă în codul HTML din etichetă și pentru atributul href:
%banner.reference_user1%
De asemenea, pentru linkuri, utilizați atributul target cu variabila %banner.target% în valoarea atributului.
Dacă atributul lipsește, atunci linkul se va deschide în interiorul iframe-ului, adică site-ul promovat se va deschide în spațiul banner.
Exemplu de cod HTML pentru numărarea clicurilor pe banner:
Site-ul agentului de publicitate
În codul HTML al bannerelor care vor fi plasate în aplicatii mobile, pentru a număra clicurile, utilizați macrocomandă: %reference%@%banner.user1%
2. Numărarea clicurilor de la mai multe link-uri dintr-un banner
Să presupunem că un banner are mai multe link-uri de urmat, care duc la diferite pagini ale site-ului promovat, iar pentru fiecare dintre ele trebuie să obții numărul de clicuri.
Primul link Al doilea link
Înlocuiți valorile atributului href cu variabilele %request.reference%@%banner.eventN% , unde N ar trebui să fie numărul evenimentului de la 1 la 28.
De exemplu:
Primul link Al doilea link
Corespondența legăturilor și variabilelor trebuie raportată managerului care adaugă bannerul la ADFOX. Deoarece atunci când adăugați un banner, va trebui să specificați primul link pentru evenimentul 1 și al doilea link pentru evenimentul 2.
Adăugarea unui banner în ADFOXPentru a adăuga un banner în ADFOX, selectați tipul de banner dorit și șablonul „Banner HTML5”.
Specificați parametrii bannerului:
Arhivați cu reclamă HTML5 - încărcați arhiva .zip împreună cu proiectul, câmpul „Cod reclamă HTML5” ar trebui să rămână gol (va fi completat cu conținutul fișierului .html al proiectului dvs. după adăugarea bannerului).
Cod creativ HTML5 - încărcați o arhivă zip cu un proiect pregătit în editoarele HTML sau inserați codul HTML.
Dacă există mai multe link-uri în banner, adăugați-le în fila Evenimente a bannerului, în câmpurile URL de tranziție.
Vă rugăm să verificați cu dezvoltatorii de reclame HTML corespondența numerelor de link și a evenimentelor.
Link către pixelul de măsurare - în mod implicit, pixelul ADFOX este utilizat //banners.adfox.ru/transparent.gif, dacă trebuie să urmăriți afișările într-un sistem terță parte, ștergeți pixelul ADFOX și specificați un alt link.
Lățimea reclamei (px sau %) - specificați lățimea bannerului.
Înălțimea reclamei (px sau %) - specificați înălțimea bannerului.
Imagine - încărcați o imagine.
Condiții pentru afișarea reclamelor:
- Cod HTML și imagine adăugată - Codul HTML va fi afișat.
- imagine adăugată - imaginea va fi afișată.
- Cod HTML adăugat - Codul HTML va fi afișat.
Banner container class attribute name - specificați un nume (sau mai multe nume separate printr-un spațiu) pentru atributul de clasă al containerului banner.
Utilizați SafeFrame (da|nu) - safeFrame este o tehnologie care înglobează publicitatea într-un iframe special care are un API strict. SafeFrame împiedică anunțurile care sunt redate în cadrul acestuia să culeagă date și să interacționeze cu restul paginii din afara safeFrame.
da - activați utilizarea safeFrame și interziceți accesul la pagina web;
nu - nu activați safeFrame. Codul banner are acces la pagina web.
Stiluri pentru blocul banner - stiluri personalizate pentru containerul banner într-o singură linie. Pe langa stil: display. De exemplu, „chenar: 1px roșu continuu;”. Valorile nevalide vor fi eliminate de browser.
Un bloc plutitor (sau cum se mai numește și în mișcare, fix, lipicios) este necesar pe site pentru ca utilizatorul, la derularea paginii, să vadă un element staționar, în care este plasată cel mai adesea reclamă (teasere, bannere sau context) .
Din păcate, regulile Adsense ne interzic să facem acest lucru. Cu toate acestea, mulți proprietari de site-uri ignoră regulile pe propria lor răspundere. Poate că nici măcar nu sunt pedepsiți pentru asta, dar nu aș sfătui să-și asume riscul.
Îmi plasez teaserele/bannerele în astfel de blocuri YAN și uneori în loc să fac reclamă afișez acolo postări similare sau câteva informații utile vizitatorului.
Să vă spunem cum puteți crea un bloc flotant pe site-ul dvs. web.
Sarcină: faceți ca ultimul bloc din coloana laterală (bara laterală) să plutească. Mai mult, astfel încât să se lipească doar în momentul în care utilizatorul ajunge la el prin defilare, și nu imediat la deschiderea paginii. De asemenea, blocul ar trebui să se „lipească” când ajunge la subsol (adică să nu se suprapună).
Cel mai funcțional modExistă multe opțiuni pentru implementarea unui bloc lipicios, dar nu toate funcționează corect. iti spun de la experienta personala: aceeași metodă de instalare a unui bloc poate funcționa pe un site, dar jamburile vor apărea pe altul.
Mai jos este un exemplu de bloc plutitor care a funcționat pe aproape toate site-urile pe care l-am instalat. Nu existau sticlă. Nici motorul nu este important (DLE, WordPress, LiveStreet etc.).
În locul dorit din coloana laterală, lipiți următorul cod HTML:
$(window).scroll(function() (
var sb_m = 20 ; /* umplutură deasupra și dedesubt */
var mb = 300; / * înălțimea subsolului cu margine */
var st = $(window).scrollTop() ;
var sb = $(".sticky-block" );
var sbi = $(".sticky-block .inner" ) ;
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height();
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) );
}
altfel(
sb.css(( "paddingTop" : 0 ) );
}
}
}
)
;
În acest cod puteți seta umplutura în partea de sus, de jos, precum și înălțimea subsolului dvs., de exemplu. înălțimea la care blocul trebuie să se oprească.
Acum să conectăm JS. Pentru a face acest lucru, scrieți în secțiunea HEAD:
Cel mai simplu mod (pentru WordPress)De asemenea, o metodă sigură, dar prin instalarea unui plugin. Funcționează fără stâlpi.
Avantaje:
- nu este nevoie să înțelegeți/înțelegeți HTML;
- simplitate și rapiditate de instalare.
Defecte:
Cum se utilizează:
Mi s-au părut mai puțin convenabile și nu la fel de clare ca cele două metode de mai sus. Dar oricum va spun despre ele.
Opțiunea #1 (fără jQuery)Introduceți în bara laterală:
Scriem stiluri în HTML (este mai bine să le adăugăm direct în CSS):
.lipicios(
poziție: fixă;
indicele z: 101;
}
.Stop(
poziție: relativă;
indicele z: 101;
}
Acum adăugăm scriptul în sine în pagină (este mai bine să-l punem într-un fișier separat, ca în „Cea mai mare metodă de lucru”):
(funcție() (
var a = document.querySelector("#aside1" ) , b = null, P = 0 ; // dacă zero este înlocuit cu un număr, blocul se va lipi înainte ca marginea de sus a ferestrei browserului să ajungă la marginea de sus a elementului. Poate fi un număr negativ
window.addEventListener("scroll" , Ascroll, false) ;
document.body.addEventListener("scroll" , Ascroll, false) ;
funcția Ascroll() (
dacă (b == nul) (
var Sa = getComputedStyle(a, "" ) , s = "" ;
pentru (var i = 0; i< Sa.length; i++)
{
if (Sa[ i].indexOf("box-sizing" ) == 0 || Sa[ i].indexOf("overflow" ) == 0 || Sa[ i].indexOf("width" ) == 0 || Sa[ i].indexOf("padding" ) == 0 || Sa[ i].indexOf("border" ) == 0 || Sa[ i].indexOf("contur" ) == 0 || Sa[ i].indexOf("box-shadow" ) == 0 || Sa[ i].indexOf("background" ) == 0 ) (
s += Sa[i] + ": " +Sa.getPropertyValue(Sa[i] ) + "; "
}
}
a.innerHTML = "" +a.innerHTML+"" ;
b = a.copii[ 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 ) ; // selector de blocare, când ajungeți la marginea de sus a căruia trebuie să deblocați elementul lipicios; Math.round() este doar pentru IE; dacă zero este înlocuit cu un număr, atunci blocul se va lipi înainte ca marginea de jos a elementului să ajungă la subsol
dacă ((Ra.top - P)
< / iframe >
< / div >
Și aici este CSS:
/* înălțime implicită */ #ad ( înălțime: 60px; ) @ecran numai media și (înălțime: 90px) ( /* 90 pixeli înălțime */ #ad ( înălțime: 90px; ) ) @ecran numai media și (înălțime: 125px) ) ( /* 125 pixeli înălțime */ #ad ( înălțime: 125 pixeli; ) )
/* înălțimea implicită */ #anunț ( înălțime: 60px; Ecran numai @media și (înălțime: 90 px) ( /* 90 pixeli înălțime */ #anunț ( inaltime: 90px; Ecran numai @media și (înălțime: 125 px) ( /* 125 pixeli înălțime */ #anunț ( înălțime: 125px; |
Cel mai bun lucru despre anunțurile HTML5 este că pot fi urmărite din folosind Google Analytics, la fel ca pe site-urile web obișnuite.
