Pubblicato il 10/06/12e aggiornato il

Come aggiungere una icona prima o dopo il titolo del post.

Come inserire una immagine prima o dopo il titolo del post su Blogger.
In Blogger si può rendere originale il nostro template anche con piccoli accorgimenti quali quello che vado a illustrare. Ne avevo già parlato in un articolo di qualche tempo fa ma la trattazione è stata forse anche un po' troppo complicata.

Ripropongo quindi il tutorial cercando di renderlo il più semplice possibile e adattabile anche ai nuovi template del Designer Modelli. L'obiettivo è quello di inserire una immagine prima del titolo dell'articolo o subito dopo a seconda dei gusti e delle esigenze.

Si deve andare su Modello > Backup/Ripristino e si deve salvare il modello completo. Si torna su Modello > Modifica HTML > Procedi e si mette la spunta a Espandi i modelli widget. Il titolo dell'articolo viene inserito dal tag <data:post.title/>. Chi vuole approfondire può consultare il post sul significato dei principali tag di Blogger. Nel template va quindi cercato questo codice andando su F3 o su Ctrl+F

<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>

Per visualizzare una immagine prima del titolo inseritela con questa modalità

<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<img src='http://cdn1.iconfinder.com/data/icons/glaze/48x48/filesystems/desktop.png' alt='icona'/><a expr:href='data:post.url'><data:post.title/></a>

e salvate il modello. Se ci sono due blocchi di codice simile a questo, utilizzate il primo presente nel template. L'aspetto del titolo diventerà più o meno così

inserire-icona-prima-titolo
Ovviamente al posto della immagine il cui URL è in rosso può essere scelta una qualsiasi di vostro gradimento e di dimensioni appropriate.

Invece per visualizzare l'icona dopo il titolo, lo stesso codice va modificato in quest'altro modo

<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<img src='http://cdn1.iconfinder.com/data/icons/glaze/48x48/filesystems/desktop.png' alt='icona'/>

con le stesse accortezze di prima. Dopo il salvataggio del modello, l'aspetto dei titoli diventerà così

icona-dopo-titoli-post

Si può anche inserire in prossimità del titolo una icona personalizzata che serva per individuare immediatamente l'autore del post nei blog con più autori.




