Mostrare i widget di Blogger con il cursore di scorrimento per salvare spazio.

Come inserire i widget di Blogger in un riquadro con cursore di scorrimento in modo da risparmiare spazio nel Layout.

Ho già affrontato il tema di come risparmiare spazio nel layout di Blogger, mi riferisco soprattutto allo spazio in altezza. Se per esempio decidiamo di visualizzare il widget degli Ultimi Articoli con Miniature inserendo 18 elementi si occupa completamente un intero scroll della sidebar. Nel post linkato prendevo in considerazione esclusivamente i gadget inseriti tramite HTML/Javascript che potevano essere modificati direttamente da Layout. Adesso vediamo come si possa inserire un cursore di scorrimento anche in gadget quali l'Archivio e le Etichette utilizzando un semplicissimo CSS.

COME INSERIRE IL CURSORE DA LAYOUT

Per i widget installati con il codice basterà cliccare sulla icona del cacciavite e della chiave inglese o andare su Layout > Modifica per poi aggiungere all'inizio e alla fine del codice queste due righe

<div style="height: 300px; width: auto; overflow: auto;">
Codice del widget inserito in un gadget HTML/Javascript
</div>

dove l'altezza del widget potrà essere scelta a piacere. Il risultato sarà questo

con la possibilità comunque di visualizzare ugualmente tutto ma solo mediante lo scorrimento del cursore. Lo screenshot mostra un risparmio di spazio evidente.

COME INSERIRE IL CURSORE DA MODELLO

Ci sono widget ufficiali di Blogger che possono essere particolarmente lunghi. Penso a quello delle Etichette mostrato in Elenco o a quello dell'Archivio se non si è scelta l'opzione compatta. In questi casi non si può operare da Layout perché si apre una finestra senza codice. Dobbiamo quindi ricavare l'ID del gadget per modificare direttamente il modello.

Dopo aver cliccato su Layout > Modifica si scorre l'URL della pagina fino alla fine. L'ID del gadget sarà la parte finale dell'indirizzo dopo widgetId= come mostrato nello screenshot. Per un gadget di Etichette sarà probabilmente Label1 mentre per quello di Archivio potrebbe essere BlogArchive1. Dopo aver salvato il template si va su Modello > Modifica HTML e con Ctrl+F si cerca la riga ]]></b:skin>. Si clicca eventualmente sulla freccetta nera per visualizzare tutto il codice e subito sopra a questa riga si incolla un nuovo foglio di stile come questo

#Label1 .widget-content {height:300px; width:auto;overflow:auto;}

se si vuole inserire il cursore nelle Etichette o quest'altro

#BlogArchive1 .widget-content {height:300px; width:auto;overflow:auto;}

se invece lo si vuole fare per l'Archivio. L'altezza dello spazio occupato (300 pixel) è puramente indicativa e potrà essere settata a piacere. Si salva il modello e il risultato sarà questo

Questo secondo procedimento può anche essere usato per i widget HTML/Javascript in alternativa alla prima procedura. In questo caso un esempio di codice da incollare nello stesso punto potrebbe essere

#HTML20 .widget-content {height:300px; width:auto;overflow:auto;}

dove HTML20 è l'ID del widget in questione.