Pubblicato il 06/07/12e aggiornato il

Come inserire uno sfondo nei post di Blogger.

Come inserire un background nell'area del post di Blogger o solo in una sua parte.
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;'>




40 commenti :

  1. Risposte
    1. @shadowslide
      Cosa non ti funziona? Non ci dovrebbero essere problemi. Forse sbagli a caricare l'immagine.

      Elimina
  2. Ciao Ernesto.
    La mia esigenza è quella di caricare uno sfondo da inserire in tutta la parte interna del blog.
    Mi spiego meglio.
    Il mio blog è basato sul modello simple.
    C'è uno sfondo esterno, personalizzabile a piacere dal design modelli, e uno interno su cui è possibile modificare solo i colori ma non caricare uno sfondo.
    Ecco io vorrei proprio fare questa ultima operazione. Ti ringrazio ancora per l'aiuto preziosissimo che ci dai ogni volta. Ciao. Francesco

    RispondiElimina
    Risposte
    1. @Horsepower
      Guarda che con questo tutorial puoi inserire lo sfondo proprio nel post. Se lo vuoi anche per gli articoli che hai già pubblicato potresti provare a modificare i CSS. Vai su Modello > Modifica HTML e cerca una riga del tipo
      .post {
      o
      .post-body {
      e subito sotto incolli un'altra riga come questa
      background:url(URL_Immagine);
      dove inserisci l'URL della immagine di sfondo, quindi salvi il modello. Potrebbe funzionare.

      Elimina
    2. Non ci salto fuori.
      Questo è il mio blog
      horsepower50.blogspot.it/
      tutta la parte azzurra la vorrei poter modificare caricando uno sfondo diverso (ad esempio simile a quello che ho usato per la parte esterna).

      Elimina
    3. Sono andato a tentativi. Sembra che ce l'abbia fatta. :-)

      Elimina
  3. ciao e grazie per il tutorial,avrei una domanda da farti:come cambio il colore dello sfondo?

    RispondiElimina
    Risposte
    1. @Tina/Dulcisinfondo
      Se riferisci a questo post basta cambiare il codice del colore. Al posto di #EEFFFF ne metti un altro. Se non sai di cosa si parla, leggiti questo post
      http://www.ideepercomputeredinternet.com/2010/02/tabella-interattiva-in-italiano-dei.html

      Elimina
  4. salve, anche a me non funziona:(
    vorrei mettere uno sfondo nella finestra di testo di ciascun post (quindi cambiare immagine su ciascuno) ho provato in tutti modi ma niente.
    il codice per colorarlo a tinta piatta funziona, ma quello per inserire un'immagine no.
    ho anche usato il link del tuo sfondo, ma niente.
    ho mac, che sia quello?

    RispondiElimina
    Risposte
    1. @teti900
      Se non funziona anche con la mia immagine potrebbe darsi che non sia visualizzabile con Safari, non trovo altre spiegazioni possibili.

      Elimina
    2. (uso chrome e ho provato anche con firefox) riproverò!
      grazie e buona giornata:)

      Elimina
  5. Vorrei personalizzarlo lo sfondo,ma mi sai dire che dimensione abbia??

    RispondiElimina
    Risposte
    1. @IvanDeFelice
      L'immagine di sfondo si ripete in senso orizzontale e verticale. Non si può dire che dimensione debba avere visto che il post può essere di 100 o di 100.000 caratteri.

      Elimina
  6. Ma se si proverà a mettere un immagine lavorata con Gimp dici verrebbe accettata?? al limite provo sperando non la sformi...bo proverò...

    RispondiElimina
  7. Egregio
    Ernesto Tirinnanzi, ho trovato il suo sito molto utile per far apprendere con molta semplicità il vasto mondo del linguaggio html, però questa proprio non mi riesce...vado al dunque. Sono andato in impostazioni di blogger, ho pigiato su post e aggiungi(ho incollato nella finestra che si apre il suo codice sostituendo la sua immagine con una mia (messa su picasa e caricata tramite url su windows live writer, ma non funziona. Cosa ho sbagliato nella procedura?
    Grazie e Buone Feste.

    RispondiElimina
    Risposte
    1. @StefanoAntonello
      Le immagini non si caricano su WLW ma su un qualsiasi album di Picasa. Prima di sostituire l'immagine, incollane l'URL nel browser e clicca su Invio per controllare che sia giusto.

      Elimina
    2. ciao scusa il disturbo
      puoi aiutarmi? in Picasa non è più abilitata la funzione di slide e nello spazio che era riservato al codice da prelevare appare la scritta Disabled for beta.
      Non riesco più a inserire i codici nel mio sito.
      opsss... Intanto ti auguro BUON ANNO sperando in una tua risposta.
      grazie molte
      angela

      Elimina
    3. @angelapercaso
      Nel mio Picasa c'è sempre il link Incorpora slideshow. Bisogna cliccarci sopra quindi copiare il codice. Se non c'è rendi Pubblico l'album in questione potrebbe essere quello.

      Elimina
  8. Ciao Ernesto,
    vorrei chiederti un aiuto per un blog di blogger:
    dovrei creare un blog di cucina, dove in ogni post, alla voce Ingredienti e Preparazione, compaiano automaticamente ogni volta due immaginine (rispettivamente lista della spesa e pentola che bolle).
    Sai come si fa senza dover mettere ogni volta il codice manualmente?
    Grazie anticipatamente!

    RispondiElimina
    Risposte
    1. @ Claudia Annie
      Se desideri inserire una immagine prima di ogni post e una alla fine si può inserire nel modello. Mi pare però che le tue esigenze siano diverse e che tu le voglia mettere in punti ben precisi. In questo caso al massimo si può automatizzare l'inserimento preparandoci i due codici delle due immagini ma niente più...

      Elimina
  9. Ciao, sono nuovo di blogger, sempre usato Wp e secondo me rimane il migliore...
    comunque volevo chiederti, un mio cliente ha voluto tenere un template che ha trovato free in rete e ora vuole modificare lo sfondo del template non dei post, ma se vado per modificarlo non me lo consente, sapresti dirmi cosa modificare nel codice per modificate lo sfondo?

    RispondiElimina
    Risposte
    1. @# Ti conviene farti dire da dove ha scaricato il template e contattare il suo autore. Alternativamente puoi andare su Modello > Modifica HTML > Procedi e cercare tutte le occorrenze di background. Accanto dovresti trovare degli URL di immagini. Una di queste è quella dello sfondo

      Elimina
  10. Ciao! trovo questo articolo molto utile! :)
    Ho inserito la voce del no repeat, però io vorrei che non si ripetesse solo in orizzontale, mentre in verticale si, c'è qualche modo?
    Per farsì che si ripeti appunto solo in verticale?

    Grazie in anticipo ;)

    RispondiElimina
    Risposte
    1. @# Per ripetere una immagine solo verticalmente si usa il tag
      repeat-y
      mentre per ripeterla solo orizzontalmente si usa il tag
      repeat-x
      Leggiti questa pagina
      http://www.web-link.it/css/82colore.htm
      ci troverai anche degli esempi

      Elimina
  11. Come posso inglobare l'immagine con lo sfondo, o bloccare l'immagine del book presente http://deltareversal.blogspot.it/p/tutorial.html

    RispondiElimina
  12. Ciao.
    Probabilmente da qualche parte l'hai già scritto ...
    E' possibile dare un colore di sfondo (una barra)
    SOLO al titolo di un post?
    es. barra nera con titolo bianco.
    Grazie

    RispondiElimina
    Risposte
    1. Al titolo di un solo post o al titolo di tutti i post?
      Il primo caso è complesso. Per il secondo leggi qui
      http://www.ideepercomputeredinternet.com/2012/10/colore-titolo-post-blogger.html
      Se vuoi metterci uno sfondo aggiungi una riga come questa
      background: #000000;
      dove ovviamente devi personalizzare il colore di sfondo
      @#

      Elimina
    2. L'idea era quella di mettere lo sfondo su TUTTI i titoli
      però non so dove inserire l'istruzione background
      es. sfondo nero e scritta bianca sarebbe così?
      h3.post-title {color:#ffffff; font: $(post.title.font);
      margin: .75em 0 0;}
      background: #000000

      Elimina
  13. Si. Esattamente così. Ricordati di salvare il
    modello
    @#

    RispondiElimina
  14. Grazie ... a c'è un problema
    h3.post-title, .comments h4 non lo trova con il ctrlF

    io uso un modello blogger (viaggi)

    RispondiElimina
    Risposte
    1. Se ti interessa solo il titolo puoi modificare questo codice

      h3.post-title {
      margin-top: 20px;
      }
      h3.post-title a {
      font: normal bold 20px Verdana, Geneva, sans-serif;
      color: #0fb69b;
      }
      h3.post-title a:hover {
      text-decoration: underline;
      }

      in questo modo (è solo un esempio)

      h3.post-title {
      margin-top: 20px;
      }
      h3.post-title a {
      font: normal bold 20px Verdana, Geneva, sans-serif;
      color: #fff;
      background:#000;
      }
      h3.post-title a:hover {
      text-decoration: underline;
      color: #eee;
      background:#222;
      }

      in modo da visualizzare il colore del titolo e il suo sfondo in modo diverso al passaggio del cursore.
      P.S. Spero di aver azzeccato il blog giusto
      @#

      Elimina
    2. Sai quale è il problema?
      Che per riempire tutta la riga (il titolo del post) del colore 0fb69b
      devo per forza mettere dei caratteri .... nel mio caso i trattini ....questi _______
      ... li posso evitare e "riempire" comunque la riga?
      Grazie

      Elimina
  15. Sei un genio .. beccato pure il blog!
    E visto che ci siamo ...
    nel menù flottante in alto quando si apre la finestra "sezioni" o "mese per mese"
    il colore non è quello della barra anche se nel codice ho inserito

    ... background:#0fb69b; /* Colore sfondo menu */

    ... padding:0
    background:#0fb69b;

    ho dimenticato qualcosa?

    RispondiElimina
  16. perchè non funziona? ho controllato anche in HTML mi dice che lo mette davanti al post ma quando visualizzo il blog non va!!

    RispondiElimina
  17. Prova a pubblicare l'articolo o a aggiornarlo direttamente da Html senza andare su Scrivi
    @#

    RispondiElimina
    Risposte
    1. ho provato anche da lì, non funziona :(

      Elimina
    2. Hai messo un colore o una immagine? Nel caso di un colore è impossibile che non funzioni. Se invece è una immagine allora non hai preso bene il suo link diretto
      @#

      Elimina
    3. ho provato anche a metterlo con il link del suo esempio ma non funziona

      Elimina
    4. Se leggi i commenti precedenti ci trovi casi di persone a cui non funzionava. La spiegazione che mi viene in mente è che tu come gli altri non abbia letto il post con attenzione e che abbia inserito solo la prima parte del codice nell'HTML del post e non il tag di chiusura < / div > .
      Ho provato proprio ora e va tutto bene
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.