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>
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjclZ-o20YrEY9rDunVKb1c-3buwbzXdUxp0vKZ_0662BvEhpMK69tlfbNBKeq8gsRzrv7JXNHjvEVCdZGUx8FpyleHpyY8iHP_niIH6W3vDYVM7xJ9lTE3yaq1XcrBdOR62qiniAo_dJA/s900/texture1.jpg);'>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.
</div>
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0x3a92tsgNfCP3NXgKB9suqqWyw5yNe56fklgJv0Y2zO1djVxN9cVyHYn3txYAQnwS_n9eyrDVN2HhCcxa0FMiMFFwgNTL5EldEkmYABP0JHdUMul8xhNZ4DhDpBbP-cagAnksEIqQss/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge62P7eQlGNJ97kBx7pw9rA89mrGO7UBPopyIjNB57ogoPVZ5E8g_0WQu7yYCea_etgE_NqV3hc9SuDAla-DB8jRg97pDPUudwLwG6y9W0LivMXwF_pDBjDwue6O0LU1a4gruB5hyphenhyphendggY/s900/texture3.jpg);'>
e che si può scegliere di non mostrare le ripetizioni dell'immagine in questo modo
<div style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge62P7eQlGNJ97kBx7pw9rA89mrGO7UBPopyIjNB57ogoPVZ5E8g_0WQu7yYCea_etgE_NqV3hc9SuDAla-DB8jRg97pDPUudwLwG6y9W0LivMXwF_pDBjDwue6O0LU1a4gruB5hyphenhyphendggY/s900/texture3.jpg) no-repeat;'>
a me non funziona
RispondiElimina@shadowslide
EliminaCosa non ti funziona? Non ci dovrebbero essere problemi. Forse sbagli a caricare l'immagine.
Ciao Ernesto.
RispondiEliminaLa 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
@Horsepower
EliminaGuarda 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.
Non ci salto fuori.
EliminaQuesto è 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).
Sono andato a tentativi. Sembra che ce l'abbia fatta. :-)
Eliminaciao e grazie per il tutorial,avrei una domanda da farti:come cambio il colore dello sfondo?
RispondiElimina@Tina/Dulcisinfondo
EliminaSe 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
salve, anche a me non funziona:(
RispondiEliminavorrei 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?
@teti900
EliminaSe non funziona anche con la mia immagine potrebbe darsi che non sia visualizzabile con Safari, non trovo altre spiegazioni possibili.
(uso chrome e ho provato anche con firefox) riproverò!
Eliminagrazie e buona giornata:)
Vorrei personalizzarlo lo sfondo,ma mi sai dire che dimensione abbia??
RispondiElimina@IvanDeFelice
EliminaL'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.
Ma se si proverà a mettere un immagine lavorata con Gimp dici verrebbe accettata?? al limite provo sperando non la sformi...bo proverò...
RispondiEliminaEgregio
RispondiEliminaErnesto 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.
@StefanoAntonello
EliminaLe 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.
ciao scusa il disturbo
Eliminapuoi 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
@angelapercaso
EliminaNel 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.
Ciao Ernesto,
RispondiEliminavorrei 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!
@ Claudia Annie
EliminaSe 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ù...
Ciao, sono nuovo di blogger, sempre usato Wp e secondo me rimane il migliore...
RispondiEliminacomunque 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?
@# 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
EliminaCiao! trovo questo articolo molto utile! :)
RispondiEliminaHo 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 ;)
@# Per ripetere una immagine solo verticalmente si usa il tag
Eliminarepeat-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
Grazie mille! ^.^ ***
EliminaCome posso inglobare l'immagine con lo sfondo, o bloccare l'immagine del book presente http://deltareversal.blogspot.it/p/tutorial.html
RispondiEliminaCiao.
RispondiEliminaProbabilmente 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
Al titolo di un solo post o al titolo di tutti i post?
EliminaIl 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
@#
L'idea era quella di mettere lo sfondo su TUTTI i titoli
Eliminaperò 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
Si. Esattamente così. Ricordati di salvare il
RispondiEliminamodello
@#
Grazie ... a c'è un problema
RispondiEliminah3.post-title, .comments h4 non lo trova con il ctrlF
io uso un modello blogger (viaggi)
Se ti interessa solo il titolo puoi modificare questo codice
Eliminah3.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
@#
Sai quale è il problema?
EliminaChe 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
Sei un genio .. beccato pure il blog!
RispondiEliminaE 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?
perchè non funziona? ho controllato anche in HTML mi dice che lo mette davanti al post ma quando visualizzo il blog non va!!
RispondiEliminaProva a pubblicare l'articolo o a aggiornarlo direttamente da Html senza andare su Scrivi
RispondiElimina@#
ho provato anche da lì, non funziona :(
EliminaHai 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@#
ho provato anche a metterlo con il link del suo esempio ma non funziona
EliminaSe 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 > .
EliminaHo provato proprio ora e va tutto bene
@#
Ciao Ernesto, come stai?
RispondiEliminaTi scrivo perché sul mio blog appare sempre in basso una riga bianca, in tutti i post e pagine, e non capisco cosa sia, non ho trovato nessuna immagine, layout, widget etc. a cui poter associare il problema. Il mio sfondo è interamente nero e l'ho settato così in tutte le impostazioni del tema... secondo te cosa può essere?
Grazie mille!
Il problema è in questa riga
RispondiElimina<div class='post-footer-line post-footer-line-1'>
sotto la quale ci sono un sacco di elementi inutili. Prima di fare delle modifiche, salva il tema per un eventuale ripristino
@#