Inserire uno sfondo nei titoli degli elementi su Blogger


Quella di inserire uno sfondo nei titoli dei vari elementi su Blogger è una piccola modifica abbastanza semplice, ma che se ben fatta arricchisce decisamente di un tocco di classe non indifferente un template.

In generale amo molto i template che fanno largo uso di elementi grafici, purchè non siano troppo pesanti e si integrino bene con il resto.

 

Per questo effetto in particolare, partiamo dal modello predefinito di Blogger Washed Denim (giusto per non fare le prove col solito Minima!) per ottenerlo, passando da questo:

image 

a questo:

image

Vediamo come fare.

Modifichiamo il template

Come sempre, il primo passo è quello di fare il backup del template di Blogger, così se qualcosa va storto possiamo sempre tornare indietro sui nostri passi.

Dalla bacheca di Blogger, andiamo in Layout->Modifica HTML, selezioniamo “Espandi i modelli widget” e cerchiamo questa porzione di codice:

.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
font-size: 100%;
color: $sidebarTitleTextColor;
}

Aggiungiamo la riga che ho evidenziato in rosso:

.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
 background:url(indirizzo dell’immagine) no-repeat center left;
font-size: 100%;
color: $sidebarTitleTextColor;
}

Sostituendo indirizzo dell’immagine con l’indirizzo di un’immagine che abbiamo precedentemente pubblicato in rete, magari con un servizio come ImageShack o Skydrive, e che magari abbiamo ridimensionato all’occorrenza con un servizio come ResizR.

Salviamo il template e visualizziamolo per vedere subito l’effetto. Nel mio caso, ho cambiato il colore del titolo per renderlo maggiormente visibile, da Layout->Caratteri e colori:

image

Cosa fare se non trovate la porzione di codice

In alcuni template davvero essenziali (come nel tempalte Minima), potreste non trovare la porzione di codice che ho indicato. In questo caso cercate la seguente porzione di codice

.sidebar {
  …
}

e subito sotto incollate:

.sidebar h2 {
  background:url(indirizzo dell'immagine) no-repeat center left;
}

Alternativamente, potreste trovare:

#sidebar {
  …
}

e in questo caso per uniformità sotto incollate:

#sidebar h2 {
  background:url(indirizzo dell'immagine) no-repeat center left;
}

Una volta fatta questa modifica, tutti gli elementi che aggiungeremo in futuro avranno questo sfondo nei titoli.

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

32 commenti:

Il Profeta Elia ha detto...

GRAZIE DI ESISTERE!

AUTOdiMERDA ha detto...

Ciao Tene come va? Ti ho aggiunto nelle letture dei blog, potrei chiederti di farlo nel mio blog? vorrei vederlo in azione... :)

Poi invece volevo chiederti se hai scritto un modo per far visualizzare i commenti come nel tuo blog, cioè senza dover cliccare "commenti" per farli aprire. A presto e complimenti x i tuoi articoli!!! ciao tene

Miriam ha detto...

Ciao complimenti per il tuo utilissimo blog! E' da tempo che cercavo spiegazioni in italiano su come muovermi nel complesso mondo del "linguaggio html".
Ancora grazie

Samuel ha detto...

bello qst, grazie!!!

Chiar(osk)a ha detto...

Uh! sei passato dal mio blog! ^^ sei stato gentile!
e grazie anche per i complimenti! certo è che se il mio blog è così lo devo anche a te!
ciao!!!!

Boby ha detto...

suggerimenti per realizzare un bello sfondo? scherzo, anche se poi tanto creativa non lo sono mai stata xD

ottimo post cmq. Adoro la parte tecnica...

vicio ha detto...

wow molto utile bravo e' sopratutto kiaro

PuntodivistaCeliaco ha detto...

Bello. Stavo cercando una cosa del genere.
Implementato con successo.

Grazie mille.

Ciao.

lamagagiò ha detto...

Ciao Tenebrae, tutto ok? Io, appena rientrata da Londra, ti pongo subito un quesito...è possibile inserire su FB un post dal blog? Passo a trovarti anche su FB...

Spyke ha detto...

ciao ho fatto la modifica ancora qualche tempo fa!
ma non ho risolto un problema che mi veniva fuori
puoi vedere qui se voui :http://spyke-prt.blogspot.com/2008/03/finalmente-arrivata-la-primavera-30-mar.html
in pratica il testo continua senza lo sfondo
ma soprattutto copre le sritte sottostanti
come posso fare?
grazie e ciao

Monteiasi ha detto...

Tenebrae per gli elementi messi al centro della pagina?..ho apportato le modifiche ma me le applica solo agli elementi a destra della pagina

Miriam ha detto...

ciao grazie alle tue indicazioni sono riuscita a rendere il fondo del mio blog di acquerelli come il fondo di una pagina di un "cartoncino di acquerelli" con un effetto splendido. Ti ringrazio ancora e ti segnalerò tra la mia lista di link preferiti!!!!

