Guida alla Creazione di Banners Personalizzati

Premessa :

che cos’è un Banner e a cosa serve ?

Un Banner è un’immagine più o meno grande che ha come caratteristica principale quella di poter essere cliccata da chi visita un sito web .

Quante volte avrai visto , mentre navigavi su Internet , delle immagini a forma quadrata o rettangolare con una scritta pubblicitaria al centro ?

Bene , quelle immagini sono i famosi Banners .

Il Banner quindi serve a pubblicizzare qualcosa ( un sito web , un prodotto , un servizio , un negozio , un evento ) e di solito viene inserito bene in mostra su un sito , perchè ha l’unico obiettivo di essere cliccato .

Cliccando sul Banner tu vieni automaticamente reindirizzato ad un’altra pagina web che offre informazioni più o meno dettagliate in tema con il breve testo che hai trovato sul Banner stesso .

Ci sono un’infinità di siti web che adottano la politica del Banner per vari motivi :

- pianificare una pubblicità contestuale a tema con i contenuti del sito .

- ricevere una percentuale di guadagno se il Banner viene cliccato ( ci sono molte affiliazioni online che ti danno banners già pronti da inserire nel tuo sito e per i quali puoi ricevere delle commissioni ) .

- effettuare uno scambio links con altri siti allo scopo di aumentare reciprocamente la visibilità sui motori di ricerca .

In questa mini-guida ti spiegherò passo dopo passo come riuscire a creare banners personalizzati , cioè banners ideati da te e pronti da inserire dove vuoi sul Web !

1- SCEGLIERE L’IMMAGINE PER IL TUO BANNER

Per scegliere nel migliore dei modi un’immagine iniziale , devi tenere presente che il formato standard di un Banner ( quello più usato sul Web ) è della seguente dimensione :

468X60

Puoi trovare molte immagini già impostate con questo formato ai seguenti links :

JANIM.NET

GIULIX.IT

CRAZYEDDY.COM

BUONGIORNOWEB.COM

Come vedi , visitando questi siti , trovi centinaia di basi per banners per tutti i gusti e per tutti i generi ( divertenti , professionali , monocolore o multicolore ) e sta solo a te scegliere quale tra queste basi salvare sul tuo PC .

Per salvare una di queste basi per banner , fai click con il pulsante destro del mouse e seleziona “salva immagine con nome” .

Per comodità salva l’immagine 468X60 direttamente sul tuo Desktop per non andarla a ricercare dentro alle cartelle del tuo computer .

2- SCEGLIERE UN TESTO ADEGUATO PER IL TUO BANNER

Dopo aver salvato l’immagine base del banner , aprila con una delle applicazioni che di solito usi per modificare le immagini .

Io , per esempio , uso semplicemente Paint !

Clicca con il tasto destro sull’immagine che hai salvato , seleziona l’opzione “Apri con Paint” e l’immagine ti si aprirà all’interno del programma Paint .

Ora viene il bello : devi inserire un testo all’interno di questa immagine base .

Ti consiglio di pensarci molto attentamente , visto che non hai molto spazio per scrivere il tuo messaggio pubblicitario e devi essere molto molto convincente nel tuo breve testo , perchè devi incuriosire il visitatore che visualizzerà il banner e spingerlo a cliccarci sopra .

Dopo aver scelto il tuo testo da inserire nell’immagine , con Paint seleziona “Inserisci testo” e seleziona l’area dove tu vuoi che il testo venga visualizzato .

Quando sei soddisfatto del risultato finale , salva l’immagine con un nome appropriato , tipo “Mio Banner” , ricordandoti di salvarla preferibilmente in formato .png .

Questo tipo di formato è più adatto alla visualizzazione delle immagini sul Web .

4- EDITARE IL CODICE HTML DEL BANNER

Niente paura !

Questa frase sembra così complicata e invece vuole solamente dire : ” creare il banner vero e proprio , in modo tale da essere linkabile e che porti verso la pagina Web che tu desideri “.

Come si fa ?

Qui di seguito ti mostro un codice standard in HTML per un banner 468X60 :

<a target=”_blank” href=”TUOSITO“><img src=”LINKDIRETTOALL’IMMAGINE.png” border=”0″ width=”468″ height=”60″ title=”NOMEDELTUOBANNER“></a>

Per comodità , copia questo esempio di codice HTML sull’ applicazione “Blocco Note” del tuo PC .

Bene . Anzitutto puoi già modificare il campo “TUOSITO” e metterci al suo posto l’URL completo del sito che vuoi far visualizzare dal banner :

per esempio , puoi inserire http://www.google.it se vuoi far vedere la home page di Google dopo che il visitatore ha cliccato sul banner .

Attenzione  però a restare dentro le virgolette iniziali e finali dell’URL senza spazi in mezzo , altrimenti il link non verrà visualizzato !

Il risultato parziale del tuo codice HTML sarà :

<a target=”_blank” href=”http://www.google.it“><img src=”LINKDIRETTOALL’IMMAGINE.png” border=”0″ width=”468″ height=”60″ title=”NOMEDELTUOBANNER“></a>

Passiamo adesso a capire come si ricava il link diretto all’immagine :

ricordi l’immagine che hai modificato e salvato con Paint ?

Bene , quell’immagine va inserita dentro all’FTP del tuo spazio web .

Se hai un sito web di tua proprietà , puoi gestire l’FTP con un programma gratuito che si chiama FILEZILLA .

Se acora non hai Filezilla , installalo da QUI , accedi al tuo server digitando i dati necessari e vai sulla cartella PUBLIC HTML .

Entra dentro a questa cartella e troverai una sottocartella chiamata “images” .

Apri la cartella “images” , poi trascinaci dentro con il mouse  l’immagine del tuo banner .

A questo punto la tua immagine è inserita correttamente nel tuo server .

Clicca sull’immagine che ora sta dentro ad “images” su Filezilla , con il tasto destro del mouse seleziona “Copia URL negli appunti” .

Poi , incolla questa selezione riaprendo il tuo Blocco Note .

Vedrai all’incirca la seguente scritta :

ftp://TUONOMEDOMINIO/domains/NOMEDOMINIO/public_html/images/TUAIMMAGINE.png

In questa scritta devi modificare “ftp” con “http” , cancellare le parole da “domains” fino a “public_html”  , ottenendo così il corretto link all’immagine :

http://www.nometuosito.com/images/tuaimmagine.png

Questa porcedura è un po’ lunga ma serve per non fare errori di scrittura nell’elaborare il link diretto all’immagine , che è fondamentale per la buona riuscita del banner .

Ultimo passo :

preleva il link diretto all’immagine che hai ottenuto nel Blocco Note , copialo ed incollalo nel codice standard che avevamo visto all’inizio .

Il risultato finale dev’essere il seguente :

<a target=”_blank” href=”http://www.google.it“><img src=”http://www.nometuosito.com/images/tuaimmagine.png” border=”0″ width=”468″ height=”60″ title=”MioBanner”></a>

questo è il giusto codice da salvare , copiare ed incollare nel tuo sito per visualizzare il tuo banner completato !

E siccome a parole può sembrare un’impresa colossale , ti ho fatto anche un videotutorial che spiega passo dopo passo la creazione del tuo banner .

Photo Credits : https://www.google.com/adsense/static/it/Banner.html