Aggiungere bordo arrotondato ai titoli dei widget di Blogger.

Come aggiungere un bordo arrotondato con sfondo colorati ai titoli dei widget di un blog su Blogger.

Ho appena ricevuto un commento in cui mi si chiede come contornare i titoli dei widget con un bordo arrotondato. Si tratta di una personalizzazione non semplicissima perché per una ragione che ancora non ho compreso la regola CSS dei titoli dei widget di Blogger è la stessa di quella della data.

Quindi se si utilizza il selettore del titolo dei gadget per aggiungere delle regole generali, verranno modificati non solo quest'ultimi ma anche la data, e questo spesso va contro le esigenze dell'amministratore del sito. Come soluzione si possono trovare gli ID dei singoli widget e applicare la regola in modo selettivo.

Per procedere dovremo andare su Layout e cliccare su Modifica negli elementi pagina dei widget di cui si voglia personalizzare il titolo. Alternativamente si può cliccare sulla icona del cacciavite e della chiave inglese per aprire direttamente dalla home del sito la finestra di configurazione. Nella parte alta si visualizzerà l'indirizzo della finestra che si dovrà scorrere fino in fondo. L'ID del widget sarà la stringa finale subito dopo widgetId=. Maggiori informazioni su questo tema si possono trovare nel post su come personalizzare un singolo widget di Blogger.

Per il blog che ho usato come test ho trovato l'ID CustomSearch1 per il widget della Casella di Ricerca e Label1 per quello delle etichette. Con questi ID si crea un codice di questo tipo

#CustomSearch1 h2, #Label1 h2 {border: solid 2px #882c13; background-color:#f6dfcb; border-radius: .7em; padding: .5em;}

Si va su Modello -> Modifica HTML e si cerca la sezione <b:skin>.  Si clicca sulla freccetta nera posta alla sua sinistra quindi con Ctrl+F si cerca la riga  ]]></b:skin> e, subito sopra, vi si incolla il codice poi si salva il template e si apre una pagina del blog per vedere il risultato.

Per editare la parte di codice evidenziata di giallo bisogna aggiungere un cancelletto all'ID e farlo seguire da h2 dopo uno spazio. In sostanza da CustomSearch1 si ricava #CustomSearch1 h2. Si aggiungono tutti gli altri selettori dei widget dopo una virgola. Nel CSS all'interno delle due parentesi graffe si scelgono gli altri parametri del bordo arrotondato:

1. I codici dei colori del bordo e dello sfondo (background) del bottone
2. Lo stile del bordo del contorno del titolo
3. Il padding che determina la distanza del testo dal bordo e quindi la dimensione del "bottone"
4. Il raggio di arrotondamento del bordo con il tag border-radius
5. È stata usata l'unità di misura tipografica em che non è assoluta. 1 em è la lunghezza assegnata al carattere del blog. Quindi per un blog con font-size:12px; significa che l'arrotondamento avrà il raggio di 8.4 pixel (.7em) e il padding di 6 pixel (.5em).