Come modificare le dimensioni delle miniature nel widget dei Post più Popolari di Blogger.

Come modificare le dimensioni delle miniature delle immagini nel widget dei Post più Popolari di Blogger.

Il gadget dei Post più Popolari è uno di quelli ufficiali di Blogger e mostra in ordine decrescente gli articoli che hanno avuto il maggior numero di visite. Per installarlo si va su Layout > Aggiungi un gadget > Post più Popolari. Possiamo scegliere il numero di elementi da visualizzare da 1 fino a 10, il lasso di tempo da prendere in considerazione per le statistiche e se mostrare solo il titolo o anche la miniatura e lo snippet.

In alcuni modelli questo widget viene mostrato come un elenco con degli antiestetici puntini prima di ogni miniatura. Mi sono già occupato di come eliminare questo problema e di come personalizzare tutto il widget. Con i CSS presentati in quel post non era però possibile modificare le dimensioni delle miniature. La cosa si è potuta risolvere utilizzando JQuery.

Adesso vediamo come sia possibile cambiare altezza e larghezza delle miniature del gadget senza l'utilizzo di librerie javascript esterne che possono dar luogo a questioni di incompatibilità ma apportando soltanto delle piccole modifiche al modello. Il nostro obiettivo sarà quello presentato in questo screenshot

Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Si pigia su F3 o su Ctrl+F e si incolla il titolo del widget per cercalo nel template. Si vedrà una cosa simile al seguente screenshot

Si scorre il codice fino a trovare le stringhe
height='data:thumbnailSize'  e
width='data:thumbnailSize'

Ce ne dovrebbero essere due per ciascuna di esse



In entrambe le occorrenze dovranno essere sostituite rispettivamente con

height='160'  e
width='160'

dove il numero 160 rappresenta la dimensione in pixel della altezza e della larghezza della miniatura e che può essere ovviamente scelta a piacere.

Si salva il modello. Le miniature delle immagini dei post prenderanno le nuove dimensioni. Concludo ricordando che per togliere il puntino si cerca la riga ]]></b:skin> e, subito sopra, si incolla il CSS

#PopularPosts1 li{list-style:none;}