Come inserire linee o immagini di separazione tra i widget della sidebar.

Mi sono già occupato di come inserire delle immagini di separazione tra articolo e articolo da visualizzare nella homepage, nelle pagine di archivio e in quelle delle etichette. Adesso applichiamo lo stesso concetto ai widget presenti in una sidebar. L'obiettivo è quello di inserire una linea o anche una immagine che divida i singoli widget. Dobbiamo semplicemente agire aggiungendo opportuni CSS nel modello.

Nuovi template del Designer Modelli 

Se si ha un modello del nuovo tipo, bisogna andare su Design > Modifica HTML e cercare la riga

]]></b:skin>

Immediatamente sopra si incolla questo codice

.column-right-outer .widget, .column-left-outer .widget {
border-bottom:4px double #940F04;
padding-bottom:20px;
}

per inserire una linea orizzontale di separazione. Si salva il modello e si vedranno i gadget separati da una linea orizzontale

Si potrà personalizzare la linea in funzione di altri stili dei bordi che possono essere inseriti al posto dei parametri in rosso della seconda riga. il valore di 20 pixel determina la distanza tra la linea e il gadget. Se al posto di una riga si vuole inserire una immagine, occorre innanzitutto caricarla su Picasa e acquisirne il link diretto. Il codice da incollare, nella stessa posizione del modello diventa

.column-right-outer .widget, .column-left-outer .widget {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWluV_1A65LCOp_SuXHZvFXDHqKeV7V4kA4UHunCJqrBnBfghypWw8DmMGl8G7hD-KJStcGPl-HJaLM6R_yXoH-YVzPeR6saKz-zfQvo1gc4XBlytz6Iy3s3WzeasjukbtSG_7m45axoo/)no-repeat 50% 100%;
padding-bottom:30px;
border:0;
}

dove al posto dell'URL colorato di rosso, si deve inserite l'hotlink dell'immagine. Dopo aver salvato il modello, si vedrà una cosa simile a questa

  Se si vuole personalizzare la colonna di sinistra, si sostituisce nei codici precedenti right con left. Si può anche andare su Design > Designer Modelli > Avanzato e incollare il codice del CSS nel campo sulla destra quindi andare in alto e cliccare su Applica a blog.

Vecchi modelli di Blogger

Se si hanno dei template vecchi, il procedimento per inserire la linea o l'immagine di separazione è lo stesso, variano solo i codici che sono

.sidebar .widget {
border-bottom:4px double #940F04;
padding-bottom:20px;
}

nel caso si voglia inserire una semplice linea di separazione. Se invece si opta per una immagine, il codice diventerà

.sidebar .widget {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWluV_1A65LCOp_SuXHZvFXDHqKeV7V4kA4UHunCJqrBnBfghypWw8DmMGl8G7hD-KJStcGPl-HJaLM6R_yXoH-YVzPeR6saKz-zfQvo1gc4XBlytz6Iy3s3WzeasjukbtSG_7m45axoo/)no-repeat 50% 100%;
padding-bottom:30px;
border:0;
}

con i parametri da personalizzare come nei nuovi template.