Come personalizzare il widget delle Statistiche di Blogger.

Come personalizzare i colori del numero e dello sfondo del widget che mostra il numero delle pagine viste in Blogger.

Blogger fornisce nella scheda Statistiche accessibile nella Bacheca i dati relativi al numero di pagine viste nel blog con quattro sezioni: 1) Panoramica - per uno sguardo di insieme, 2) Post - per l'elenco dei post più visitati, 3) Origini del traffico - per conoscere gli URL di riferimento e le parole chiave, 4) Pubblico - per conoscere la provenienza geografica dei lettori, il loro sistema operativo e il browser utilizzato.

Il numero delle pagine viste che si ricava dalle Statistiche di Blogger è significativamente maggiore di quello che invece è ricavato da quelle di Google Analytics. Questa discrepanza deriva soprattutto dalle visite di spam che vengono conteggiate in Blogger e invece non considerate in Google Analytics dove vengono rilevate come visite virtuali e non reali.

Su Blogger è anche installabile il widget delle Statistiche per mostrare ai lettori il contatore delle visite. Ci sono anche dei servizi esterni molto efficaci quali Histats per inserire dei contatori ma è meglio evitare per non creare dei link che non c'entrano nulla con il sito e per non appesantire le pagine con javascript esterni.

Per aggiungere il widget delle statistiche si va su Layout -> Aggiungi un gadget -> Base -> Statistiche del blog che poi deve essere configurato scegliendo il periodo di monitoraggio e lo stile.

Si può scegliere di mostrare il numero di pagine viste degli ultimi 7 giorni, degli ultimi 30 giorni o dall'inizio della vita del blog. Ci sono poi quattro stili di contatore con le due opzioni Nero e Bianco Trasparente.

COME PERSONALIZZARE L'ASPETTO DEL CONTATORE

I colori del contatore delle visite sono tendenti a un grigio che può non andare d'accordo con gli altri colori del blog. Vediamo come modificare questi colori aggiungendo dei CSS al Tema di Blogger. 

Qualsiasi stile si sia scelto dopo aver salvato il template si va su Tema -> Modifica HTML e si cerca la sezione <b:skin> quindi si clicca sulla freccetta nera posta sulla sinistra per visualizzare tutto il codice. Con Ctrl+F si cerca la riga ]]></b:skin> e, subito sopra, si incolla il codice adatto allo stile che si è scelto.

STILE NUMERO 1

L'obiettivo è quello di centrare il numero di visite e di cambiargli il colore. Per questa modifica



il codice da usare è il seguente

/* CSS Widget Statistiche */
#Stats1_content { text-align: center;  }
span#Stats1_totalCount { color: #483ae1 !important; }

dove si deve personalizzare il codice del colore per poi salvare il Tema del blog.

STILE NUMERO 2

Con il secondo stile dobbiamo apportare delle modifiche come in questo screenshot



Il codice da usare in questo caso è il seguente

/* CSS Widget Statistiche */
#Stats1_content { text-align: center; }
span#Stats1_totalCount {color: #483ae1 !important; }
img#Stats1_sparkline { background: #e9fba5 !important; }

dove vanno personalizzati i codici dei colori del numero e dello sfondo della miniatura. A partire dallo stile numero 2 è possibile scegliere anche lo sfondo bianco al posto di quello nero. Il grafico in questo caso si vedrebbe di colore bianco e per migliorare la visibilità si dovrà scegliere un colore di sfondo scuro.

STILE NUMERO 3

Con lo stile numero 3 apporteremo delle modifiche che porteranno a questo risultato



Il codice da incollare con le stesse modalità è il seguente:

/* CSS Widget Statistiche */
#Stats1_content { text-align: center; }
.Stats .digit {border: 1px #2d3903 solid !important; background: #e9fba5 !important; color: #483ae1 !important; }
.Stats .blind-plate { border-top: 1px #2d3903 solid; }

dove i tre codici dei colori sono quelli del numero, dello sfondo e dello spazio tra le singole cifre. Lo spessore del bordo inserito tra le varie cifre non può essere diverso da 1 pixel.

STILE NUMERO 4

Con lo stile numero 4 opereremo queste personalizzazioni



Il codice da incollare con le stesse modalità è il seguente

/* CSS Widget Statistiche */
#Stats1_content { text-align: center; }
.Stats .digit {border: 1px #2d3903 solid !important; background: #e9fba5 !important; color: #483ae1 !important; }
.Stats .blind-plate { border-top: 1px #2d3903 solid; }
img#Stats1_sparkline { background: #fef1d9 !important; }

dove ho inserito due codici di colori diversi per lo sfondo del numero e del grafico.