Inseriamo un separatore tra i Widget di blogger!

• @mister6339 (Michele Laganà)


• 16 Nov 2008

Terza domenica del mese, come ogni giorno, anche oggi, noi di Geekissimo è qui a tenere compagnia a ogni Geek, con notizie, trucchi e ancora di più. Nell’articolo di oggi, vi mostro come inserire dei separatori tra i vari Widget dei temi di Blogger.

Per separare i Widget, nella maggior parte delle volte, sono usate delle immagini che aumentano in bene, almeno si spera, la grafica del vostro blog presente sulla piattaforma Blogger / BlogSpot. Le modifiche riguardano solamente il file CSS del tema, quindi un minimo impegno per un bel risultato. La prima cosa che vi ricordo di fare è quella di salvare sul PC, un backup del file CSS, in modo da poterlo ripristinare nel caso vi si presentino problemi dopo aver applicato le modifiche.

Dopo aver fatto il backup, recatevi nel pannello di amministrazione del vostro blog e andate in: LAYOUT –> Modifica HTML. Se utilizzare Firefox, premete ctrl+F e cercate la parola: sidebar .widget, e cercate il codice che vedete sotto.

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Dividete il codice in due, come vedete sotto:
.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.sidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Dopo aver separato queste due parti del codice CSS, aggiungete questo codice in “.sidebar .widget”:
background-image: url(indirizzo IMG);
background-position: bottom;
background-repeat: no-repeat;
Ovviamente, sostituite la scritta “indirizzo IMG” che c’è tra parentesi, con l’indirizzo url dell’immagine che volete inserire tra un Widget e l’altro. A questo punto, salvate il tutto. Se avete fatto correttamente tutti i passaggi, avrete l’immagine che avete scelto come separatore, tra un widget e l’altro.