Codice di banner da far copiare ai lettori con il tag textarea.

Come mostrare un codice o un testo da copiare all'interno di un rettangolo con il tag textarea.

Molti siti amano creare dei banner personalizzati di cui i lettori possono copiare il codice per inserirli nel loro sito. Questa pratica era molto in voga qualche anno fa quando era pratica comune per gli webmaster utilizzare questi banner per avere una specie di scambio di link con i blog amici. I banner della misura della misura di 80x15 pixel erano chiamati antipixel dal nome del blog che per primo li aveva creati. 

Gli scambi di link sono visti in modo negativo da Google però mettere un banner di un sito a cui su deve riconoscenza o che vogliamo pubblicizzare non ha controindicazioni se non si pretende la reciprocità.  Sarà cura del webmaster mostrare ai lettori il codice da incollare nel loro sito per visualizzare tale banner. Evidentemente il file della immagine del banner dovrà essere caricato su un Hosting tipo Picasa o simile.

Il codice in questione sarà molto semplice e dovrà avere questa struttura

<a href="#" title="NOME_DEL_LINK"><img src="URL_BANNER" alt="NOME-BANNER"/></a>

dove al posto di # dovrà essere incollato l'indirizzo del collegamento e in URL_BANNER l'indirizzo della immagine che potrà essere anche animata in formato GIF. Il testo del tag Title sarà quello che i lettori visualizzeranno quando passeranno sopra al banner con il mouse mentre quello del tag Alt è il Testo Alternativo ed è utile per questioni SEO.

Probabilmente vi sarà già capitato di visualizzare dei codici da copiare inseriti in rettangoli con cursore per facilitare il lettore che voglia copiarlo. Per ottenere questo risultato si utilizza il tag textarea che supporta molti attributi di personalizzazione. Il codice di base della textarea è 

<textarea  rows="6" cols="30">
  Testo visualizzato all'interno del rettangolo
</textarea>

dove vengono definite anche il numero delle righe (6) e il numero delle colonne (30) vale a dire dei caratteri visualizzati in ogni riga. Il risultato sarà il seguente

Personalmente però preferisco un codice più completo senza numero di righe e colonne ma con larghezza, altezza e altri parametri come questo

<textarea style="background: #eee; font-size: 14px; font-family:Arial; padding:4px; color:#f00; height: 200px; width: 320px; border:2px dashed #00f;">
  Lorem ipsum dolor sit amet, ...</textarea>

che porta a questo risultato

Quando la quantità di testo presente all'interno non entra nel rettangolo si viene a visualizzare un cursore per scorrerlo interamente con un notevole risparmio di spazio. I parametri su cui si può incidere riguardano i codici dei colori, lo stile del bordo, lo sfondo della textarea, la famiglia di caratteri e le dimensioni del rettangolo. Il tag padding:4px; serve per inserire uno spazio tra bordo e contenuto. Nel caso in cui si debba far copiare un banner il codice complessivo diventa

<div align="center">
<textarea style="background: #eee; font-size: 14px; font-family:Arial; color:#f00; height: 90px; width: 200px;  border:2px dotted #00f;">
  <a href="URL_DEL_LINK" title="NOME_DEL_LINK"><img src="URL_BANNER" alt="NOME-BANNER"/></a></textarea>
</div>

dove i parametri della textarea possono essere personalizzati e il codice da copiare va inserito al posto del contenuto. Ho inserito i tag colorati di viola per centrare tutta la textarea nel layout.

Questo codice può essere incollato in un post in modalità HTML nell'Editor di Blogger oppure in un widget HTML/Javascript da configurare in Layout > Aggiungi un gadget. Concludo ricordando che si può creare anche una textarea trasparente con questo codice

<div align="center">
<pre style="overflow: auto; width: 320px; height: 80px;"><div align="left">
INSERIRE PURO TESTO O CODICE HTML
</div></pre></div>

e che avrà questo aspetto

anche se in questo caso non si tratta di una vera textarea ma si usa il tag <pre> che serve per visualizzare testo preformattato come del resto succede lo stesso con il tag textarea.