Come inserire una immagine di sfondo nei titoli dei post di Blogger.

Come mostrare il Titolo dei post di Blogger con una immagine di sfondo nella versione mobile e nella versione desktop.

Ho ricevuto questa strana richiesta in un commento sul sito che mi ha portato a scrivere questo instant post. Lascio ai lettori eventuali disquisizioni sulla bontà estetica dell'inserimento di uno sfondo con una immagine nei titoli dei post e passo a fissare alcuni punti di quello che sarà il prosieguo dell'articolo.

Si può modificare l'aspetto dei titoli dei post in modo generale e in modo specifico. Nel primo caso la modifica dell'aspetto sarà applicata a tutti i titoli dei post passati e futuri mentre nel secondo caso verrà applicata solo a un titolo di un post specifico.

Inoltre si può decidere di modificare i titoli dei post solo nella versione desktop o anche nella versione mobile. Il metodo utilizzato per una modifica complessiva è quello di aggiungere delle regole alla classe che sovrintende all'aspetto del titolo del post che è h3.post-title per quello che riguarda il desktop.

Un altro aspetto da tenere nella debita considerazione è quello del caricamento della immagine di sfondo in Google Foto. Si possono usare uno dei quattro sistemi di cui ho già parlato ma si può anche creare una bozza con l'Editor di Blogger in cui aggiungere l'immagine in questione.

Andando poi su HTML si può copiare l'URL della immagine che sarà quello visibile dopo il tag src=" . Tale URL potrà così essere usato per aggiungere una immagine di sfondo al Titolo del post.

COME ADATTARE L'URL DELLA IMMAGINE

Prendiamo per esempio questo URL che ho ricavato dal codice di una immagine inserita in una bozza

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi8jFanp1_6PP9WqSlssgdHNaOElSEgd7yfID6eZMev-AjmCxEo6MzhO7IG1zS6dUpBGKDlXZHbVZq5F7Tdo6ADNJsENBjJ0X70SV0gLBltzWP9vfGsukxS3pET2UX525W_4lmJ3pmqbM/s360/sfondo-titolo.png

ha la stringa s360 che ne fissa la larghezza. Prima di passare a mostrare il codice dobbiamo adattare la larghezza della immagine a quella del blog. Per essere sicuri possiamo per esempio sostituire s360 con s1200 per avere una immagine di sfondo larga 1200 pixel e quindi sicuramente più larga del layout del nostro sito.

AGGIUNGERE UNA IMMAGINE DI SFONDO DEL TIPO TEXTURE

L'immagine di sfondo può essere anche quella di un motivo che poi dovrà essere ripetuto. All'atto pratico possiamo usare una immagine di sfondo alta solo 1, 2 o 3 pixel per poi farla ripetere nell'asse y per avere lo sfondo.

Si va su Tema -> Modifica HTML e si cerca la sezione <b:skin> quindi si visualizza tutto il codice cliccando sulla freccetta nera posta sulla sinistra. Si cerca poi la riga ]]></b:skin> e, subito sopra, si incolla questo codice

h3.post-title {
color: #FFF;
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi8jFanp1_6PP9WqSlssgdHNaOElSEgd7yfID6eZMev-AjmCxEo6MzhO7IG1zS6dUpBGKDlXZHbVZq5F7Tdo6ADNJsENBjJ0X70SV0gLBltzWP9vfGsukxS3pET2UX525W_4lmJ3pmqbM/800/sfondo-titolo.png);
background-repeat: repeat-y;
padding: 5px 30px;
font-size: 24px;
}
h3.post-title a {color:#FFF !important;}

dove l'URL della immagine dello sfondo è colorato di rosso e tale immagine è alta solo 3 pixel ma viene ripetuta secondo l'asse delle y. L'ultima riga serve per avere lo stesso colore del titolo (#FFF) anche nella homepage.

L'aspetto del Titolo del post dopo il salvataggio del Tema sarà il seguente

Naturalmente l'aspetto dipenderà dalla immagine prescelta.

AGGIUNGERE UNA IMMAGINE DI SFONDO NON TEXTURE

Come secondo esempio vediamo il codice da usare per mostrare una immagine di sfondo che non sia alta solo pochi pixel. Il codice da aggiungere nello stesso punto del Tema in questo caso diventa il seguente

h3.post-title {
color: #FFF;
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVmttvw3bC5VBs7jGTFVJUfJ9Qhss0NE-0hEmRNQDx5mBZEIDT59DWxQrhf4RaoBIzxS4VPsTaKKQJLeti1umnpgz3hsHMDg1bZ0TkR-uy3mn2MwqDynZQw-PVePguGnt_Wg_MOVzjrs_B/800/sfondo.jpg);
background-repeat:no-repeat;
font-size: 24px;
padding: 5px 10px;
}
h3.post-title a {color:#FFF !important;}

e dopo aver salvato il Tema l'aspetto del titolo del post sarà simile a questo



Il tag padding: 5px 10px; serve per creare uno spazio verticale e orizzontale tra il titolo e i bordi.

COME MOSTRARE LO SFONDO NELLA VERSIONE MOBILE

Con il codice precedente l'immagine di sfondo sarà mostrata solo nella versione desktop. Per visualizzare lo sfondo anche nella versione mobile dobbiamo aggiungere sempre sopra alla riga ]]></b:skin> quest'altro codice

.mobile h3.post-title {
color: #FFF;
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVmttvw3bC5VBs7jGTFVJUfJ9Qhss0NE-0hEmRNQDx5mBZEIDT59DWxQrhf4RaoBIzxS4VPsTaKKQJLeti1umnpgz3hsHMDg1bZ0TkR-uy3mn2MwqDynZQw-PVePguGnt_Wg_MOVzjrs_B/s800/sfondo.jpg);
background-repeat:no-repeat;
padding: 5px 10px;
font-size: 24px;
}

Si salva il Tema. La personalizzazione funzionerà anche da mobile solo se si è scelto il modello Personalizza in Tema -> Cellulare -> Sì. Mostra la versione mobile del Tema...

L'immagine dello sfondo da mobile sarà visibile solo nei post e non nella homepage che ha un'altra struttura.

SFONDO CON IMMAGINE DEL TITOLO IN UN SOLO POST

Se si vuole mostrare il titolo di un solo post con uno sfondo di una immagine oppure se si volesse cambiare immagine di sfondo per ogni post invece di modificare il modello dobbiamo incollare un codice nell'HTML dell'Editor. Dopo aver editato l'articolo si clicca su HTML e all'inizio del post si incolla questo codice

<style>
h3.post-title, .mobile h3.post-title {
color: #FFF;
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVmttvw3bC5VBs7jGTFVJUfJ9Qhss0NE-0hEmRNQDx5mBZEIDT59DWxQrhf4RaoBIzxS4VPsTaKKQJLeti1umnpgz3hsHMDg1bZ0TkR-uy3mn2MwqDynZQw-PVePguGnt_Wg_MOVzjrs_B/800/sfondo.jpg);
background-repeat:no-repeat;
padding: 5px 10px;
font-size: 24px;
}
</style>

che servirà per mostrare il Titolo del post con una immagine di sfondo solo per quel post dopo che si sia pubblicato. Il tag evidenziato di giallo si aggiunge solo se si vuole mostrare il titolo del post con lo sfondo personalizzato anche con visualizzazione da mobile.