Come aggiungere un cursore di scorrimento ai widget di Blogger per ottimizzare lo spazio.

Come aggiungere una scrollbar o cursore ai widget di Blogger per risparmiare spazio.

Come ho già scritto altre volte i più grandi nemici del blogger sono il tempo e lo spazio. Il tempo per scrivere articoli, per rispondere ai commenti e per gestire il blog non è mai abbastanza e d'altra parte lo spazio nel layout è così esiguo che si devono fare delle scelte dolorose e eliminare widget che ci piacciono proprio perché non entrano nella sidebar o nel footer.

Per operare dei cambiamenti in un qualsiasi widget di Blogger bisogna innanzitutto individuarne l'ID. I widget ufficiali di Blogger hanno un loro ID specifico seguito da un nome d'ordine. Per esempio Label1 è quello delle Etichette, BlogArchive1 è quello dell'Archivio e CustomSearch1 è quello della Casella di Ricerca ufficiale. I gadget aggiunti con l'elemento pagina HTML/Javascript hanno un ID del tipo HTMLX con al posto di X il numero d'ordine con il cui sono stati aggiunti al nostro modello.

Per trovare l'ID del widget si può cliccare sulla icona del cacciavite e della chiave inglese in basso a destra del gadget nella pagina web per aprire la sua finestra di configurazione. Alternativamente si può andare su Layout e cliccare su Modifica nel gadget relativo sempre per aprire la finestra relativa. Nella parte alta di tale finestra si visualizzerà il suo URL. Lo dovremo scorrere fino in fondo. L'ID del widget sarà la parte finale dell'URL che viene subito dopo la stringa &widgetId=.

Con questo dato si potrà creare una regola CSS per personalizzare il titolo e il contenuto del widget. I codici che dovremo creare a questo scopo hanno una struttura di questo genere

#WidgetId h2 {   ...   }                          per personalizzare il titolo del widget
#WidgetId .widget-content {   ...   }    per personalizzare il contenuto del widget

dove tra le parentesi graffe si inseriscono le regole CSS e al posto di WidgetId si mette appunto l'ID del widget appena trovato. Facciamo un esempio pratico che riguarda il titolo di questo post.

INSERIRE UN CURSORE DI SCORRIMENTO IN UN WIDGET DI BLOGGER

Il gadget degli Ultimi Articoli con Miniature è piuttosto lungo se si decide di mostrare 8-10 post. Vediamo come procedere per mostrare tale widget in modo molto più compatto

In condizioni normali ha una lunghezza misurata in 1720 pixel (mostrato in due colonne) mentre con il cursore di scorrimento tale lunghezza è stata ridotta a 600 pixel. Il lettore potrà comunque visualizzare tutti gli elementi semplicemente scorrendo il cursore. C'è quindi un notevole risparmio di spazio che può essere usato in altro modo. Nel test l'ID del widget è HTML2 quindi farò riferimento a questo ID nel codice che mostrerò. Si va su Modello -> Modifica HTML e si cerca la sezione <b:skin>. Si clicca sulla freccetta nera posta alla sinistra per visualizzare tutto il codice della sezione. Con Ctrl+F si cerca la riga ]]></b:skin> e, subito sopra, si incolla questo codice

#HTML2 .widget-content {height:600px; width:auto; overflow:auto;}

Si salva il modello. Oltre all'ID del widget colorato di blu si può settare anche la sua lunghezza in pixel colorata di rosso. Ho usato il termine cursore ma sarebbe stato più corretto scrollbar.