Come separare i widget di Blogger con righe o immagini.

Come aggiungere righe o immagini di separazione a tutti i widget della sidebar o solo ad alcuni.

Nel precedente post abbiamo visto come si possano dividere tra loro i post di Blogger con l'aggiunta di righe o di immagini e come promesso vediamo come personalizzare nello stresso modo anche i widget di una sidebar. Analogamente a quanto fatto per i post si possono aggiungere righe con il tag border oppure immagini con il tag background dopo averle postate su Picasa Web Album.  

I widget possono essere posizionati in una sidebar alla sinistra o in una alla destra della main area ovvero l'area del post.  Prima di procedere bisognerebbe trovare il selettore univoco della sidebar in oggetto utilizzando gli strumenti Ispeziona Elemento di Chrome o Analizza Elemento di Firefox. Nei modelli ufficiali di Blogger questi selettori sono .column-right-outer per quella destra e .column-left-outer  per quella sinistra.

COME AGGIUNGERE UN BORDO DI SEPARAZIONE TRA I WIDGET

Dopo aver salvato il template si va su Modello > Modifica HTML e si clicca sulla freccetta a sinistra della sezione <b:skin> che si trova intorno alla 10-20-esima riga. Si visualizzerà tutto il codice della sezione. Aiutandoci con Ctrl+F  si cerca la riga ]]></b:skin> e, subito sopra, si incolla un codice come il seguente

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

in cui sono stati inseriti i selettori di entrambe le sidebar separati da una virgola. Sono ovviamente personalizzabili i codici dei colori e lo stile del bordo che è stato inserito solo nella parte bassa con il tag border-bottom. Si può anche settare la distanza del bordo dal resto del layout con il tag padding-bottom. Dopo aver salvato il modello la sidebar muterà aspetto in questo modo

Si potrebbe inserire una riga di divisione in un solo widget invece che in tutti i widget della sidebar. In questo caso si deve trovare l'ID del widget cliccando sulla icona del cacciavite e della chiave per modificarlo. Nella finestra che si apre si scorre l'URL fino alla fine per trovare tale ID

 

Nel test che ho fatto il widget ha ID CustomSearch1 ma potrebbe essere HTML12 o Label1, ecc. L'ID è la parte finale dell'URL dopo la stringa widgetid=. Per inserire delle righe di separazione in alto e in basso sempre sopra alla riga ]]></b:skin> si incolla questo codice

#CustomSearch1 {
border-top:4px double #940F04;
border-bottom:4px double #940F04;
padding-top:20px;
padding-bottom:20px;
}

dove l'ID è colorato di viola ed è funzione dell'ID del widget. Le righe evidenziate di giallo servono per inserire una riga di divisione in alto mentre le righe evidenziate di verde per inserirla in basso.

COME AGGIUNGERE UNA IMMAGINE DI DIVISIONE TRA WIDGET

Al posto di un bordo si può inserire una immagine di divisione come le seguenti

Si usa lo stesso meccanismo e lo stesso codice già visto per le righe. Va sostituita soltanto la riga con il tag border-bottom. Per esempio il primo codice diventa

.column-right-outer .widget, .column-left-outer .widget {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAY-Gg944sETRcGiM49eI7eNDOUJV4TVrqR5AgZGTJcO5Q3-pyQyFw9rc2ZKAVIdEndBZPixVQ29phEMR6R9C-tvo7gkSbLoUDwcIU4oHNgWxad755dQzT8f2hsNOCaiNB3iMuqh_kUlg/s575-Ic42/bar48.gif)no-repeat 50% 100%;
padding-bottom:30px;
border:0;
}

con l'URL della immagine da personalizzare a piacere. Il risultato è il seguente

Si può anche personalizzare con le immagini di divisione un singolo widget dopo averne trovato l'ID. In questo caso il secondo codice diventa simile a questo

#BlogList1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizSdka76lwM4_aME92bA7FMTPrYSm90Q9WQku5X1ODfyn26rqkPZ5TAAUxJ3OK6xWfD84mAEEpPFmhFz9s44qI0BTXdsL0pt0Rm_BFTUIHDSxzifLwncqXlOxgpLgIIfitanzouYwO85Y/s580-Ic42/bar47.gif)no-repeat 50% 100%;
background-position: top center; 
padding-top:20px; 
}

con l'ID colorato di viola e l'URL della immagine colorato di rosso da personalizzare.

Se si desidera aggiungere l'immagine nella parte bassa del widget si sostituisce nelle due righe top con bottom. Si può anche settare la distanza dall'alto e/o dal basso. Se si vogliono aggiungere immagini di separazione in alto e in basso è meglio aggiungere due blocchi.