melandrir ha detto...

Per poter aggiungere questa piccola modifica grafica le immagini,secondo te,di quale grandezza dovrebbero essere?

AUTOdiMERDA ha detto...

we tene che fine hai fatto... leggi il mio commento sopra risp perfav

Tenebrae ha detto...

@auto: eccomi! hai provato a dare un'occhiata a questo post?

Tenebrae ha detto...

@melandrir: dipende dalle dimensioni delle colonne così come sono previste nel template, puoi guardare la proprietà width della colonna o fare prove e vedere quale dimensione si adatta meglio

Tenebrae ha detto...

@monteiasi: per gli elementi al centro sarebbe qualcosa tipo .main h2 {, ma considera che a quel punto lo sfondo lo prenderebbero anche i titoli dei post

Tenebrae ha detto...

@spyke: nel tuo caso è un problema del template, che come vedi a parte lo sfondo sovrappone il titolo col testo sotto, bisognerebbe intervenire e sistemare il template

Tenebrae ha detto...

@boby: anch'io non sono un grande artista :)

quanto ai suggerimenti... fammici pensare e vedremo!

AnnaDrai ha detto...

da te c'è sempre qualcosa da imparare e lo spieghi così bene che viene sempre voglia di sperimentare tutto quello che consigli!
la voglia c'è, è il tempo che manca sempre!
come dici tu in una vita si possono fare un tot di cose, per cui... occorre fare delle scelte ;)
ancora grazie

melandrir ha detto...

grazie della risposta.Ci provo subito

Nadia ha detto...

Ciao, volevo farti i complimenti per il blog, senza il tuo aiuto non sarei neanche riuscita ad aprirlo! Ho un problema con il colore del titolo dei post: ho eseguito quanto spiegato da te, ma il titolo si colora solo per una parte... mi puoi aiutare? grazie mille!

sweetcook ha detto...

Ciao, innanzitutto volevo farti i complimenti per la chiarezza dei post e per la tua disponibilità:)
Scusa la mia imbranataggine ma, se io volessi mettere uno sfondo sul viola agli elementi del mio blog (come tu li hai messi verdi nel tuo) che tipo di indirizzo dell'immagine dovrei mettere? Ti ringrazio in anticipo:)

amrita ha detto...

io ho usato uno stratagemma differente...ho preparato i titoli per le cose che volevo aggiungere nella sidebar,con font image generator,e ad ogni elemento aggiunto,ho inserito un gadget,come avessi voluto inserire delle foto.ed ho semplicemente caricato le immagini preparate prima.
decisamente tu ti spieghi meglio....per capirci,vieni a vedere
labottegadiamrita.blogspot.com

Nadia ha detto...

ciao Tenebrae! Grazie per essere passato dal mio spazio, che solo grazie a te sono riuscita a creare e modificare: SMACK!
Quello che intendevo dire è che non riesco a cambiare lo sfondo ai titoli come mostri tu nel tuo esempio qui sopra... mi si colorano solo a metà... Seguo la tua spiegazione (io ho il minima)sicuramente sono io che sono imbranata perchè non sono molto tecnologica ;) !
Grazie di tutto e buona domenica

italida ha detto...

oh, veramente, grazie di esistere!!! :D

ñ¡¢ø£ëtå ha detto...

Ciao Tenebrae!
Io ho un altro problema con i titoli degli elementi sul blog... non si visualizzano. Scrivo il titolo del elemento aggiunto ma non si vede niente. Ho modello Minima con tre colonne.
Cosa si può fare?

grazie !

Nicoleta
Agenda di Nico

Paolo Ferrara ha detto...

:)) ok

meringhe ha detto...

E' la prima volta che mi "servo" dei tuoi consigli e in due minuti ho fatto tutto, non ci credo! Grazie! Inserisco subitissimo il tuo banner!

Think Spring ha detto...

Ciao Tenebrae!
volevo ringraziarti perchè poco a poco sto modificando il mio nuovo blog.
Ho solo una modifica alla quale tengo e che non riesco a trovare nel tuo blog: vorrei inserire al posto dei titoli degli elementi, una piccola icona, ognuna diversa per i vari titoli, anzichè il solito sfondo che mi si colora in automatico tutte le volte che creo un titolo.
Un po' contorta come cosa, potresti illuminarmi?
Grazie di vero cuore

e. ha detto...

ciao Tenebrae, io ho aperto il mio blog con blogger circa un mese fa. Ho il template semplice, ma non riesco a trovare nessuna parola "sidebar". Il codice che hai scritto tu proprio non c'è. Sapresti dirmi qualcosa? Grazie.

solofilm ha detto...

Ho lo stesso problema di 'E' ..a me la parola 'sidebar' non appare per nulla..


Prima di lasciare un commento, leggete qui

Posta un commento