Come racchiudere in un bordo la sidebar, il footer, l'header o un widget di Blogger.

Come contornare un elemento di Blogger (sidebar, footer, header, widget, ecc) con un bordo personalizzabile nello stile, nel colore e nello spessore.

Nel precedente articolo abbiamo visto quello che è il codice da usare per modificare lo stile dei bordi e in questo vedremo come applicazione di quel codice un metodo per racchiudere o contornare con un bordo un qualsiasi elemento del nostro blog su Blogger.

Andando su Layout possiamo visualizzare le varie sezioni di cui si compone il nostro sito. Ciascuna sezione ha un suo corrispettivo selettore univoco che si trova facendole precedere dal simbolo del cancelletto ( # ). Si può quindi applicare il codice di un bordo a ciascuna sezione o anche a un singolo widget. I nomi delle sezioni sono visibili su Layout (navbar, header, crosscol, ecc)

Nello screenshot precedente sono stati evidenziati due elementi specifici, la sidebar di destra e il primo footer. La sezione della sidebar è sidebar-right-1 mentre il piè di pagina più in alto ha come sezione footer-1. I corrispondenti selettori univoci sono quindi #sidebar-right-1 e #footer-1.

Per inserire un bordo in tutta la sidebar di destra e nel footer potremo usare questo codice

#sidebar-right-1,#footer-1 {border: dotted  #036; 4px;}

da incollare su Modello > Modifica HTML subito sopra alla riga ]]></b:skin>. Se intendiamo contornare con un bordo solo un elemento lasciamo un solo selettore togliendo anche la virgola. Dopo aver salvato il modello avremo questo risultato

Non fate caso all'aspetto grafico perché si tratta chiaramente di un test. Se si volesse racchiudere l'Intestazione in un bordo il selettore da usare in questo blog di test sarebbe stato #header.

COME CONTORNARE UN WIDGET CON UN BORDO

Invece che operare su una intera sezione lo si può fare su un singolo widget. Si va su Layout e si clicca su Modifica nell'elemento che vogliamo racchiudere in un bordo

Si scorre l'URL della finestra che si apre fino alla sua parte finale

Dopo Id= si vedrà quello che è il selettore del gadget preso in esame. Nello screenshot è Label1. Si possono quindi contornare di bordi alcuni widget che vogliamo evidenziare. Ecco il codice

#Label1 {border: dashed  #f00 6px;}
#BlogArchive1 {border: groove  #00f 6px;}

per contornare con bordi di diverso colore e stile il widget delle Etichette e di Archivio. Si incolla su Modello > Modifica HTML subito sopra alla riga ]]></b:skin> con questo risultato

Non valutate l'aspetto estetico che ho volutamente esagerato per rendere il tutto più chiaro. Quando si conosca il selettore univoco di un elemento con questo semplice procedimento possiamo contornarlo di un bordo personalizzato nello stile, nel colore e nello spessore.