Pubblicita' formato Skin

CSS

Il formato pubblicitario Skin o Skin Advertising, comunemente definito sfondo cliccabile, ed è da qualche tempo uno dei formati ad alto impatto più utilizzati on-line nella comunicazione non convenzionale.
Per una piena comprensione dell'argomento, potete visualizzare l'immagine posta sopra al testo relativo alla home page del sito reppublica.it

Nello specifico lo sponsor andrà ad occupare una fetta orizzontale (in alto nella parte superiore dello schermo) e le colonne laterali, cioè gli spazi bianchi ai lati del contenitore che delimita i contenuti del sito web.

Andiamo a vedere come possiamo implementare questa "campagna marketing" a livello di codice HTML e CSS.

Codice HTML

Da un punto di vista di codice HTML quest'operazione è semplicissima. Sarà sufficiente aggiungere questo semplice markup subito dopo l'apertura del tag body:

<a id="skinlink" href="http://www.sito-dello-sponsor.com" target="_blank">
<span>Skin ADV</span> </a>

Codice CSS

body {
background-image: url('sfondo_dello_sponsor.jpg');
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
margin-top: 100px;
}
a#skinlink {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
z-index: 1;
}
#skinlink span {
display: none;
}
/* AGGIUSTO IL CONTAINER
*/
div.container {
position: relative;
z-index: 2;
}


Come potete notare, attraverso il semplice utilizzo dei CSS è stato possibile implementare - in modo molto semplice - un formato pubblicitario molto potente ed accattivante. Fatene buon uso.

Autore

Sviluppatore web, aree riservete e gestionali.
Svolgo con passione e determinazione il proprio lavoro dedicando tempo alla ricerca e all'approfondimento di novità.

Sito web dell'autore