Come usare Firebug Lite per modificare il modello di Blogger.

I tanti appassionati di blogging che però non sono professionisti del settore si trovano spesso a disagio quando devono apportare delle modifiche al layout de loro sito. Diciamo pure che quelli alle prime armi non sanno neppure quale sia il codice che determina l'aspetto di un dato elemento del layout.

Da diverso tempo esiste l'ottima estensione Firebug per Firefox che aiuta a investigare sul codice di una data pagina. Se non si hanno esigenze particolarmente avanzate si può anche usare Firebug Lite per Chrome che può essere installata dal Chrome Web Store.

Dopo l'installazione sarà visibile l'icona della estensione nella parte alta del browser. Avrà l'aspetto di un insetto e potrà essere usata semplicemente cliccandoci sopra. Alternativamente si può andare sul destro del mouse per aprire il menù contestuale e scegliere Inspect with Firebug Lite.

Nella parte bassa della scheda si aprirà una finestra con tutti gli strumenti di Firebug. Se la visualizzazione in basso non permette un suo agevole utilizzo si può sempre scegliere la finestra popup per spostarla a piacimento su tutto il layout. Si va semplicemente su uno dei bottoni rossi sulla destra

Come diminuire lo spazio tra post e post e tra widget e widget in Blogger.

Quando ho introdotto l'estensione Firebug per Firefox, avevo accennato a come possa essere utilizzata per modificare alcune parti del modello in modo molto semplice. Vediamo subito un paio di casi in cui si può usare. In alcuni commenti, diversi utenti di Blogger, si lamentano di come i singoli post siano troppo distanti tra di loro quando si apra la homepage e di come lo siano anche alcuni widget nella sidebar.

Come diminuire la distanza tra i post in Homepage

Si apre Firefox, si va sulla homepage del nostro blog e si clicca sulla icona di Firebug. Successivamente si seleziona l'area di un post e si controlla quale sia la classe che ne determina lo stile

Firebug è una estensione di Firefox per ispezionare le pagine web e modificare il template.

In molti dei commenti mi viene chiesto di come procedere per effettuare delle modifiche al sito, come posizionare meglio un widget, come aumentare delle dimensioni di alcuni elementi, come centrarne altri e altre richieste analoghe. L'aspetto del layout del blog è determinato dal codice HTML e dai CSS presenti nel modello. Una prima idea delle operazioni da fare si può avere andando a dare una occhiata al codice sorgente della pagina. Su Firefox si va su Visualizza > Sorgente pagina, su Chrome invece si clicca con il destro del mouse sulla pagina e si sceglie Visualizza sorgente pagina. In tutti i browser si può accedere alla Sorgente pagina con la scorciatoia da tastiera Ctrl+U (OS Windows).

Visualizzando il modello non è detto però che si trovi subito il blocco di codice che interessa quel particolare elemento. Per esempio non è così immediato andare sul CSS che determina l'aspetto della data o del titolo del post. Bisogna anche dire che nei modelli personalizzati, ogni programmatore fa un po' come gli pare e nomina le classi di stile secondo una sua particolare preferenza.

Come utilizzare Page Speed per rendere più veloce il caricamento della pagina.

Dall'inizio di quest'anno la velocità di caricamento delle pagine web è diventata una dei duecento parametri per determinarne il posizionamento nei risultati delle ricerche su Google. Siamo stati quindi un po' tutti presi dalla fobia di velocizzare il sito eliminando gli inutili orpelli che lo rallentavano. Per vedere la performance del sito si può andare nella Bacheca per Webmaster > Funzioni sperimentali > Prestazioni del sito