Come personalizzare i colori di testo e di sfondo nei risultati di ricerca di Blogger.

Come personalizzare il colore del testo e il colore dello sfondo nei risultati di ricerca del widget ufficiale di Blogger.

Ho appena letto una domanda posta da una lettrice sulla pagina Facebook collegata a questo sito in cui mi si chiedeva se fosse possibile modificare il colore di sfondo dei risultati di ricerca di Blogger che appaiono sopra all’area del post. La lettrice non ha aggiunto altri particolari ma mi pare di aver capito che utilizzi il widget ufficiale di Blogger per la ricerca che si trova su Layout –> Aggiungi un gadget –> Base –> Casella di ricerca.

Personalmente non uso tale widget in questo sito ma preferisco il motore di ricerca di Adsense mentre questo gadget lo utilizzo in un blog di prova per fare delle ricerche personali. Sul momento ho dato una risposta negativa alla possibilità di modificare l’aspetto dei risultati di ricerca poi però mi sono incuriosito e utilizzando i tool Ispeziona Elemento di Chrome e Analizza Elemento di Firefox sono riuscito a ricavare il selettore univoco per tutta la finestra dei risultati di ricerca. Creando una apposita regola CSS ecco come ho cambiato l’aspetto di tali risultati nel mio blog di test

con i colori che possono ovviamente essere personalizzati modificando i codici dei colori. Dopo aver salvato il template, si va su Modello –> Modifica HTML, si cerca la sezione <b:skin> quindi si clicca sulla freccetta nera posta alla sua sinistra per visualizzare tutto il codice. Con Ctrl+F si cerca la riga ]]></b:skin> e, subito sopra a questa, si incolla questo codice

div.gsc-results.gsc-webResult {background-color:#f3eb86 !important; color:#00f !important;}

quindi si salva il modello. Si modificano solo i codici HEX per avere dei colori adatti al nostro blog. Lo sfondo è determinato dal tag background-color mentre il tag color serve per il colore del testo.