Come inserire uno sfondo nei post di Blogger.

Abbiamo visto in modo dettagliato come visualizzare dei background per il nostro sito su Blogger. Si tratta di sfondi che sono mostrati in tutta l'area del blog o solo nella sua parte esterna. E' anche possibile creare uno sfondo personalizzato per un singolo widget che può essere un colore o una immagine.

Con questo post affrontiamo il tema dello sfondo per quella che è l'area vera e propria dell'articolo. Si possono presentare molte tipologie di inserimento e non ho la pretesa di affrontarle tutte.

INSERIRE UNO SFONDO IN UNA PARTE DEL TESTO 

Per risaltare alcuni paragrafi dell'articolo può essere utile visualizzare il testo con un particolare sottofondo che può essere colorato o formato da una immagine.

Se vogliamo visualizzare un testo con un certo colore di sfondo, dopo averlo digitato nell'Editor di Blogger o su Windows Live Writer, si va in Modalità HTML e inserisce questo codice all'inizio

<div style="background:#EEFFFF; padding:4px 6px 4px 6px;">

mentre alla fine si incolla il tag di chiusura </div>. Il codice del colore può essere scelto a piacere e i numeri indicano la distanza tra il testo e la parte esterna dello sfondo. Come è noto il primo numero indica la distanza verso l'alto quindi in senso orario per tutte le altre direzioni.

Se invece si vuole inserire una immagine di sfondo solo in una parte del testo i codici diventano

<div style="background:url(URL_Immagine);">
TESTO CON SFONDO
</div>

In questo caso l'immagine dovrà essere caricata su un hosting tipo Picasa e si vedrà riprodotta orizzontalmente e verticalmente fino a riempire tutta l'area del post. Se vogliamo invece inserire una immagine che non si ripeta, la prima riga diventerà

<div style="background:url(URL_Immagine) no-repeat;">

COME INSERIRE UNO SFONDO IN TUTTO IL POST

In questo caso mi limito a prendere in esame la sola possibilità di inserimento di una immagine di sfondo visto che nel caso del semplice colore si possono usare direttamente gli strumenti del Designer Modelli. Se vogliamo lo stesso sfondo per tutti gli articoli, possiamo creare un meccanismo automatico andando su Bacheca > Impostazioni > Post e Commenti > Modello post > Aggiungi e incollare nel modulo che si apre un codice come questo

<div style='background:transparent url(https://lh3.googleusercontent.com/-lUbuQm4LYvw/T_baC7zR9wI/AAAAAAAAY9M/Pev7VVJahr0/s900/texture1.jpg);'>
</div>

quindi andare in alto a destra su Salva Impostazioni. Ho messo una immagine di sfondo come esempio ma il suo URL può essere ovviamente sostituito con quello di un'altra.

Quando si aprirà l'Editor di Blogger, andando in alto a sinistra su HTML saranno visualizzate le due righe di codice che abbiamo inserito. Si potrà editare l'articolo come al solito e, dopo la sua pubblicazione, lo si vedrà con l'immagine di sfondo che gli abbiamo dato.

Se preferiamo variare background a seconda dei post, allora dobbiamo giocoforza usare un sistema manuale. Si scrive l'articolo come al solito quindi si va su HTML e all'inizio si incolla un codice come questo

<div style='background:url(https://lh3.googleusercontent.com/-EK2zDQ13kbc/T_baJXwTW-I/AAAAAAAAY9U/_IWuiynk4Hk/s900/texture2.jpg);'>

mentre alla fine si digita il tag di chiusura </div>. Per concludere ricordo che si può inserire l'immagine con trasparenza mediante un codice come questo

<div style='background:transparent url(https://lh3.googleusercontent.com/-T-nmKKIj4No/T_baSXE7_ZI/AAAAAAAAY9c/cZVMIaT6iRE/s900/texture3.jpg);'>

e che si può scegliere di non mostrare le ripetizioni dell'immagine in questo modo

<div style='background:transparent url(https://lh3.googleusercontent.com/-T-nmKKIj4No/T_baSXE7_ZI/AAAAAAAAY9c/cZVMIaT6iRE/s900/texture3.jpg) no-repeat;'>