Inserire bordi o immagini tra i widget nella sidebar di Blogger.

Come mostrare bordi o immagini di divisione tra i vari widget della sidebar o solo in quelli che si desiderano.

In alcuni modelli personalizzati scaricati da internet nella sidebar o nelle sidebar spesso si visualizzano degli elementi di divisione tra i vari gadget. Si può trattare di semplici linee facenti parte di un bordo oppure anche di immagini ovviamente di dimensioni appropriate. Questa personalizzazione diciamo che è una evoluzione dell'altra che prevede la visualizzazione di widget con lo sfondo colorato.

Queste modifiche in realtà sono piuttosto semplici e possono essere utilizzate da tutti coloro cha abbiano un minimo di esperienza nella gestione del modello di Blogger. Prima di procedere con la lettura del post consiglio di consultare l'articolo in cui si tratta dello stile dei bordi visto che utilizzeremo proprio quei codici.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga ]]></b:skin> facendo bene attenzione a che non si sia aggiunta una parentesi graffa sulla sinistra. Subito sopra a questa riga va incollato il codice di una regola CSS

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

Per completezza sono stati messi i codici della sidebar sinistra e di quella destra. Se si ha una sola sidebar si può benissimo lasciare il codice così com'è oppure si può togliere la parte colorata del selettore che non interessa oltre alla virgola che lo divide dall'altro. È stato scelto un bordo tipo double dello spessore di 4 pixel, con il codice del colore #036 e con una distanza di 20 pixel dalla parte bassa. Tutti questi parametri possono essere modificati. Si ottiene questo risultato in tutti i widget della sidebar

Se al posto di bordi o linee preferiamo inserire un motivo grafico allora questo va caricato su Google+ per ottenerne il link diretto. Il codice che va incollato nella stessa posizione allora 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 100% 100%;
padding-bottom:30px;
border:0;
}

Dopo aver salvato il template si ottiene questo risultato

L'URL della immagine può essere modificato così come la distanza dalla parte bassa proposta a 30 pixel. Se desiderassimo questa personalizzazione solo per un determinato widget allora dovremmo trovare il suo ID andando su Layout > Modifica e guardare la parte finale dell'URL nella finestra che si apre. Il widget dell'archivio che ho preso come test ha ID BlogArchive1.

Andando su Modello > Modifica HTML e incollando subito sopra a ]]></b:skin> questo codice

#BlogArchive1 {
border-top:5px dotted #f95b5b;
border-bottom:5px double #f95b5b;
padding-top:10px;
padding-bottom:10px;
}

dopo aver salvato il modello si produce questo risultato



con il bordo superiore punteggiato (dotted) e quello inferiore doppio (double).