Come inserire uno sfondo e un bordo nei contenuti dei post di Blogger.

Come inserire uno sfondo colorato o con una immagine insieme a un bordo continuo, solido o tratteggiato in tutto o solo in una parte di un post di Blogger modificando il modello o solo il codice di un singolo post.

In dei commenti ricevuti in questi giorni mi è sembrato di cogliere il desiderio di alcuni lettori di inserire uno sfondo e/o un bordo nei post di Blogger. Per poter sfruttare in pieno le possibilità offerte dall’HTML e dal CSS dobbiamo avere almeno una infarinatura di questi linguaggi di markup. Ricordo che si può scaricare gratuitamente il mio ebook dal titolo Guida all’HTML e al CSS e che si possono consultare i post sui codici dei colori e sullo stile dei bordi.

È possibile inserire bordi e sfondi in tutti gli articoli di Blogger oppure soltanto in alcuni di esssi. Nel primo caso si opera nel modello mentre nel secondo basta incollare un codice in Modalità HTML direttamente nel post.

INSERIRE SFONDO E BORDO IN TUTTI I POST

Per visualizzare sfondi e bordi in tutti i post dopo aver salvato il template si va su Modello > Modifica HTML e si clicca sull’aerea del codice. Si digita Ctrl+F (OS Windows) e si cerca la riga

.post-body

Si dovrebbe visualizzare un blocco di codice simile a questo

.post-body { 
  font-size: 110%;
  line-height: 1.4;
  position: relative;
}

Per inserire bordo e sfondo basterà incollare altre righe in questo modo

.post-body {
  border: 2px dashed #036;
  background:#FFF;
  padding:3px;
  font-size: 110%;
  line-height: 1.4;
  position: relative;
}

dopo si salva il modello. Con il codice proposto viene inserito uno sfondo bianco (#FFF) e un bordo dello spessore di 2 pixel, tratteggiato (dashed) e del colore #036. I 3 pixel di padding servono per distanziare il bordo dal resto del post. Se si vuole inserire una immagine di sfondo si possono utilizzare al posto delle tre righe precedenti queste altre

border: 2px dashed #036;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge62P7eQlGNJ97kBx7pw9rA89mrGO7UBPopyIjNB57ogoPVZ5E8g_0WQu7yYCea_etgE_NqV3hc9SuDAla-DB8jRg97pDPUudwLwG6y9W0LivMXwF_pDBjDwue6O0LU1a4gruB5hyphenhyphendggY/s900/texture3.jpg);

dove ho lasciato l’URL della immagine che ho usato come test che si ripete in senso orizzontale e verticale.

Se al posto di una immagine che si ripete vogliamo utilizzare una foto grande dobbiamo inserire invece queste due righe ovviamente dopo averle personalizzate

border: 2px dashed #036;
background:transparent url(Indirizzo Immagine Sfondo) no-repeat;

INSERIRE BORDO E SFONDO IN UN SINGOLO POST

Se l’inserimento di bordo e sfondo è da considerarsi un fatto eccezionale possiamo direttamente operare nel codice del singolo post. In questo caso il bordo e lo sfondo possono essere inseriti per racchiudere tutto l’articolo oppure solo una sua parte magari per evidenziarla. Penso per esempio a siti di ricette o a blog di tecnologia per presentare la scheda di un prodotto in modo più evidente.

Il sistema che vi propongo prevede di usare il tag <div> per racchiudere la parte del post da visualizzare con bordo e sfondo. Nel div di apertura basterà inserire lo stile che si preferisce. Quindi dopo aver scritto l’articolo si fissano il punto di inizio e di fine del contenuto in cui inserire bordo e sfondo. Si va su HTML che si trova accanto a Scrivi e nel punto di inizio si incolla questo codice

<div style="background:#BFF; border: 1px dotted #036;">

mentre nel punto in cui si vuole che terminino bordo e sfondo si incolla </div>.

Nel codice precedente ho proposto uno sfondo di colore #BFF con un bordo punteggiato (dotted) dello spessore di un pixel. Dopo aver pubblicato si visualizzerà il contenuto racchiuso dai due tag <div> così

Anche in questo caso si può usare una immagine al posto di un colore. Si può per esempio usare il div di apertura con questo codice

<div style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge62P7eQlGNJ97kBx7pw9rA89mrGO7UBPopyIjNB57ogoPVZ5E8g_0WQu7yYCea_etgE_NqV3hc9SuDAla-DB8jRg97pDPUudwLwG6y9W0LivMXwF_pDBjDwue6O0LU1a4gruB5hyphenhyphendggY/s900/texture3.jpg);'>

che porta ad avere questo risultato

Enjoy.