15 commenti :

  1. Grazie mille. Ho appena applicato la modifica e l'effetto mi piace molto. ;)

    RispondiElimina
  2. Ottimo! funziona ...nazi la mia gif dell'ape ora sbatte pure le ali
    magia di imageshack?

    RispondiElimina
  3. Ciao Ernesto!
    E' pazzesco che ultimamente appena penso di voler fare qualche modifica grafica, poff!, arriva un tuo articolo in merito. Sembra che tu mi legga nel pensiero! ^^
    Ho una domanda sul fatto dell'icona prima del titolo: non è che esiste un modo per assegnare un'icona differente a seconda dell'argomento trattato nel post?
    Ad esempio, se prendiamo un blog che parla di veicoli, avere l'icona di una moto negli articoli che parlano di moto, una a forma di macchina in quelli che parlano di macchine e così via. Immagino già la risposta, ma con ottimismo provo a chiedere lo stesso perchè se fosse possibile sarebbe ipermegasuperfantastico :)

    Un bacione,
    Giuliana

    P.S. Essendo io tornata al vecchio nick, se vuoi puoi eliminare quella gran commentatrice di Giuliana dal widget dei top commentatori, così diamo un po' di spazio alle nuove leve! Tanto, conoscendomi e sapendo quanto mi stuzzicano i tuoi post, mi farò strada anche con questo nick ;)

    RispondiElimina
    Risposte
    1. @DietaEDintorni
      Non mi viene in mente nulla a tal proposito anche se si potrebbe usare un metodo simile a quello di questo post
      http://www.ideepercomputeredinternet.com/2011/06/come-inserire-un-messaggio-di-benvenuto.html

      Elimina
    2. Ti ringrazio, ma ne volevo proprio una da affiancare al titolo, perchè quella per etichetta si vede solo all'inizio della pagina e solo nelle pagine delle etichette.
      Grazie lo stesso! :)

      Elimina
  4. Scusa, Ernesto, ma questo non può andare bene? http://www.ideepercomputeredinternet.com/2010/03/etichette-icone-blogger-inserire-titolo.html
    L'ho trovato proprio or ora, sembra quello che cerco, no? :D

    RispondiElimina
    Risposte
    1. @DietaEDintorni
      Sì, è proprio quello, pensa che mi ero dimenticato di questo post ahahah

      Elimina
    2. Ehehe, hai scritto così tanti articoli che nemmeno tu te li ricordi tutti! ;)
      La cosa buffa è che ero appena uscita dal tuo blog per vedere se riuscivo a trovare qualcosa sul web, e cercando "icona etichetta blogger" in men che non si dica sono stata di nuovo rimbalzata qui dentro!
      Sei fantastico, Ernesto, come avrei fatto e come farei tutt'ora senza di te? <3

      Elimina
  5. Ciao, non so se lo hai già scritto in qualche articolo.
    Ho utilizzato un template per il mio blog su Blogger, che non posso, però, modificare tramite il Designer Modelli e non conosco per niente l'HTML.
    Ad ogni post, le parti relative a "Pubblicato da", "alle ore" e "commenti", vengono messe sotto il titolo del post. Io vorrei spostarle alla fine del post.
    C'è qualche articolo in cui hai scritto come fare? Mi suggerisci il link? Grazie!

    RispondiElimina
    Risposte
    1. @Elisewin
      Prova a vedere se trovi qualche soluzione in questi due post
      http://www.ideepercomputeredinternet.com/2011/06/come-spostare-la-posizione-della-data-e.html
      http://www.ideepercomputeredinternet.com/2012/03/come-modificare-gli-elementi-del-footer.html

      Elimina
  6. Ciao Ernesto, volevo chiederti una curiosità.
    Allora, io ho centrato il titolo del post, e sono riuscita anche ad inserire l'icona prima del titolo anch'essa centrata. Mi chiedevo se esista un modo per inserirne un'altra alla fine del titolo, per rendere tutto più equilibrato. Grazie in anticipo per la risposta, i tuoi consigli sono sempre utili.

    Lucia Alocchi

    RispondiElimina
    Risposte
    1. @LuciaAlocchi
      Certo, puoi inserire un altro codice con una seconda immagine come illustrato nel post. Io ho messo due opzioni, prima e dopo il titolo, ma possono essere unificate e mettere una icona prima e una dopo il titolo.

      Elimina
    2. Ciao Ernesto e buon anno,
      volevo chiederti anche un'altra cosa al riguardo. Ho aggiunto entrambe le icone sul titolo ma mi appaiono solo in home page, mentre se apro il post spariscono. C'è un modo per far sì che appaiono anche nei singoli post? Grazie.

      Ps:io sto utilizzando il modello Awesome di blogger (questo è il mio blog: http://luciaalocchi.blogspot.it).
      Ho modificato il modulo dei commenti nidificati seguendo questo tuo post ( http://www.ideepercomputeredinternet.com/2012/09/blogger-commenti-discussione-autori.html). Volevo rendere la nuvoletta della data del post dello stesso colore di quella che sto utilizzando nei commenti, ma non riesco a trovare nel codice del mio modello la parte riguardante questa modifica. È possibile riuscire a modificare il colore della nuvoletta della data del post? Grazie in anticipo e ancora buon anno :)

      Lucia Alocchi

      Elimina
    3. @LuciaAlocchi
      In teoria si potrebbe anche mostrare le icone anche nei post ma bisogna seguire un'altra strada e io in questo momento ho un sacco di impegni :(
      Per il colore della nuvoletta dei commenti si tratta di una immagine con questo URL
      https://lh3.googleusercontent.com/-Yr7eC3CALOU/UGarXs4SsxI/AAAAAAAAa8Q/ebLOH8lx-Hs/s36/icona-autore-rosa.png
      Se vuoi rendere uguale a questa l'icona del titolo devi modificare la'ltro URL
      http://cdn1.iconfinder.com/data/icons/glaze/48x48/filesystems/desktop.png
      o l'URL alternativo che hai usato.

      Elimina
    4. Ti ringrazio Ernesto. :)

      Lucia Alocchi

      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.