Pubblicato il 18/08/09 - aggiornato il  | 14 commenti :

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
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






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


14 commenti :

  1. ciao, puoi dirmi a quali righe si riferiscono questo numeri? textarea rows="6" cols="12
    grazie in anticipo, ciao.

    RispondiElimina
  2. @anonimo
    significa creare un textarea con sei righe e 12 colonne, un rettangolo con la base che è il doppio dell'altezza

    RispondiElimina
  3. grazie come sempre, chiarissima come spiegazione infatti l'ho appena inserito sul blog :)

    RispondiElimina
  4. ciao parsifal ho inserito l'antipixel,seguendo le tue indicazioni ed ho fatto la prova se funziona, ma mi manda su una pagina di blogspot title nella quale risulta: "questa pagina non esiste",ma cliccandoci sopra si accede al blog, e' normale? PS. scusa la banalita' della mia domanda,
    come sempre ti ringrazio per le tue idee che metti a nostra disposizione.cordiali saluti ALFONSO.

    RispondiElimina
  5. @alfonso
    non è normale, hai sbagliato nell'inserire il collegamento. Sono le virgolette. Devono essere verticali e invece tu le hai messe oblique. Devi sostituire quel pezzo di codice con quest'altro
    href="http://alfa-ilmiomondoinunblog.blogspot.com/" title="il mi mondo in un blog"
    Ciao

    RispondiElimina
  6. @alfonso
    solo adesso mi accorgo che hai scritto "mi mondo" invece di "mio mondo" non so se è voluto :)

    RispondiElimina
  7. grazie parsifal, ho sostituito il pezzo di codice che mi hai segnalato ed e' tutto a posto,,grazie ancora per la tua immensa disponibilita' ciao ALFONSO

    RispondiElimina
  8. Scusa ancora, so che forse nn ci azzecca molto, ma nn so come si fanno e come si chiamano questi...(per esempio)http://hamletoilcriceto.blogspot.com/2007/07/link.html#go-to-banners dove c'è scritto tutto...cos'è? Un post, un casella di testo che se clicchi si apre in un'altra finestra?? Non capusco la vorrei fare anche io...i collegamenti li so fare, ma nn so proprio cosa siano queste pagine che nn sn post, ma si scrive lo stexo!! Ti prego nn so nemmeno km si kiamano...per uesto tee lo chiedo, anche s enn ci azzecca molto...! Sono disperata!!!!!

    RispondiElimina
  9. Ciao Parsifal sono 2 giorni che giro su questo blog e sinceramente lo sto divorando!è davvero pieno di informazioni per chi come me ha molto da imparare!
    Io sto per fare un post(che non pubblicherò oggi credo)sugli antipixel ovviamente non farò copia e incolla dal tuo sito..ma visto che ho imparato a crearli proprio con questa guida vorrei fare comunque un piccolo cenno di ringraziamento al tuo blog...lo faccio alla fine del post?o prima di trattare l'argomento?(ovviamente nella domanda è incluso se è lecito che scriva questa guida prendendo spunto dalla tua)
    Aspetto una tua risposta prima di iniziare
    ps:(sono ancora alla ricerca del menu :( mi servirebbe orizzontale..e poi una domandina su una cosa che nn ho trovato sul sito..come faccio a cambiare l'icona del sito?intendo come la tua foto in bianco e nero..
    Grazie!(e scusa le troppe righe)

    RispondiElimina
  10. @EasyCheapy
    Puoi naturalmente scrivere un post prendendo spunto da questo articolo. Il link al post lo puoi inserire dove ti fa più comodo. L'immagine a cui ti riferisci si chiama favicon. Puoi trovare un sacco di post in questa raccolta http://www.ideepercomputeredinternet.com/search/label/favicon
    Il primo è quello risolutivo ma ce ne sono anche per chi le vuole animate, scorrevoli, ecc.
    Per il menù orizzontale se non ti vanno ben quelli che ho già pubblicato la vedo dura :(

    RispondiElimina
  11. Mi piacciono tutti quelli che hai pubblicato!il problema è che non ne funziona neanche uno con il Designer Modelli.O meglio funziona solo il megamenu solo che ha solo 3 sottomenù

    ps:ecco perchè non trovavo l'immagine!non sapevo che si chiamasse cosi!ahaha

    se trovo un menu orizzontale compatibile comunque te lo segnalo

    RispondiElimina
  12. @Easy..
    Questo menù orizzontale funziona anche con i nuovi modelli
    http://www.ideepercomputeredinternet.com/2011/02/menu-orizzontale-su-piu-livelli-per.html

    RispondiElimina
  13. Non vorrei essere ossequiosa, ma i tuoi suggerimenti sono sempre i migliori!! Spieghi le cose in modo estremamente comprensibile..ho provato a fare la stessa cosa con i suggerimenti della guida di Blogger, ma non sono spiegati in modo così chiaro come qui! Grazie come sempre!!

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy