Come aggiungere una immagine all'inizio o alla fine dei titoli dei post su Blogger.

Come aggiungere una immagine o una icona prima o dopo il titolo di alcuni o di tutti i post di Blogger.

Alcuni siti pubblicano articoli su diversi argomenti che possono essere organizzati mediante le etichette. Il lettore però non ha immediata evidenza di che cosa tratti l'articolo. Forse non tutti lo sanno ma il Titolo dei blog su Blogger supporta molti tag contrariamente per esempio ai commenti che supportano solo i tag di grassetto e corsivo oltre a quello del link.

C'è però la controindicazione che specie la prima parte del titolo viene indicizzata da Google quindi inserirvi una immagine può portare dei problemi a livello di SEO. È opportuno quindi qualora si scelga questa opzione di aggiungere la foto o icona alla fine del post.

Il codice da utilizzare è il seguente

Titolo del post <img src="URL_IMMAGINE" alt="nome-immagine" />

che andrà incollato nel campo del titolo in questo modo.



Dopo la pubblicazione visualizzeremo un risultato come questo

con una immagine alla fine del titolo del post. L'immagine deve essere caricata su Picasa e se ne deve ottenere il link diretto da incollare al posto di URL_IMMAGINE. Come è noto le immagini caricate su Picasa possono essere ridimensionate direttamente dal loro indirizzo. Con questo sistema si può aggiungere una immagine diversa per ciascun titolo di post.

AGGIUNGERE IMMAGINI AL TITOLO MODIFICANDO IL TEMPLATE

Se si aggiungono immagini mediante template impostandole come sfondo del titolo possono essere anche aggiunte prima del testo. Il problema è che in questo caso si può inserire in linea generale una stessa immagine per tutti i titoli dei post. Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la riga </head> e, subito sopra, si incolla questo codice

<b:if cond='!data:blog.isMobile'>
<style>
h3.post-title {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy9u5wf2HfXUlS4sBzslJARJ5bJdgc5lQzcY4TngLHERl0BMK2gDWHr6tRQaRs0xWRQKAU0zldUIbYp-co4QhYDhHgIieITXWAGTStGfhUGdUlr6MjVyMe4YLEbcBckQ2HkGH4PpqCaek/s24-Ic42/icona-penna.png) no-repeat 0;
padding-left: 30px;
}
</style>
</b:if>

quindi si salva il modello. Il risultato sarà il seguente:

e sarà lo stesso per tutti i titoli dei post. Al momento non sono riuscito ancora a trovare un tag condizionale  per mostrare un elemento solo nei post che abbiano una determinata etichetta che sarebbe l'ideale per inserire una determinata icona a seconda della tipologia del post. Seguitemi però nei prossimi articoli perché sto studiando la cosa ed è probabile che trovi la soluzione giusta.

Se si decide di optare per visualizzare l'immagine a destra del titolo si può usare questo codice

<b:if cond='!data:blog.isMobile'><style>
h3.post-title {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy9u5wf2HfXUlS4sBzslJARJ5bJdgc5lQzcY4TngLHERl0BMK2gDWHr6tRQaRs0xWRQKAU0zldUIbYp-co4QhYDhHgIieITXWAGTStGfhUGdUlr6MjVyMe4YLEbcBckQ2HkGH4PpqCaek/s24-Ic42/icona-penna.png)  no-repeat 450px;
}
</style>
</b:if>

dove il parametro 450 è funzione della larghezza dell'area del post e deve essere calibrato modello per modello. I tag condizionali evidenziati di giallo servono per mostrare l'immagine solo nella versione desktop di Blogger.  Il risultato ottenuto sarà questo