Giustificare automaticamente tutti i post su Blogger


La giustificazione del testo contribuisce a dare maggiore armonia al corpo di una pagina riducendo gli spazi vuoti. In genere, un testo “graficamente uniforme e gradevole” risulta più fruibile per il  lettore, ecco perchè vi si ricorre sempre nell’ambito della tipografia (libri e giornali stampati).

Ultimamente ho suggerito alcune dritte per aumentare la leggibilità di un articolo ed è stato sollevato il problema di come sia possibile giustificare in automatico tutti i post presenti, passati e futuri su Blogger (in realtà, Vinnie me lo chiede già da mesi… eccomi qui a farmi perdonare!).

Devo dire che in genere curo attentamente ogni singolo post quindi l’idea di fare una modifica a tutti gli articoli indiscriminatamente non incontra il mio favore, ma il mio è un caso particolare (riporto spesso righe di codice che giustificate diventerebbero incomprensibili) e in altri contesti potrebbe fare il suo colpo d’occhio. Potete provarlo e se non vi va bene per toglierlo basterà cancellare le righe aggiunte.

Presenterò la modifica sia per chi utilizza il nuovo designer di modelli che per chi ha un modello precedente.

Codice CSS per la giustificazione automatica del testo degli articoli

Quanto sto per scrivere vale solo per Blogger, il codice può essere riadattato per altre piattaforme ma lascio questo compito a chi vorrà cimentarsi e spero che in caso di successo venga a informarci sul procedimento per farlo.

Per Blogger, il codice CSS per  giustificare automaticamente il testo di tutti gli articoli è il seguente:

.post-body
{
    text-align:justify;
}

Questo codice giustificherà il testo se non è indicato qualche altro allineamento, rispettando quindi eventuali scelte fatte di proposito al momento della pubblicazione. Se invece volete forzare la giustificazione a tutti i costi (potrà servirvi se usate Windows Live Writer) il codice da usare è questo:

.post-body
{
    text-align:justify;!important
}

Applicare la modifica col nuovo designer di layout

Nel nuovo designer di modelli, andate in Avanzato->Aggiungi CSS:

image

e incollate il codice che avete scelto:

image

A questo punto cliccate su “Applica al blog” in alto a destra ed è fatta.

Applicare la modifica intervenendo sul codice HTML del template

Se state usando un vecchio template di Blogger, andate in Design->Modifica HTML, selezionate la casella “Espandi i modelli widget” e cercate questa riga di codice (CTRL+F de browser):

]]></b:skin>

Subito sopra, incollate il codice che avete scelto:

image

Salvate le modifiche e visualizzate il vostro blog per vedere il risultato.

Se non funziona?

Nei casi che ho provato io ha funzionato sempre, ma prevenire è meglio che curare. Se proprio non vuole andare aggiungete al codice già inserito le seguenti righe:

.post-body P
{
    text-align:justify;!important
}

.post-body DIV
{
    text-align:justify;!important
}

Salvate le modifiche e dovrebbe andare tutto liscio, se la matematica non è un’opinione (risata generale).

Se applicate questa modifica, fatemi sapere come vi trovate!

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

25 commenti:

lilla viola ha detto...

Meno male! Non ne potevo più di spostare la spunta su "giustifica" ogni inizio frase!!! Lo provo sicuramente domani. Grazie. lilla

Unknown ha detto...

Grande...preciso come sempre :)

Vacanze in Albania

Vinnie ha detto...

Ottimo e preciso come sempre ;) Grazie. Appena posso lo provo, sperando che non giustifichi anche le immagini e i video centrati. Cmq lo provo e torno ;)

enrico ha detto...

Ciao,
ti chiedo scusa se posto un commento non inerente all'articolo ma non sapevo dove farlo. Volevo chiederti se potevi spiegarmi quali sono le modifiche da fare al codice html per ottenere l'effetto di vedere un bordino grigio alla layout principale come avviene qui nel tuo blog. Inoltre mi servirebbe sapere qual'è il comando html per fare in modo che se aumenta la grandezza e la risoluzione dello schermo il blog appaia sempre al centro della pagina del browser.

grazie mille

enrico

Mr Ivan G ha detto...

