Codice di banner da far copiare ai lettori 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.

Come inserire una textarea con un'immagine di sfondo.

Mi sono già occupato di come inserire una textarea e una textarea trasparente, adesso vediamo come sia possibile inserire in un elemento pagina, ma anche in un post, una textarea con una immagine di sfondo. Presento due opzioni, la prima utilizzando i fogli di stile e quindi creata modificando il modello, la seconda senza bisogno di intervenire nel template.

Textarea con immagine di sfondo agendo sul modello

Andate su Design > Modifica HTML e cercate la riga </head>. Immediatamente sopra incollate questo codice

<style type='text/css'>
<!--
textarea {
background-image:
url(URL IMMAGINE DI SFONDO);
height: 200px;
width: 300px;
}
-->
</style>

Come creare dei logo, dei banner o degli avatar per profili o blog con Cool Text.

Per gli appassionati di internet che non sono grafici professionisti e hanno dei problemi a utilizzare programmi come Photoshop o Gimp, esistono delle applicazioni online che possono essere utili per creare dei banner, degli avatar di profili più cool o delle scritte per abbellire il blog.

Uno particolarmente interessante è Cool Text che consente di generare delle scritte da utilizzare in mille modi. Per prima cosa dobbiamo selezionare lo stile che più ci piace. Tra l'altro esiste anche quello per la creazione dell'antipixel che è indicato con la freccia nello screenshot

Come distanziare ed incolonnare banner e antipixel.

Non ho molto tempo per andare a curiosare nei blog però quando lo faccio mi vengono sempre delle ispirazioni per nuovi articoli. Una cosa che ho notato è il grande numero di banner, bannerini e antipixel presenti in molti siti. Questi sono spessi accatastati uno accanto all'altro, o uno sotto all'altro senza nessuno spazio di divisione. Certo che questa può essere una precisa scelta estetica però ho l'impressione che qualcuno li vorrebbe distanziare ma non sa come fare.

Ho pensato quindi di dare delle indicazioni su come mettere degli spazi tra un antipixel (banner) e l'altro. Il codice di un banner è del tipo

<a href="URL_collegamento" title="Titolo_banner"><img src="URL_Immagine"/></a>

Se si inseriscono uno accanto all'altro in un gadget viene un codice di questo tipo

<a href="URL_collegamento_1" title="Titolo_banner_1"><img src="URL_Immagine_1"/></a><a href="URL_collegamento_2" title="Titolo_banner_2"><img src="URL_Immagine_2"/></a>

Per inserire degli spazi si può procedere in due modi. Cliccare su Modifica nell'elemento pagina in cui sono presenti gli antipixel

           

e cliccare su Formato RTF, la finestra cambierà di aspetto e saranno visibili i banner. Si può inserire il cursore in mezzo e digitare lo spazio o gli spazi con la tastiera, quindi cliccare su Salva.

Alternativamente si può inserire tra il codice dei singoli antipixel lo spazio attraverso il simbolo &#160;

in questo caso il codice di due antipixel divisi da uno spazio diventa simile a questo

<a href="URL_collegamento_1" title="Titolo_banner_1"><img src="URL_Immagine_1"/></a>&#160;<a href="URL_collegamento_2" title="Titolo_banner_2"><img src="URL_Immagine_2"/></a>

Se si vogliono incolonnare gli antipixel uno sopra all'altro senza spazio si apre l'elemento HTML/Javascript, si clicca su Formato RTF, si inserisce il cursore nel punto in cui si vuole creare la colonna e si clicca su Invio tenendo premuto il tasto "freccia in alto" (Shift) delle Maiuscole

Se invece si vogliono incolonnare con un salto di riga basta inserire il mouse e cliccare semplicemente su Invio   

        

Questo equivale a creare un paragrafo per ciascun banner o antipixel attraverso i tag <p> e </p>. Il codice diventa simile a questo

 

<p><a href="URL_collegamento_1" title="Titolo_banner_1"><img src="URL_Immagine_1"/></a></p><p><a href="URL_collegamento_2" title="Titolo_banner_2"><img src="URL_Immagine_2"/></a></p>

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.

Coloro che hanno inserito il mio antipixel (piccolo banner) nel loro blog sono pregati di copiare nuovamente il codice.

Avevo già parlato di come Google Page Creator chiuda i battenti alla fine di Giugno e di quali grossi problemi questo ci crea in questo articolo.

Non volendo aspettare proprio gli ultimi giorni ho pensato di fare le cose per gradi ed iniziare a spostare i file che avevo caricato su quel servizio.

La maggior parte riguardano degli articoli del blog e quindi sono esclusivamente problemi miei.

