Come personalizzare il widget dei Post Popolari di Blogger.

Come personalizzare il widget ufficiale di Blogger dei Post più Popolari per aumentare le dimensioni delle miniature, togliere i puntini, cambiare font, giustificare lo snippet, ecc

Quando si aggiungono dei gadget al nostro blog su Blogger come prima opzione è meglio verificare se ne esiste uno nativo di Blogger che soddisfa le nostre esigenze. Un widget nativo di Blogger utilizza gli stessi javascript di Google già presenti nel Tema e quindi è in linea di massima meno lento nel caricare di un gadget di terze parti.

Purtroppo non esistono dei gadget nativi di Blogger che mostrano gli Ultimi Articoli o gli Ultimi Commenti con miniatura e l'unico widget che mostra altri contenuti del sito è quello dei Post Popolari.

In questo articolo vedremo come configurare il widget dei Post più Popolari con gli strumenti di Blogger e come modificare ulteriormente il suo aspetto mediante l'utilizzo di appositi CSS.

Per installare tale widget si va su Bacheca -> Layout -> Aggiungi un gadget -> Base -> Post più popolari 

Nella finestra di configurazione si digita il Titolo che di default è Post più popolari quindi si mette la spunta a una delle 4 opzioni disponibili cioè si può scegliere i più visualizzati di sempre, dell'anno scorso, degli ultimi 30 giorni e degli ultimi 7 giorni.

Devo dire che per la mia esperienza non sempre Blogger riesce a mostrare proprio i più visualizzati del periodo prescelto ma spesso li mostra un po' a caso. Su Mostra si può decidere il numero di post da mostrare da 1 a 10 e oltre al titolo se visualizzare anche la miniatura della prima immagine e lo snippet.  Si va su Salva per salvare le impostazioni quindi, con il trascinamento del cursore, si sposta l'elemento pagina nella posizione desiderata per poi andare in alto a destra su Salva disposizione.

Se decidiamo di mostrare la miniatura questa sarà visualizzata solo nei post in cui ci sia almeno una immagine.

ELIMINARE PUNTINI DELL'ELENCO E GIUSTIFICARE LO SNIPPET

In taluni modelli viene mostrato un puntino dell'elenco insieme a titoli, miniatura e snippet. Per eliminare questi marcatori dell'elenco si va su Tema -> Modifica HTML e si cerca la riga ]]></b:skin>. Subito sopra a questa basterà incollare questo codice

#PopularPosts1 li{
list-style:none;
}

quindi si salva il Tema.

Lo snippet come vedete dallo screenshot è allineato sulla sinistra non non lo è sulla destra. Per giustificare il testo si utilizza un'altra riga di codice sempre da incollare sopra alla stessa riga ]]></b:skin>

div.item-snippet {text-align:justify;}

Si salva il Tema per rendere la modifica effettiva.

MODIFICARE LE DIMENSIONI DELLE MINIATURE

Se le miniature sono troppo piccole per le nostre esigenze si possono ingrandire. Il codice necessario si incolla sempre subito sopra alla stessa riga ]]></b:skin> e in questo caso è

div.item-thumbnail img {width:120px; height:120px;}

dove i valori di larghezza e altezza possono essere scelti a piacere.

MODIFICARE ASPETTO DEL TITOLO DEI POST

Per cambiare l'aspetto del titolo si usa invece questo codice

div.item-title a {
font-size:15px;
font-weight:bold;
font-family:Georgia;
}

da incollarsi sempre sopra alla stessa riga. Evidentemente via via che si aggiungono codici questi scaleranno verso l'alto e non saranno più subito sopra alla riga indicata. Si prende come riferimento quella riga solo perché è l'ultima della sezione dei CSS e incollandovi i nuovi codici subito sopra non si corre il rischio che vadano a interferire con gli altri. Si salva il Tema. Tutte le modifiche introdotte porteranno a questo risultato

Le tre righe servono rispettivamente per modificare le dimensioni dei caratteri, per mostrarli in grassetto e per cambiare la famiglia di font. Si può cambiare la famiglia di font anche dello snippet con questo codice

div.item-snippet {font-family:Georgia;}

la cui riga in blu può anche essere aggiunta al blocco di codice usato per la giustificazione. Concludo l'articolo linkandovi altre risorse per la modifica e la personalizzazione dei Post più Popolari:

1. Post più popolari con effetto multicolore
2. Post più popolari in un cubo ruotante
3. Slideshow dei Post più Popolari.