Come trovare l'ID di un widget di Blogger per modificarne l'aspetto con i fogli di stile

Nell'articolo precedente ho parlato di come si possa nascondere un contenuto attraverso i tag dispaly:none; e visibility:hidden;. Se si tratta di un elemento presente in un articolo basta andare in modalità HTML e postare questo codice

<div style="display:none;"> ... codice HTML dell'elemento da nascondere ... </div>

Se vogliamo nascondere un widget dobbiamo andare su Modello > Modifica HTML > Procedi e, prima della riga ]]></b:skin>, incollare questo codice

#WIDGET_ID {display: none; }

Il punto è allora quello di trovare l'ID di un singolo widget. La cosa può essere fatta in modi diversi. Se abbiamo dato un titolo al widget, possiamo andare su Modello > Modifica HTML > Procedi e espandere i modelli widget. Si preme su F3 o su Ctrl+F e si incolla il titolo del widget, se ne troverà immediatamente l'ID

Dallo screenshot precedente si vede che l'ID del widget degli Ultimi Commenti è HTML6. La maggior parte dei widget ha infatti un ID del tipo HTMLX dove X è un numero naturale che varia da modello a modello e che è determinato dalla posizione e dall'ordine con cui sono stati inseriti i singoli widget.

In questo caso se per esempio volessimo nascondere il widget dovremmo incollare sopra alla riga  ]]></b:skin> questo codice

#HTML6 {display: none; }

Nel caso non fosse presente il titolo, potremmo inserirne uno posticcio per poi andare a cercare il codice nel modello. Si può sempre eliminare in un secondo momento. Un sistema più rapido per trovare l'ID di un widget è riservato agli utenti di Firefox, Chrome e Opera (non Internet Explorer). In questi browser in basso a destra di ciascun widget l'amministratore del blog, e solo lui, visualizza una icona con cacciavite e chiave inglese.

Se si punta con il mouse si visualizza il messaggio Modifica. Cliccandoci sopra si apre una nuova scheda del browser, che può essere popup o a tutta pagina. In ogni caso la parte finale dell'URL di questa pagina, che può essere visualizzato nella barra del browser, mostra l'ID del widget 

Non si può sbagliare perché prima dell'ID del gadget c'è proprio la stringa widgetId= … Ricordo che l'ID è case sensitive e che quindi le maiuscole sono diverse dalle minuscole. Se scrivete blogarchive1 invece di BlogArchive1 il CSS non funzionerà.  

Piuttosto che nascondere il widget, si possono invece inserire dei parametri che ne modifichino l'aspetto come per esempio

#HTMLX {
border:1px dotted #003366;
background-color: #FDBCB7;
}

per inserire un bordo e un colore di sfondo. Ricordo ai meno esperti di leggersi il post sui codici dei colori e lo stile dei bordi. Si possono modificare anche i singoli elementi di un widget quali il colore del titolo, quello dei link visitati ecc. Ricordo per esempio che per il titolo occorre usare un CSS come questo

#HTMLX h2 {
color:#003366;
}

che ne modificherà il solo colore.