Come Enrico ho anche io un problema e non so come raggiungerti, sto cercando di sistemare i riquadri in blogger dove appaiono i post e la side bar con l'elenco di tutti i post ma quando ingrandisco quello dei post il riquadro dei menu mi va a finire sotto, sai se c'è un modo per far si che il riquadro dell'elenco situato a dx del di quello dei post si sposti ulteriormente verso dx senza finire al di sotto? sono riusciato ad ingarndirlo, a rimpicciolirlo a togliere i bordi interni sia di quello che dell'intestazione e di quello dei post ma non riesco a farlo muovere a dx senza che finisca sotto.
Un grazie fin da ora
D

ZiaBoby ha detto...

sono in leggero ritardo, ma bentornato in attività :D

ho inserito il giustificato, ma pensi che anche i commenti dovrebbero essere giustificati?

comunque sai niente perché oggi blogger obbliga ad inserire un titolo ad ogni widget che si aggiunge? prima non ho avuto mai questo problema

Vinnie ha detto...

Funziona perfettamente. Giustifica solamente il testo lasciando invariati video e immagini (precedentemente centrati o giustificati a destra/sinistra), quindi perfetto è consigliato.

Tenebrae, a questo punto volendo si potrebbe anche evitare di giustificare i post su Live Writer?

Vinnie ha detto...

Un'altra info. Agendo sempre sull'html è possibile impostare la sola immagine di apertura di ogni post in modo tale che abbia una precisa e predefinita dimensione? Senza che la modifica agisca sulle immagini successive dell'articolo.

Lo so, con queste domande sto iniziando diventarti simpatico quanto un ginocchio sbattuto su uno spigolo ;)

Edoardo Valentini ha detto...

a proposito di WLW a me va a capo di 2 interlinee se premo il tasto invio mentre su blogger draft facendo la stessa cosa va sotto normalmente di una e la cosa mi fastidia parecchio .. esempio WLW quando vai a capo lo prende come paragrafo -p- invece che -br- c'è qialcosa che mi sfugge o sbaglio??
grazie e saluti

lella ha detto...

se devo intervenire sull'HTML preferisco "giustificare" le assenze.
Che battutaccia...........
Troppo complesso x me :-(
kiss
Lella

Tenebrae ha detto...

@enrico: per il bordo ne parlo in questo post. lì parlo delle sezioni e dell'area dei post, per fare riferimento a tutto il blog devi usare .body invece di .post o .sidebar

per centrare il blog, per esperienza so che potremmo cominciare una sequenza infinita di "prova questo, prova quest'altro" senza venirne a capo, dipende dalla struttura del template e ognuno ha la sua storia

@mr ivan g: confesso di essermi perso un po', ma per sommi capi ho capito. come ho detto nel commento precedente, ogni template ha la sua storia e non possiamo venirne a capo semplicemente con uno scambio di commenti, mi dispiace

@boby: ciao carissima, meglio tardi che mai... tanto lo sappiamo entrambi che sei venuta a cercarmi per bisogno :p me ne sono accorto anch'io oggi, credo dipenda dalle ultime modifiche fatte per la gestione dei nuovi template... ho trovato una soluzione al problema, pensavo di fare qualche prova domani sera e fare sapere qui

@vinnie: si, si può evitare. io però continuerò a farlo :) si può fare quello che chiedi, molti template lo prevedono, ma sconsiglio di farlo su blogger per due motivi: o ti viene una porcheria (immagini quadrate anche se originariamente erano rettangolari), o ti rallenta troppo il caricamento del blog (perchè viene fatto un corretto riproporzionamento dell'immagine)

@tex: l'utilizzo di p invece di br è formalmente corretto. è una porcheria di blogger che di default non lo prevede. il fatto che la spaziatura risulti così alta può dipendere solo dallo stile grafico usato dal template. il discorso si farebbe lungo in un commento, mi segno la cosa e magari ci dedico un post.

@lella: questo è il genere di battute che vi fate tra insegnanti in sala professori? :) magari qualche volta ne propongo io qualcuna da programmatore :D

Vinnie ha detto...

Ok meglio evitare. Anche io sto continuando a giustificare su WLW. Cmq ottima modifica ;)

ZiaBoby ha detto...

