Pubblicato il 08/12/14 - aggiornato il  | 16 commenti :

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

b-skin-blogger

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

immagini-sulla-sinistra-blogger

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

immagini-sulla-destra

 

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

immagini-centrate-blogger

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.


16 commenti :

  1. Ora è perfetto: dopo aver allineato le immagini a sinistra infatti il testo nei vecchi post con le foto piccole si era spostato a destra! Grazie mille :)

    RispondiElimina
  2. ciao! Volevo usare un template da soratemplates per blogger, ma sono tutti con post troncato e con read more per leggere tutto il post Non conosci un codice per mostrare tutto il post nel blog? grazie

    RispondiElimina
    Risposte
    1. È una richiesta veramente strana. Perché mostrare tutto il post nella home? In questo modo la pagina diventa molto più lenta a caricarsi. Poi i post si aprono solo se il lettore desidera leggerli tutti. Per richieste riguardanti i template scaricati da internet ti rispondo come ho fatto altre volte di rivolgerti al suo autore che è quello che conosce il codice e che se ha tempo e voglia ti può aiutare
      @#

      Elimina
  3. ciao, c'è un modo per avere le immagini della stessa larghezza del corpo-testo sul post? grazie mille

    RispondiElimina
    Risposte
    1. @# Con le stesse modalità illustrate in questo post prova a incollare questo codice
      .post-body img {width:100% !important;}

      Elimina
    2. wow..(c'è ancora qualche problemino di allineamento ...ma molto meglio ! grazie!)..però si schiaccia un po' l'immagine..c'è un altro codice per mantenere le proporzioni?

      Elimina
    3. È una tua impressione quella dello schiacciamento delle immagini. Il codice agisce solo sulla larghezza e l'altezza quindi è quella giusta per mantenere il rapporto originale tra le due dimensioni.
      Per quello che riguarda l'allineamento puoi provare per tentativi. Per esempio se le immagini fossero spostate troppo a destra potresti provare con questo codice
      .post-body img {width:95% !important; margin-right:30px !important;}
      per poi trovare il valore più giusto della percentuale e del margine a destra. Per un margine a sinistra puoi provare con quest'altro codice
      .post-body img {width:95% !important; margin-left:30px !important;}

      @#

      Elimina
    4. grazie infinite..cmq le immagini si schiacciavano davvero ma l'unico modo perché non farlo è mettere "dimensioni originali" quando carico la foto sul post (prima mettevo sempre extra large!

      Elimina
    5. secondo te posso impostarlo su tutte le immagini senza che mi metta a ritoccare tutti i vecchi post?

      Elimina
    6. Nel senso che tu vorresti modificare tutti i post cambiando da Extralarge a Originale le impostazioni delle immagini? Mi sembra una cosa laboriosa e di dubbia utilità. Con il codice non mi viene in mente nulla che si possa fare in tal senso
      @#

      Elimina
    7. capisco ma l'utilità sta nel fatto che lasciando il codice .post-body img {width:100% !important;} e le immagini in extralarge o medie le immagini si deformano(si schiacciano)...ti linci un chiaro esempio dal mio blog:http://www.noxcreare.com/2015/12/diy-xmas-decor-3d-paper-star-con.html

      Elimina
    8. È vero si schiacciano, non dovrebbe succedere. Strano
      @#

      Elimina
  4. E come si corregge la disposizione delle immagini all'interno di un post? Cioè, come si spostano le immagini senza eliminarle?

    RispondiElimina
    Risposte
    1. Di un singolo post? Basta andare su Modifica, cliccare sulla foto per selezionarla e agire sul menù orizzontale che appare con le opzioni di allineamento
      @#

      Elimina
  5. Ciao Ernesto! Una domanda...ma se volessi mettere solo in un post le immagini a sinistra con a fianco il testo? Sto provando ma non riesco

    RispondiElimina
    Risposte
    1. Lavora su questo codice

      <span style='float:left; margin-lef:5px;'><img alt='' src='https://lh6.googleusercontent.com/-60hiKYjv9JQ/U3R6Ef8pihI/AAAAAAAAnHQ/lqjCXOr-RrE/w240-h82-no/read-more.png' width='100px'/></span><span style='float:right; margin-right:20px'>Testo sulla destra</span>

      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy