Pubblicato il 21/03/11e aggiornato il

Come sostituire in Blogger il titolo del widget con una immagine.

Sostituire il titolo del widget di Blogger con una immagine.
Con l'avvento del Designer Modelli è possibile personalizzare molti aspetti dei titoli dei widget. Si possono per esempio modificare i colori di sfondo e quelli del testo, la dimensione e il tipo dei caratteri. Comunque c'è sempre qualcuno che non è soddisfatto del tipo di modifiche che si possono apportare e vuole sempre qualcosa di più. Tempo fa mi fu chiesto in un commento se fosse possibile sostituire il titolo di un singolo widget con una immagine. In realtà la cosa è abbastanza semplice ma me ne ero dimenticato e il post con il relativo tutorial non lo avevo mai scritto.

Pongo rimedio adesso con la ragionevole certezza che alcuni lettori si appresteranno alla modifica subito dopo aver letto questo post. Come detto l'obiettivo è quello si inserire una immagine al posto del titolo di un singolo gadget. La foto da inserire può anche essere animata e, per questioni di estetica, deve avere dimensioni compatibili con quelle del titolo che va a sostituire. Come test ho usato il celebre sito CoolText che permette di creare delle scritte molto suggestive che poi possono essere salvate come immagine. Non sto qui a illustrare come ottenerla dato che si tratta di un procedimento molto intuitivo. Si scarica cliccando con il destro del mouse e scegliendo Salva immagine con nome. Ecco un esempio
motore di ricerca
Prima di ogni altra cosa dovrà essere caricata su un servizio di hosting quale Picasa, SkyDrive o DropBox e ottenerne l'hotlink. Come certo saprete, su Blogger ogni widget ha un nome e un ID unico ma una struttura simile a tutti gli altri. Se si va su Design > Modifica HTML, si salva il modello, si mette la flag a espandi i modelli widget, si può facilmente trovare il codice relativo a un certo gadget cliccando su F3 o su Ctrl+F. Sarà una cosa simile al seguente screenshot

widget blogger

in cui è stato evidenziato di viola l'inizio del gadget e evidenziato di rosa il suo nome. La stringa che inserisce il titolo del widget è quella evidenziata di celeste, cioè <data:title/>. Per sostituire il titolo con una immagine, bisogna mettere posto di <data:title/> il seguente codice

<img src="URL_IMMAGINE" alt="NOME_IMMAGINE"/>

con i parametri in rosso che dovranno essere sostituiti rispettivamente dall'URL dell'immagine e dal suo nome. Il tag Alt è importante soprattutto ai fini SEO. Dovrà cioè venire una cosa come in quest'altro screenshot

immagine al posto del titolo in un widget di blogger

Si salva il modello e si visualizza il blog per vedere l'effetto che fa e, eventualmente, per calibrare meglio le dimensioni dell'immagine.




31 commenti :

  1. Bellissima guida. Ho già personalizzato tutto il mio blog! Grazie ;)

    RispondiElimina
  2. ehm... e se volessi sostituire il titolo del post... dato che il carattere che avevo scelto nessuno lo ha installato sul pc? -.-

    RispondiElimina
  3. @Soffio di Dea Una cosa è avere i font nel programma che si usa per editare il post (Editor di Blogger,WLW, ecc) un'altra cosa è avere i font sul PC, un'altra cosa ancora sono i browser che riescono a leggerli. Prova a trovare ispirazione in questi post
    http://www.ideepercomputeredinternet.com/2010/05/come-usare-dei-caratteri-originali-per.html
    http://www.ideepercomputeredinternet.com/2009/05/come-scaricare-gratis-migliaia-di-nuovi.html
    http://www.ideepercomputeredinternet.com/2011/01/google-porta-77-i-font-caratteri.html

    RispondiElimina
  4. grazie gentilissimo... studierò :*

    RispondiElimina
  5. ha funzionato benissimo.. ma ora non so come tornare indietro :S
    mi spiego.. ho salvato e dopo un po' mi è venuta voglia di cambiare nuovamente l'immagine, ma non l'ho più trovata!
    non c'è più il nome con cui l'avevo salvata e non so come rintracciare la parte dove poter mettere un nuovo url..
    aiuto!

    RispondiElimina
  6. @AlphaLyrae
    Ho aperto il tuo blog e non ho visto immagini al posto del titolo del widget. Comunque, se questa immagine la vedi, ci clicchi sopra con il destro del mouse e scegli Copia URL immagine. Poi vai nel template, espandi i modelli widget, clicchi su F3 e incolli l'URL. Visualizzerai immediatamente la posizione della immagine. Sostituisci il tag della immagine con quello che c'era prima.

    RispondiElimina
  7. @Ernesto T.

    giusto! come ho fatto a non pensarci XD
    ora l'ho trovata!
    grazie mille! =)

    RispondiElimina
  8. Ciao Ernesto, sono Marta,
    sul mio blog :
    www.sospiridelcuore.blogspot.com
    non riesco a cambiare la scritta nel widget "FOLLOWERS" e non riesco a capire come mai, le altre le ho fatte tutte. Mi potresti dare una mano gentilmente?

    RispondiElimina
  9. Arieccomi......
    ho trovato una soluzione veloce e indolore.....ho tolto il nome (che oltretutto avevo messo io) al widget.
    Grazie ugualmente.
    La prossima volta ti contatto dopo averle provate tutte.
    Ciao

    RispondiElimina
  10. Ciao.. utilissime le tue guide! Ho letto questo articolo "Come sostituire in Blogger il titolo del widget con una immagine" e a me interesserebbe mettere un'immagine accanto al titolo del widget (come si fa per i titoli dei post), ma non so in quale punto dell'html devo andare! grazie mille anticipatamente!

    RispondiElimina
  11. @erhcpe
    Segui le istruzioni di questo post e sostituisci il tag
    <data:title/>

    con la riga

    <img src="URL_IMMAGINE" alt="NOME_IMMAGINE"/> <data:title/>

    Inserendo nome e URL della immagine.

    RispondiElimina
    Risposte
    1. salve, trovo questo sito davvero utilissimo e ben fatto infatti ho trovato tantissime idee utili e ben spiegate :)
      purtroppo però non sono riuscita a mettere l'immagine vicino ai titoli dei gadget così come hai spiegato in questo commento... ho provato ad inserire l'immagine seguendo il tutorial spiegato qui http://www.ideepercomputeredinternet.com/2011/01/inserire-una-immagine-prima-del-titolo.html cercando la riga h2.post-title ovvero quella dei titoli dei gadget, ma mi mette l'immagine anche vicino alla data del post..

      Elimina
    2. @Sidus
      Per inserire una immagine prima del titolo del widget devi seguire questo tutorial e non l'altro. Al posto di

      <data:title/>

      sostituire

      <img src="URL_IMMAGINE" alt="NOME_IMMAGINE"/><data:title/>

      questo lo devi fare dopo aver cliccato su espandi i modelli widget e solo nel gadget in cui vuoi inserire l'immagine.
      Se vuoi inserire la foto in tutti i widget della sidebar devi ripetere lo stesso procedimento con tutti.
      Ho il sospetto che tu abbia aggiunto l'immagine nel modello senza badare al widget e ti è venuta prima del titolo del post.

      Elimina
    3. mmm o sono io o è il mio modello.. :/ in effetti non ho capito come si distinguono i diversi widget dagli altri (infatti l'icona che volevo inserire doveva accoppiarsi ai titoli di tutti i widget)
      ad ogni modo ho risolto diversamente seguendo il secondo metodo che hai riportato nell'altro tuttorial e funziona bene (ho risolto anche il problema dell'icona che compare anche vicino alla data dei post, facendo in modo che lì non compaia)... unico problema è che forse l'icona che ho scelto è troppo grande e quindi mi compare più in basso rispetto alla linea della scritta...in pratica non è centrata l'immagine vicino al titolo dei widget...infatti per ora ho risolto mettendo un semplice simboletto vicino ai titoli.

      Elimina
  12. Guida davvero utilissima, ma ho un piccolo problema: alcune immagini hanno il bordo, mentre altre no.
    Da cosa dipende?
    Io vorrei togliere la cornice, come devo fare?
    Grazie mille!!!
    Anna

    RispondiElimina
    Risposte
    1. @Anna
      Il bordo è ereditato dalle impostazioni del tuo blog. Probabilmente questo si vede anche nelle foto pubblicate nei post. Non so se funzionerà ma prova a inserire le immagini con questo codice
      <img style='border:none;' src="URL_IMMAGINE" alt="NOME_IMMAGINE"/> o con questo
      <img style='border:none !important;' src="URL_IMMAGINE" alt="NOME_IMMAGINE"/>

      Elimina
    2. Funziona ma a metà...
      Infatti viene eliminato il bordo colorato, ma resta una specie di ombreggiatura che nelle altre immagini non c'è...
      Grazie comunque! ^_^

      Elimina
  13. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  14. Aiuto. Non ho la stringa di cui parli tu.
    Io ho solo title='CERCA NEL BLOG' ad esempio. Io voglio sostituire l'immagine a "cerca nel Blog". Metto il codice che hai indicato, ma quando apro l'anteprima mi fa vedere solo il codice html e non l'immagine...

    Grazie

    RispondiElimina
    Risposte
    1. @# Non hai < data:title > nel codice del widget? Mi sembra molto strano.

      Elimina
  15. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  16. Ciao Ernesto!
    Ti volevo chiedere se c'è la possibilità in blogger di avere un sottotitolo appena sotto il titolo principale del post!
    Io adesso mi arrangio scrivendo una riga di testo ma, viene molto staccata dal titolo principale del Post e non so se può essere corretto come seo o altro! Grazie!

    RispondiElimina
  17. Sito utilissimo!!! Sto facendo tante piccole modifiche al mio neonato blog e volevo chiederti: se l'immagine che inserisco e' troppo grande per calibrare le dimensioni devo farlo toccando le stringhe html di blogspot (a-i-u-t-o!) o basta che ci lavoro col programma di grafica che uso (photoshop) e la rendo piu piccola, elimino lo sfondo etc e poi la ricarico ?

    RispondiElimina
    Risposte
    1. Puoi modificare l'immagine con il software di grafica oppure aggiungerci le dimensioni che preferisci per esempio
      <img src="https://lh5.googleusercontent.com/_nT13UtBmmiU/TYdR9kz7BLI/AAAAAAAASgY/6LXh7dVuZ20/motore-fiammeggiante.gif" width="180"/>
      con l'altezza che manterrà le proporzioni
      @#

      Elimina
  18. ottimo questo post, ma non riesco a capire cosa non riesco a sistemare: ho fatto tutto, ho preso l'immagine da sostituire da Skydrive, inserita e mi esce la scritta 'Errore di analisi XML, riga 2283, colonna 79: The reference to entity "resid" must end with the ';' delimiter.
    allora ho aggiunto il ';' ma mi dà l'errore: Errore di analisi XML, riga 2283, colonna 80: The entity "resid" was referenced, but not declared.
    Cosa devo fare? sono davvero imbranata O.o
    mi potresti dare una mano?
    grazie ^_^

    RispondiElimina
    Risposte
    1. @# È difficile darti una mano :)
      Non si capisce perché non ti salva il modello. Sei sicura di aver scelto bene il widget? Sei sicura di aver selezionato bene la riga da sostituire?
      Prova a caricare l'immagine su Picasa e acquisiscine il link diretto così
      http://www.ideepercomputeredinternet.com/2013/03/picasa-image-hotlink.html
      Il codice da sostituire a quello del tag si può modificare utilizzando le virgolette semplici e senza tag Alt in questo modo
      <img src='URL_IMMAGINE'/>

      Elimina
  19. Ciao Ernesto, spero che tu possa aiutarmi perché sono alle prime armi con codici html ecc., quindi non so proprio come procedere.

    Ti spiego il mio problema: ho inserito nel mio blog un'immagine al posto del titolo direttamente da layout. Nonostante l'abbia ridimensionata più volte affinché la scritta "la foresta incantata design" comparisse di dimensioni maggiori, continua a risultare sempre uguale. Quindi ho pensato di modificare il codice html o css, ma non so proprio dove guardare e come fare.

    Questo è il mio blog, giusto per farti un'idea (io vorrei il titolo più grande).
    http://laforestaincantatadesign.blogspot.it/

    Grazie mille in anticipo

    RispondiElimina
    Risposte
    1. Dovresti lavorare con un po' di grafica (Gimp o Photoshop). Si tratta di una immagine da 1600x113 pixel. Prova a incollarla in un nuovo progetto con sfondo trasparente di dimensioni più adatte vale a dire da 1600x400 pixel. Poi vedi come viene e eventualmente operi altre modifiche aumentando o diminuendo l'altezza (400 pixel)
      @#

      Elimina
    2. Grazie mille della risposta! Ora provo a modificarla! Grazie ancora, gentilissimo!

      Elimina

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.