Pubblicato il 02/06/15e aggiornato il

Come mostrare ai lettori il codice per condividere nei loro siti un nostro banner o un nostro video pubblicitario.

Come creare una textarea vale a dire un rettangolo con cursori in cui inserire un codice di un banner o di un video che i lettori potranno condividere nei loro siti.
Nel post precedente abbiamo visto come sia possibile creare un video SWF e collegarlo a una pagina web che potrebbe essere la soluzione ideale per pubblicizzare una iniziativa di qualsiasi genere. Se crediamo molto nell'impatto commerciale o etico della nostra campagna possiamo dare la possibilità ai lettori di condividere la nostra iniziativa.

Questo si fa mostrando il codice che i lettori dovranno condividere nel loro sito in un gadget HTML/Javascript oppure anche in un articolo ovviamente in modalità HTML. In questo post vedremo come realizzare una taxtarea ovvero quel rettangolo spesso con cursori che si vede in molti siti web e che permette ai lettori di copiare il codice in modo più efficiente. 

CODICE DI UNA TEXTAREA


Il  codice generico di una textarea è supportato da tutti i browser ed è il seguente

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

che mostrerà un rettangolo come il seguente

textarea-codice
con i cursori che verranno visualizzati quando il numero di righe (6) e/o quello delle colonne (30) non siano sufficienti per mostrare tutto il contenuto. Al posto della scritta in blu potrà anche essere incollato un codice HTML che non verrà interpretato ma solo mostrato come semplice testo.

PERSONALIZZAZIONI TEXTAREA


Come altri oggetti HTML anche textarea si presta all'inserimento di attributi per modificarne l'aspetto

<textarea style="background: #eee; font-size: 14px; font-family:Georgia; padding:4px; color:#f00; height: 180px; width: 250px; border:2px dotted #00f;">
Testo o codice da visualizzare all'interno della textarea
  </textarea>

Sono stati aggiunti i seguenti parametri:
  1. Colore di sfondo #eee (leggi il post sui codici dei colori)
  2. Dimensione dei font (14px)
  3. Famiglia dei font (Georgia)
  4. Distanza del testo dal bordo (padding:4px)
  5. Dimensioni della textarea in pixel e non in righe e colonne (250x180 pixel)
  6. Stile del bordo (spessore di 2 pixel punteggiato di colore #00f.
L'aspetto della textarea sarà il seguente:

textarea-personalizzata

Concludo con l'esempio di una textarea con il codice del video SWF con link a una pagina mostrato nel post precedente e che è stato già ricordato





Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.