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!

33 commenti:

lilla ha detto...

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

Vacanze in Albania 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

Boby 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 ;)

Tex Willer 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 ;)

Boby 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!!!

Evil 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

Padova Eventi 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 :-)

Nicodemo Spatari 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

Francesca Moggi 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!

Salentobooking.net 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

gnoma 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 Marketing & Communication ha detto...

su blogger, è possibile giustificare il titolo del post?

non ci riesco, aiutatemi!!!!!

Fangyaya ha detto...


fangyanting20150926
pandora jewelry, http://www.pandorajewelryoutlet.us.com/
cheap wedding dresses, http://www.cheap-weddingdresses.net/
louis vuitton bags, http://www.louisvuittonbag.us.com/
nike air force 1, http://www.airforce1.us.com/
chanel handbags, http://www.chanelhandbagsoutlet.eu.com/
north face jackets, http://www.thenorthfaces.in.net/
ghd hair straighteners, http://www.ghdhairstraightenerssale.co.uk/
michael kors outlet, http://michaelkors.outletonlinestores.us.com/
nike mercurial, http://www.nikemercurial.org/
louis vuitton outlet, http://www.louisvuittonus.us.com/
oakley sunglasses, http://www.oakleysunglassescanada.com/
louis vuitton handbags, http://www.louisvuittonhandbags.org.uk/
football shirts, http://www.cheapfootballshirt.org.uk/
prada outlet, http://www.pradaoutlet.us/
michael kors wallet, http://www.michaelkorswallet.net/
ralph lauren uk, http://www.ralphlauren-outletonline.co.uk/
toms shoes, http://www.toms.us.com/
michael kors factory outlet, http://www.michaelkorsfactoryoutlets.in.net/
ugg boots, http://www.uggbootsclearance.in.net/
hermes birkin, http://www.hermesbirkin.org/
oakley sunglasses, http://www.oakley.in.net/
polo ralph lauren, http://www.poloralphlauren.us.org/
cheap jordans, http://www.cheapjordanshoes.in.net/
tiffany and co jewelry, http://www.tiffanyandco.in.net/
michael kors handbags, http://www.michaelkorshandbag.co.uk/

方松腾 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

chenlina ha detto...

CHENLINA20160308
canada goose outlet
coach outlet store online
nike blazers uk
cheap oakley sunglasses
air jordan 4
michael kors outlet clearance
michael kors bags
canada goose outlet
coach factory outlet online
ray ban sunglasses
oakley sunglasses
michael kors outlet
ugg sale
longchamp outlet
jordan retro 8
louis vuitton
nike roshe run
ugg boots
cheap jordans
ugg boots outlet
louis vuitton bags
tod's shoes
louis vuitton handbags
toms outlet
ugg outlet
timberlands
jordan 11
louis vuitton
gucci outlet online
coach outlet online
kate spade outlet
oakley sunglasses
louis vuitton outlet stores
coach outlet store online
louis vuitton handbags
ugg outlet
ray ban sunglasses
ray ban sunglasses uk
louis vuitton outlet
coach factory outlet
AS

林剑伟 ha detto...

michael kors outlet
tiffany and co
michael kors handbags
Michael Kors Purses
cheap jordans
michael kors handbags
michael kors outlets
kobe shoes
mlb jerseys authentic
cheap oakley sunglasses
chrome hearts online store
Cheap Oakley Sunglasses
fitflop sandals
oakley sunglasses outlet
chrome hearts online
cheap true religion jeans
ray ban sunglasses outlet
Michael Kors Outlet Online
fitflop sandals
fitflops clearance
cheap ralph lauren
cheap basketball shoes
oakley sunglasses
michael kors outlet
jordan retro
nfl jerseys
Cheap Jerseys Online
nike dunks shoes
chrome hearts
michael kors outlet
tiffany jewelry
tiffany jewelry
http://www.cheaprealjordans.us.com
kobe shoes,kobe zoom,nike zoom kobe
true religion sale

dong dong23 ha detto...

hollister clothing store
kate spade
louis vuitton outlet
ralph lauren sale
cheap oakleys
christian louboutin shoes
coach factory outlet
longchamp outlet
fitflop sandals
true religion shorts
timberland boots
coach outlet
gucci outlet
true religion
rolex submariner
kate spade
coach factory outlet
burberry outlet online
adidas yeezy
coach outlet
tiffany and co
mont blanc
michael kors outlet clearance
adidas shoes
kate spade
nike nfl jerseys
north face outlet
coach factory outlet
gucci outlet
coach factory outlet
ralph lauren polo outlet
nike store
toms shoes
coach outlet store online
kobe shoes 11
michael kors bags
replica watches
michael kors handbags
louis vuitton
20165.4wengdongdong

chenlina ha detto...

miami heat jerseys
kate spade
louis vuitton
michael kors handbags
jordan retro
ray ban sunglasses
michael kors outlet
adidas ultra boost
ray ban sunglasses
coach outlet
ugg boots
rolex watches
hermes birkin bag
coach outlet store online
louis vuitton outlet
toms shoes
cheap nfl jerseys
michael kors outlet
oakley outlet
michael kors outlet
toms outlet
uggs canada
moncler uk
adidas nmd
replica watches
toms shoes outlet
louis vuitton outlet online
adidas originals
mlb jerseys
nike factory outlet
replica watches for sale
michael kors outlet
basketball shoes
coach factory outlet
michael kors purses
coach outlet
rolex watches
coach outlet
canada goose outlet
replica watches
chenlina20160823

Unknown ha detto...

nike air force 1 of
lebron shoes on
polo ralph lauren outlet is
fitflops sale clearance ARE
under armour outlet to
michael kors handbags outlet silly
michael kors handbags sale Room
cheap nfl jerseys It's
adidas nmd runner to
buffalo bills jerseys post

raybanoutlet001 ha detto...

omega watches for sale
christian louboutin shoes
coach
denver broncos jerseys
redskins jerseys
new york knicks jersey
steelers jerseys
nike huarache
yeezy boost 350
lebron shoes

xiaozhengsen ha detto...

2017-5-30 xiaozheng6666
polo shirts
polo ralph lauren outlet
pandora outlet
canada goose
polo outlet
mbt shoes
ralph lauren uk
adidas yeezy shoes
mbt shoes
mlb jerseys


Prima di lasciare un commento, leggete qui

Posta un commento