Blogger: Inserire un separatore tra widget

Per separare i Widget, nella maggior parte delle volte, sono usate delle immagini. Questo effetto di “divisione” potrebbe portare un miglioramento della grafica del vostro blog presente sulla piattaforma Blogger / BlogSpot. Le modifiche riguardano solamente il file CSS del tema, quindi non è una cosa così impossibile da fare..

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 dei 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:

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Ora una volta trovato dovete dividere questo codice in 2:

.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;

Sostituite la scritta “indirizzo IMG”  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.

Related posts:

1. Personalizzare il tema in Blogger