Come personalizzare l'aspetto di un singolo widget di Blogger.

Come modificare aspetto di titolo, colore, sfondo e link di un determinato widget di Blogger lasciando inalterati gli altri.

Nei blog su piattaforma Blogger con l'introduzione del Designer Modelli è possibile personalizzare l'aspetto dei widget presenti nella sidebar o nel footer. Dopo aver salvato il template si va su Modello > Personalizza > Avanzato > Gadget. Nella colonna di destra si potranno in questo modo scegliere la famiglia e la dimensione del carattere del titolo, il suo colore e eventualmente anche il grassetto o il corsivo.

Dopo le modifiche bisogna sempre andare in alto a destra su Applica al blog per rendere le modifiche effettive. In basso si visualizzerà l'Anteprima dei cambiamenti introdotti prima di averli salvati. Da notare che di default i titoli dei gadget hanno l'aspetto determinato dallo stesso CSS usato per la data dei post. Utilizzare il Designer Modelli nei template che hanno subito delle personalizzazioni non è però consigliabile visto che talvolta basta cliccare su Personalizza per perdere molte di queste modifiche. Inoltre con il Designer Modelli non si può intervenire nello sfondo del widget, nel colore del testo o in quello dei link.

In questo post vedremo come personalizzare l'aspetto di un singolo widget lasciando inalterati tutti gli altri. Si tratta di una soluzione interessante qualora si volesse evidenziare un particolare gadget.

 

TROVARE L'ID DEL WIDGET DI BLOGGER

Per qualsiasi modifica di un gadget occorre conoscere il suo ID univoco. Potremmo usare i tool Ispeziona Elemento di Chrome o Analizza Elemento di Firefox ma è molto più semplice ricavare l'ID in modo empirico. Si va su Layout quindi si clicca su Modifica nell'elemento in oggetto e si scorre fino in fondo l'indirizzo della finestra che si apre 

L'ID del widget è la stringa che si trova dopo widgetId= e che è evidenziato di giallo nello screenshot. Nel test che ho effettuato ho preso un gadget delle etichette con Label1 come ID. Se fosse stato un widget HTML/Javascript il suo ID sarebbe stato HTMLX con X un numero naturale che dipende dalla cronologia della sua installazione (il primo widget installato nel modello sarà HTML1, il secondo HTML2 e così via). Per personalizzare il widget si va su Modello > Modifica HTML e si cerca la sezione <b:skin>. Si clicca sulla freccetta nera alla sua sinistra per visualizzare tutto il codice della sezione. Poi con Ctrl+F si cerca la riga ]]></b:skin> quindi, subito sopra, si incolla questo codice

#Label1 {
background:#ffffe0;
padding-left:15px;
font:14px Georgia;
border-bottom:2px dotted #8b8b00;
}
#Label1 h2 {
padding-top:10px;
font-size:20px;
color:#fd3835;
}
#Label1 a:link {
color:#d239d0;
text-decoration:none;
}
#Label1 a:visited {
color:#34d808;
text-decoration:none;
}
#Label1 a:hover {
color:#6414f3;
text-decoration:underline;
}

L'ID Label1 è solo indicativo e deve essere sostituito dall'ID del widget che vogliamo personalizzare. I quattro blocchi di codice servono rispettivamente per personalizzare tutto il widget, personalizzare il suo titolo, il colore dei link, il colore dei link visitati e quello dei link puntati dal mouse. Si salva il modello e le modifiche introdotte porteranno a questo risultato

I parametri ei tag utilizzati riguardano i codici dei colori, lo stile del bordo e la famiglia dei caratteri. Naturalmente possono esserne aggiunti anche altri. Chi volesse approfondire questo tema può scaricare il mio e-book gratuito Guida all'HTML e al CSS.