In alcuni casi però ci sono degli script o delle immagini che sono stati acquisiti anche da altri.

E’ il caso dell’antipixel che decine di voi hanno messo nel loro blog e che io ho linkato nella pagina degli scambi dei link. Si tratta di quel piccolo banner animato con il titolo del blog e il nick del suo autore.

Adesso ho caricato l’immagine in GIF su Skydrive che per adesso sembra che non chiuda. Siete quindi pregati di ricopiare nuovamente il codice e sostituirlo altrimenti il 30 Giugno sparirà lasciando uno spazio bianco decisamente antiestetico.

Il nuovo codice dell’antipixel è il seguente

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

Nel caso in cui dopo il 30 Giugno ci siano degli articoli con delle immagini mancanti o con degli script che non funzionano chiedo la vostra collaborazione nel segnalarmelo.

Strumenti per creare quei piccoli banner dei blog chiamati antipixel.

Gli antipixel sono dei piccoli banner che prendono il nome dal blog che per primo gli ha inventati. Sono divisi in due parti con una barra che può essere a metà oppure no. In genere servono per creare collegamenti a blog amici o a pagine particolari del blog. Ci sono diversi siti in cui si possono creare in modo gratuito

BlogFlux che consente anche di copiare il relativo codice HTML. Basta digitare il testo della parte sinistra dell'antipixel e quello della parte destra; si scelgono i colori, l'allineamento, i bordi quindi si va su Generate Button. L'immagine può essere salvata come una immagine qualsiasi col pulsante destro del mouse.

Brilliant Button è uno strumento che permette come il precedente di scegliere colori e testo ed in più consente anche l'upload delle immagini da caricare nella parte sinistra e destra dell'antipixel

Pixel Button funziona come i precedenti e permette di generare il codice HTML senza bisogno di salvare l'immagine nel server

Button Maker è uno strumento molto potente e permette moltissime personalizzazioni

RSS Graphic Tools anche questo sito permette di personalizzare l'antipixel in quanto a colori, bordi e testo quindi permette di salvarlo come immagine.

Ma vediamo quelli che ho creato per il mio sito

Mi sono adesso ricordato che si possono creare immagini animate in GIF nel sito GifMake.com come ho già descritto in questo post. Questo servizio servirebbe per unirle e caricarle sul mio account di Google Page Creator. Purtroppo il sito non funzionava ed allora sono andato in Gifup.com che è un servizio simile. Ho fatto l'upload delle 4 immagini che avevo ricavato dal precedente sito per creare un'animazione in GIF.

Ho acquisito il codice dopo aver cliccato su Let's see what you get :), aver scelto Avatar di 100 pixel ed aver scelto Save. C'è l'inconveniente che c'è un antiestetico collegamento al sito. Ho dovuto sostituire il collegamento al sito con quello al mio blog

<a href="http://gifup.com/show/6138040207" title="GIF animations generator gifup.com"><img src="http://gifup.com/data/gifs/6/1/3/6138040207.gif" alt="GIF animations generator gifup.com" border="0" /></a><br /><a href="http://gifup.com">GIF animations generator gifup.com</a>

Per poterlo utilizzare al meglio ho messo il mio indirizzo al posto di quello del sito colorato in rosso. Ho sostituito "Il blog dell'informatica" alla descrizione colorata in viola e ho tolto la descrizione del sito colorata di verde. Non so se viola le regole del servizio ma tant'è!

Decisamente non male vero! Ritornerò sull'argomento quando funzioneranno meglio le cose per spiegare come mettere questi antipixel animati nel nostro blog e come utilizzarli. Peccato solo che sia 100x15 pixel contro i canonici 80x15. Ho creato anche la versione a 64 pixel. Ditemi che ne pensate

Aggiornamento: Finalmente ha ripreso a funzionare il sito GifMake.com quindi ho potuto generare la mia gif animata in dimensione 80x15. Ecco il codice che serve per l'antipixel

<p> <a href="http://parsifal32.blogspot.com" title="Il blog dell'informatica"><img src="http://anonimotoscano.googlepages.com/1KkqYu1221651766.gif"/></a></p>

Dove al posto dell'indirizzo scritto in rosso mettete quello del vostro blog e al posto della descrizione scritta in verde ci mettete la vostra. Da notare che la descrizione appare quando si punta l'antipixel con il mouse. L'indirizzo scritto in giallo è quello in cui avete caricato la vostra GIF animata; come al solito ho usato Google Page Creator almeno fino a che non è pieno continuerò con questo servizio ma per fortuna ce ne sono altri. Anche in questo blog puoi trovarli di gratuiti elencati in alcuni post. Dimenticavo ecco la realizzazione finale