Creare e mostrare nel blog il codice di un antipixel per essere incollato in un altro sito.

Mi è stato chiesto in un commento come avevo fatto ad inserire nella colonna di destra a piè di pagina quel rettangolo scorrevole da cui ricavare il codice da inserire in un altro blog e che mostra il mio antipixel. Ho già pubblicato degli articoli da cui ricavare tutte le informazioni per poterlo fare ma mi sono reso conto che non c’è nessun post che lo mostri in modo esauriente. Cercherò fi farlo adesso.
Innanzitutto bisogna crearsi l’antipixel che è un banner di dimensioni 80x15 pixel che prende il nome dal blog che per primo li ha introdotti. Le risorse online per crearlo lo potete trovare nell’articolo

• Strumenti per creare antipixel -

Se volete generare un antipixel animato come il mio non dovete far altro che crearne più di uno, ovviamente con un certo criterio, quindi unirli insieme a formare un immagine animata in GIF utilizzando per esempio il tool online Make a Gif.
Adesso l’antipixel lo avete sotto forma di immagine nel computer ma questo non basta perché lo dovete caricare in rete. Il servizio gratuito più capiente per farlo senza problemi è SkyDrive; appena lo avete fatto ne acquisirete l’indirizzo che sarà lunghissimo ma che potrà essere anche accorciato con un servizio gratuito tipo is.gd oppure TinyURL. Non è comunque obbligatorio farlo e può essere lasciato l’URL originale.

Adesso creiamo una textarea, cioè un rettangolo con cursore scorrevole in cui inserire il codice del nostro antipixel. L’HTML per inserire una textarea è il seguente

<textarea rows="5" cols="8">testo da immettere</textarea>

dove 5 ed 8 sono rispettivamente il numero delle righe e quello delle colonne. In Windows Live Writer l’inserimento di questo tag presenta delle difficoltà invece non ne presenta nessuna con l’editor di Blogger e con gli elementi pagina del tipo HTML/Javascript.
La textarea può anche essere ulteriormente personalizzata. Ecco un esempio

<center><textarea rows="6" cols="12" style="color: #003366; background: #FFD2CF;">testo da immettere</textarea></center>

dove oltre ai consueti numeri per righe e colonne ho inserito i due tag <center> e </center> per centrare il “blocco di testo” nel post del blog o nell’elemento pagina, il colore del testo che si vede dentro la textarea (#003366) e il colore dello sfondo (#FFD2CF).
Nel momento in cui il testo riuscirà a rimanere tutto all’interno delle righe e delle colonne che si sono impostate si vedrà solo un rettangolo, mentre se sarà più largo o più lungo verrà visualizzato un cursore verticale.
Adesso passiamo al codice dell’antipixel che dovrà avere un collegamento al nostro blog. Ecco come dovrà essere la struttura

<a href="URL_del_blog” title="titolo del blog"><img src="URL_antipixel_su_Skidrive"/></a>

dove dovete sostituire le parti in rosso con i vostri dati. A titolo di esempio vi mostro il codice del collegamento al mio antipixel

<a href="http://www.ideepercomputeredinternet.com" title="Il blog dell'informatica"><img src="http://tinyurl.com/ry7wtg"/></a>

adesso questo codice del nostro bannerino dobbiamo inserirlo in una textarea per poter farlo copiare dai visitatori del nostro blog che volessero inserirlo nel proprio sito. Ecco quindi un tipo di codice complessivo che può essere ovviamente personalizzato a seconda delle esigenze di layout

<center><textarea rows="5"> <p><a href="URL_blog" title="titolo_blog"><img src="URL_antipixel"/></a></p></textarea></center>

in cui si possono fare le seguenti personalizzazioni

1. i due tag center possono essere inseriti solo se si vuole la textarea al centro dell’elemento
2. ho inserito solo il numero delle righe (rows) e non quello delle colonne il che è normale in casi di codici di dimensioni modeste
3. ovviamente URL_blog, titolo_blog e URL_antipixel devono essere quelli personali
4. i due tag <p> e </p> servono per inserire l’antipixel a capo in un altra riga, quindi a distanziarlo da altri. Possono anche essere tolti, cosa che personalmente ho fatto
5. Insieme a questo codice deve essere inserita una spiegazione e anche l’aspetto dell’antipixel che sarà visto nei blog di chi lo adotterà
6. Tutto il codice ed il testo dovrà essere inserito in Layout > Aggiungi un gadget > HTML/Javascript e potrà avere una forma di questo tipo

Se vuoi mettere un collegamento a Nome Blog sul tuo blog copia il codice sottostante <p></p> <center><textarea rows="5"> <a href="URL_BLOG" title="Titolo_blog"><img src="URL_antipixel"/></a></textarea></center> <p></p> <center><a href="URL_BLOG" title="Titolo_Blog"><img src="URL_antipixel"/></a></center>

Dove le parti in rosso devono essere personalizzate. I due tag consecutivi <p></p> in sostanza rappresentano degli a capo, dei salti di riga e possono anche essere sostituiti dal tag <br/> oppure eliminati. Ecco come si presenta una textarea



<a href="URL_BLOG" title="Titolo_blog"><img src="URL_antipixel" /></a>


Se ci cliccate dentro con il destro del mouse e scegliete Seleziona tutto vedrete che verrà selezionato soltanto l'interno della textarea.