Come allineare tutte le immagini di Blogger sulla sinistra, sulla destra o al centro.

Come spostare tutte le immagini di Blogger sulla sinistra, sulla destra o al centro incollando una riga nel modello.

Ho appena ricevuto un commento a un post che ho pubblicato qualche tempo fa e che trattava di come si potessero ridimensionare automaticamente tutte le immagini di Blogger. La lettrice chiedeva se fosse possibile allineare tutte le foto a sinistra. Seguendo la stessa falsariga dell'articolo in questione è anche possibile spostare tutte le immagini non solo a sinistra ma anche a destra o nel centro del layout. Tutto questo solo con l'aggiunta di una semplice riga di codice nella sezione dei CSS.

 

Credendo di fare cosa gradita anche ad altri lettori di questo sito penso di utilizzare questa decina di minuti che mi sono ritagliato per rispondere alle domande postemi nel sito per illustrare queste personalizzazioni che sono nello stesso tempo molto potenti ma anche molto semplici. Potenti perché incidono su tutti i post che sono stati pubblicati e su tutti quelli che verranno pubblicati in futuro. Semplici perché abbisognano solo di una sola riga di codice da incollare in modo appropriato.

SPOSTARE LE IMMAGINI SULLA SINISTRA

Dopo aver salvato il template si va su Modello > Modifica HTML e si clicca sulla freccetta nera accanto alla sezione b:skin che si trova intorno alla 13/14-esima riga

Successivamente si clicca sull'area del codice e si digita Ctrl+F quindi si cerca la riga ]]></b:skin>. Subito sopra a questa si incolla il seguente codice 

.post-body img { float:left !important;  margin-right:8px !important;}

Si salva il modello. Il risultato sarà quello di avere tutte le immagine spostate sulla sinistra



Il margine destro di 8 pixel serve per separare immagine da testo.

SPOSTARE LE IMMAGINI SULLA DESTRA

Il codice da incollare con le stesse modalità in questo caso è il seguente 

.post-body img { float:right !important; margin-left:8px !important;}

che dopo il salvataggio del template produce questo risultato

 

COME CENTRARE TUTTE LE IMMAGINI

Si tratta sempre di incollare una riga di  CSS nello stesso punto del template che per questa personalizzazione sarà il seguente 

.post-body img { margin:5px auto !important;}

Si salva il template. Tutte le immagini prenderanno questo aspetto nel layout

Il parametro 5px serve per settare la distanza dalla parte alta e dalla parte bassa di tutte le immagini. Tutti questi codici modificheranno solo il posizionamento delle immagini pubblicate nei post e lasceranno invariate quelle che invece sono nella sidebar o nell'header come per esempio le icone dei social o dei menù.

IMMAGINI A SINISTRA O A DESTRA SENZA TESTO LATERALE

Negli screenshot precedenti quando si sono spostate le immagini sulla sinistra o sulla destra con il tag float nella parte laterale scoperta viene inserito il testo del post. Se invece volessimo mostare le immagini senza che abbiano del testo sulla loro stessa linea in questo modo

 allora non si può usare il tag float ma possiamo usare questo nuovo codice

.post-body img { text-align:left !important; display:block !important;}

dove al posto di left possiamo anche usare right per immagini posizionate a destra.