@Tenebrae: cattivo :( comunque a parte tutto xD ho letto su Blogger che è dovuto ad una loro recente modifica ai widget che rende obbligatorio inserire i titoli
ma dato che hanno ricevuto parecchie lamentele, ripristineranno presto la situazione a quella precedente

Freebacoli ha detto...

Ciao Tenebrae, chiedo anticipatamente scusa per il commento che non riguarda questo specifico post (tra l'altro ultilissimo, l'ho appena provato! ^_^)
Ho inserito il codice per i post espandibili automatici sul blog e l'ho trovato perfetto! L'unico problema lo riscontro nelle pagine statiche..Non è più possibile effettuare un collegamneto ai link e visionare un elenco puntato o un gadget o qualsiasi altra cosa che non sia un semplice testo scritto. La cosa strana è che nelle pagine dove modifico il tutto continua a vedersi alla perfezione, ma non riesco poi a pubblicarlo.

Ti lascio il link del blog:
www.freebacoli.blogspot.com

Scusa, complimenti e grazie infinite!!!
^_^

Totò ha detto...

Ciao. Circa un mese fa ho modificato il template del mio blog inserendo un nuovo modello. Da qualche giorno tutti i post non sono più giustificati e inoltre non riesco più ad aprire le immagini cliccandoci semplicemente sopra ma devo intervenire con il mouse (tasto dx, open link). Ho provato a inserire i codici che suggerisci ma non cambia nulla. Help!!!

Morgan Wolf ha detto...

Ciao, senti è tutto molto chiaro ma avrei un problemino. Anche facendo in questo modo, il testo presente nella sidebar di destra, (per intenderci dove ci sono le info personali), il testo dei gadgets cioè, continua a non essere giustificato. Come faccio? Grazie in anticipo

Anonimo ha detto...

Funziona benissimo!
Ma se lo volessi togliere?
Cioè mi spiego meglio.. io ho inserito il nuovo codice nei CSS del nuovo designer di Blogger..ma ora come posso togliere questa modifica?
Grazie :-)

SAN NICODEMO MAMMOLA ha detto...

salve, mi spiegheresti quale procedura devo utilizzare per allineare il testo dei miei commenti su questo bloggher ?: http://www.sannicodemomammola.com/
Te ne sarei molto grato...
Nicodemo

Acquacluster ha detto...

Grazie mille.
Però io nonostante abbia uno dei nuovi template blogger sono riuscita ad ottenere la giustificazione solo andando a modificare l'html dopo avere espanso i widged, mentre andando a inserire il codice CSS in "Design", "Avanzato" "Codice CSS" non ottenvo nulla ... avrò sbagliato qualcosa di grave?
Comunque grazissime per il post!

triplete ha detto...

Ciao, io sono Angelo...ho un problema con i paragrafi dei miei due blog (turismoerecensioni.com e corrierevacanze.com); come potrai vedere le prime sette righe di ogni post, seppur giustificate come il resto delle righe del post, seguono un margine diverso. Ci tengo a dire che ho messo mano sul codice html modificando in parte il template originario; in particolare il problema è nato mentre cercavo di aggiungere allo slide in home una ulteriore immagine. Spero che tu possa darmi un dritta per cercare di ovviare al problema.Ciao
Angelo

Unknown ha detto...

Il post è fantastico ma la matematica, porca pupazza, è un'opinione! Nessuna di queste dritte ha funzionato nel mio caso, comincerò a smanettare a random finchè ci ruscirò è__é

il decu ha detto...

Ciao, intanto grazie per queste dritte!
Ho provato a seguire il tuo consiglio, sperando che valesse anche per un testo preso da Wikipedia da inserire al lato, ma il testo non si giustifica. Oltretutto mantiene le parole "link" del blu originario di wikipedia...
Cosa posso fare?

x232 ha detto...

niente... è rimasto uguale :(

wy.group s.a.s. di petrelli william ha detto...

su blogger, è possibile giustificare il titolo del post?

non ci riesco, aiutatemi!!!!!

Unknown ha detto...

cheap jordans
michael kors outlet online,michael kors,kors outlet,michael kors outlet,michael kors handbags,michael kors outlet online sale,michael kors handbags clearance,michael kors purses,michaelkors.com,michael kors bags,michael kors shoes,michaelkors,cheap michael kors
mulberry handbags
tory burch outlet online
swarovski crystal
canada goose coats
toms outlet
michael kors factory sale
giuseppe zanotti sale
nba jerseys wholesale
fitflops shoes
hollister pas cher
longchamp outlet online
cheap mlb jerseys
swarovski outlet
swarovski outlet


Prima di lasciare un commento, leggete qui

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.