Script pentru afișarea de reclame odată pe zi!

Dacă vrei să afișezi o anume reclamă la câteva secunde după ce pagina s-a încărcat, dar numai odată la n zile pentru fiecare utilizator nou, urmărește acest mic tutorial:

pasul 1 – Marcăm în pagină locul în care să apară reclama.

Creăm un element div căruia îi dăm un id ușor de reținut, dar unic:

pasul 2 – Inserăm scriptul javascript

Scriptul de mai jos conține funcțiile necesare pentru a citi și a seta un cookie care să ne permită să identificam dacă utilizatorul a mai încărcat acest cod în ultimele n zile.

function citesteCookie(cnume) {
     var nume = cnume + "=";
     var ca = document.cookie.split(';');
     for(var i=0; i<ca.length; i++)="" {="" var="" c="ca[i];" while="" (c.charat(0)="='" ')="" if(c.indexof(nume)="=" 0)="" return="" c.substring(nume.length,c.length);="" }="" "";="" function="" seteazacookie(cnume,="" cvaloare,="" zile_val)="" z="new" date();="" z.settime(d.gettime()="" +="" (zile_val*24*60*60*1000));="" expira="expires=" z.toutcstring();="" document.cookie="cnume" "=" + cvaloare + " ;"="" ";path="/";" <="" pre="">

Urmează să definim funcția care ne va afișa, în interiorul elementului div creat anterior, anunțul propriu-zis.
Am ales să afișez, în exemplul de mai jos, o imagine cu link de afiliat.

  function arataAnunt() {
	url="_orice_link_de_afiliat";
        img="_un_link_către_imagine";
        contor="_daca_este_cazul_";
        title="_ce_să_conțină_atributul_title_al_img";
        a = "

„+contor+”

";
	document.getElementById('AfisazaAnunt').innerHTML = a;
        }
   function ascundeAnunt() {
	document.getElementById('fundalAnunt').classList = 'ascuns';
}

Deoarece nu vreau ca anunțul să rămână afișat pe pagină, având în vedere că datorită CSS-ului pe care îl voi prezenta ma jos, acesta va inactiva ecranul lăsându-i utilizatorului doar opțiunea de a da click pe imagine, am mai introdus și o funcție care ne va permite să ascundem anunțul, aceasta va fi executată atunci când se va da click pe elementul span, care va apare ca o cruciuliță.

Acum trebuie să executăm funcția arataAnunt doar atunci când va fi cazul:

   function arata_odata(){
      arata = citesteCookie("AmAfisatAnuntul");
      if (arata != "") {
      } else {
       setTimeout(arataAnunt, 5000);      
       seteazaCookie("AmAfisatAnuntul", 1, 1);
      }
   }
  arata_odata();

Pasul 3 – Să avem stil!

Totul va fi bine dacă v-om adăuga la locul său scriptul CSS de mai jos, fără de care nimic nu ar avea farmec:

  /* self add */
  #fundalAnunt {
	display:block;
	width:100%;
	height:100%;
	background-color:#999;
	opacity:0.9;
	position:fixed;
	top:0;
	left:0;
	z-index:99000;
  }

  #fundalAnunt .imagine {
	opacity:1;
	position:absolute;
	top:20%;
	left:0;
	box-shadow:0 0 12px #000;
	display:block;
	width:/*latime_imagine*/;
	height:/*inlatime_imagine*/;
  }
  .inchideAnunt {
    display: inline-block;
    height: 0;
    width: 0;
    padding: 12px 12px;
    line-height: 0;
    position: absolute;
    top: 20%;	
    top: calc(20% - 12px);
    left:/*latime_imagine -12px de la padding */;
    cursor: pointer;
    background: url('_link_catre_imaginea_cu_semnul_de_inchidere') no-repeat center center;
    background-size: contain;
  }

  #fundalAnunt.ascuns {
	display:none;
  }

Probabil că ați văzut acest script în acțiune atunci când ați încărcat această pagină.
Sper ca acest articol să vă fie de folos!

Acest articol a fost scris cu mult timp înainte, fără a fi pregătit să înfrunte schimbările apărute în felul în care platforma WordPress va gestiona conținutul, iar odată cu trecerea la editorul cu blocuri, toată strălucirea articolului a dispărut.

Probabil că-l voi recupera într-o bună zi și-l voi actualiza!

</ca.length;>