domenica 24 aprile 2016

Come mettere un'immagine di anteprima di default nei post

Se usi blogger/blogspot per il tuo blog ed hai una visualizzazione dei post ad anteprima, ovvero una di quelle visualizzazioni dove si vede l'elenco dei post con il titolo, una breve descrizione ed un'immagine di anteprima, forse ti interesserà sapere come mettere un'immagine di anteprima di default nei post anche quando all'interno di un post non c'è alcuna immagine.


Come mettere un'immagine di anteprima di default nei post di blogger


A volte capita di inserire articoli dove non c'è alcuna immagine, è normale.
Questo però può essere un problema per le pagine che mostrano l'elenco dei post, dove quelli senza immagine stonano rispetto agli altri con la foto d'anteprima.
Nessun problema, ora ti spiegherò come mettere un'immagine di default come anteprima dei post di blogger.

Prima di tutto devi caricare l'immagine che vuoi usare come anteprima dei post senza immagini, per far questo ti basta aprire un nuovo post e cliccare su inserisci immagine, esattamente come fai di solito per caricare le immagini in un post.
Ora, clicca su HTML e copiati l'indirizzo dell'immagine appena caricata, ad esempio nel mio caso è:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicbKCjLFm03xXizLQurRLf0DKxMazz4wV84clfhdMpDCaTG3KXz2GHDZ0U5wjjok3B2f4fRvGwhENAPNJkiJC72-vElmWYCZXxv1vGRtN-VMC3G6VH3Apk9FDTjhCwzq0v3qWa-EGpVjNC/s320/simbolo-psicologia-post.jpg

Bene, ora che ti sei copiato da qualche parte (es. blocco note) l'indirizzo dell'immagine da usare come anteprima dei post, esci dal post senza salvare e vai su Modello e poi su Modifica HTML.

Ora cerca questa stringa:
<div class='Image thumb'>

Come mettere un'immagine di anteprima di default nei post

Troverai questo blocco:
<div class='Image thumb'>
  <a expr:href='data:post.url' expr:title='data:post.title'><img expr:src='data:post.thumbnailUrl'/></a>
</div>
</b:if>


Che dovrai modificare in:
<div class='Image thumb'>
  <a expr:href='data:post.url' expr:title='data:post.title'><img expr:src='data:post.thumbnailUrl'/></a>
</div>
<b:else/>
<div class='Image thumb'>
  <a expr:href='data:post.url' expr:title='data:post.title'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicbKCjLFm03xXizLQurRLf0DKxMazz4wV84clfhdMpDCaTG3KXz2GHDZ0U5wjjok3B2f4fRvGwhENAPNJkiJC72-vElmWYCZXxv1vGRtN-VMC3G6VH3Apk9FDTjhCwzq0v3qWa-EGpVjNC/s320/simbolo-psicologia-post.jpg'/></a>
</div>
</b:if>


Praticamente hai aggiunto un ELSE (altrimenti) nella condizione IF (se), in modo che se non trova alcuna immagine d'anteprima del post (thumb), blogger setta come anteprima la tua immagine di default.

Quindi quello che dovrai fare, è semplicemente andare a sostituire l'url dell'immagine che ho messo io come esempio, con quella che hai caricato tu, andando però a modificare il punto in cui c'è scritto s320 (dovrebbe essere scritto così anche nel tuo caso, ma magari c'è un altra cifra) con s72-c, che è la dimensione giusta delle immagini d'anteprima (almeno per il mio template, eventualmente fai qualche prova per trovare la giusta dimensione).

Il risultato finale sarà una cosa del genere:

risultato finale

Bene, ora sai come modificare l'immagine di anteprima dei post di blogger in modo che appaia un'immagine da te scelta, quando in un post non è stata caricata alcuna immagine :)

ps se vuoi avere un'immagine d'anteprima diversa in base all'etichetta con cui è stato taggato un post leggi qui.

Piaciuto l'articolo? Lascia un commento!

EmoticonEmoticon