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>
<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>
<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ì
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'/>
<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ì
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.
Grazie mille. Ho appena applicato la modifica e l'effetto mi piace molto. ;)
RispondiEliminaOttimo! funziona ...nazi la mia gif dell'ape ora sbatte pure le ali
RispondiEliminamagia di imageshack?
Ciao Ernesto!
RispondiEliminaE' 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 ;)
@DietaEDintorni
EliminaNon 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
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.
EliminaGrazie lo stesso! :)
Scusa, Ernesto, ma questo non può andare bene? http://www.ideepercomputeredinternet.com/2010/03/etichette-icone-blogger-inserire-titolo.html
RispondiEliminaL'ho trovato proprio or ora, sembra quello che cerco, no? :D
@DietaEDintorni
EliminaSì, è proprio quello, pensa che mi ero dimenticato di questo post ahahah
Ehehe, hai scritto così tanti articoli che nemmeno tu te li ricordi tutti! ;)
EliminaLa 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
Ciao, non so se lo hai già scritto in qualche articolo.
RispondiEliminaHo 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!
@Elisewin
EliminaProva 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
Ciao Ernesto, volevo chiederti una curiosità.
RispondiEliminaAllora, 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
@LuciaAlocchi
EliminaCerto, 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.
Ciao Ernesto e buon anno,
Eliminavolevo 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
@LuciaAlocchi
EliminaIn 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.
Ti ringrazio Ernesto. :)
EliminaLucia Alocchi