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