Come Centrare gli Elementi del Nostro Blog



Ciao a tutte, come è cominciata la vostra settimana? Qui tutto bene, presissima dal nuovo design di C’é Crisi! {che no, non è ancora pronto} e dallo scherzetto di PhotoBucket che ha preso in ostaggio le mie fotografie. Passando a cose più utili per noi blogger, oggi vorrei parlarvi di come centrare gli elementi del nostro blog in Blogger


Mister Blogger ha la cattiva abitudine di allineare tutto a sinistra. Personalmente, preferisco la centratura e per i testi dei miei articoli, la giustificazione. Trovo che rendano il blog più pulito e ordinato. Gli ultimi blog che ho curato come designer avevano delle sidebar ricche di contenuti ma andavano spesso a zig-zag {avete presente?} visto che alcune cose erano allineate a sinistra, altre centrate e altre a destra. Non è per niente bello da vedere…

**Se avete dei bannerini a zig zag nella sidebar, potete leggere 4 Errori che ogni Blogger Dovrebbe Evitare e rimediare subito.**



Esistono tanti elementi del blog che possiamo centrare, quindi vi lascio con alcuni codici CSS che potranno esservi utili.


Dove vanno incollati?

I codici CSS vanno ad agire sugli stili esistenti che vengono sovrascritti. Nel momento in cui non ne avrete più bisogno, vi basterà cancellarli dal template. Possiamo incollare questi stili:

- nel nostro template sopra alla stringa  ]]></b:skin>
- o direttamente nel Designer modelli  alla voce Aggiungi CSS {si raggiunge da Modello, Personalizza, Avanzato}
- o ancora, se si tratta di centrare un gadget html, vanno incollati nella finestrella del widget aprendola da Layout.


Ci vuole davvero un secondo e il vostro blog ci guadagnerà in equilibrio e armonia. Ricordatevi che anche l’occhio vuole la sua parte!


Per centrare il nome del blog e la descrizione:
#header-inner {text-align: center;}

Per centrare l’immagine dell’ header:
#header-inner img {margin: 0 auto;}

Per centrare il titolo dei post:
.post-title {text-align:center;}

Per centrare la data dei post:
.date-header {text-align:center;}

Per centrare i titoli dei gadget:
.section-columns h2, #sidebar-right-1 h2, #sidebar-left-1 h2  {text-align: center;}

Per centrare il contenuto di un gadget html:
<center>  CODICE HTML DEL GADGET  </center>

Oppure inserite direttamente la stringa
<div align="center">
prima del codice

Per centrare i nomi della pagine {native di Blogger}:
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

Se non succede nulla, provate con questo:

.tabs {text-align:center !important;}
.tabs li {display:inline !important; float:none !important;}



Questo codici dovrebbero funzionare benissimo con il modello Simple di Blogger mentre altri template potrebbero chiamare i selettori {per esempio #header-inner} in maniera diversa.

Naturalmente, se avete delle esigenze diverse, potete usare gli stessi selettori per giustificare, allineare a sinistra o a destra gli elementi del vostro blog sostituendo la voce center con le seguenti:

left  per spostare a sinistra
right per spostare a destra
justify per giustificare un testo


Se avete degli atri accorgimenti css da aggiungere alla lista qui sopra, potete condividerli con noi nei commenti e provvederò ad aggiornarla.

Ci sentiamo domani per il nuovo linky party. Vi aspetto! Alex


Fonte di molti codici: www.carrieloves.com

41 commenti :

  1. Ciao, complimenti per il tuo blog e per tutti i suggerimenti che dai per modificare il design del blog.
    Li sto utilizzando per modificare il mio blog......non è cosa semplice per chi come me non è un'esperta. mi sapresti anche dire come fare per inserire divisore alla fine di un post?
    ciao e complimenti ancora
    Simona

    RispondiElimina
    Risposte
    1. Ciao Simona, grazie per il tuo commento e soprattutto per i complimenti! Fa sempre piacere sapere di essere utili alle sorelle blogger!

      Potresti chiarirmi una cosa? Per divisore intendi una righetta tra la fine del post e l'inizio dei commenti {come qui sul mio blog} oppure un' immagine tra un post e l'altro?

      Ti ringrazio se vorrai chiarrire la tua domanda. Alex

      Elimina
  2. Grazieeeeeee! Avevo cercato questa cosa dappertutto e da quello che avevo letto sembrava occorresse una laurea + master in informatica!!

    RispondiElimina
    Risposte
    1. Mo davvero Koko? E me lo potevi chiedere, no? Ho questo post in bozza da una vita ma non sapevo se questi CSS potessero interessare!

      Elimina
  3. Grazieee... ci vuole davvero un attimo dal modello. molto carino...

    RispondiElimina
  4. Questo forse posso riuscire a farlo anche io! Soprattutto spero di riuscire a centrare l'header!
    Un bacione! (sorvolo sull'inizio settima... Spero migliori! -.-' )

    RispondiElimina
    Risposte
    1. Ciao Sharonina! Guarda che e' facilissimo! Comunque se hai bisogno di qualsiasi cosa sai che posso aiutarti io! Bacioni, alex

      Elimina
    2. Io ho incollato il codice per crentrare l'immagine dell'header nel CSS ma non mi è cambiato nulla ... come mai? :(

      Elimina
  5. Post utilissimo Alex, un bel riassunto dei principali selettori senza doverseli cercare ogni volta... Tra l'altro non avevo mai pensato a centrare i titoli dei post. Devo riflettere, voglio farlo sul mio blog? Mah, forse XD
    Per quanto riguarda il corpo del testo, fino a qualche tempo fa lo giustificavo sempre. Poi mi sono imbattuta in un paio di articoli (di cui purtroppo non trovo il link) che affermavano che il testo giustificato su schermo può risultare un po' meno scorrevole alla lettura rispetto al normale allineamento a sinistra. Allora ho provato a farci caso e mi sono resa conto che effettivamente io stessa a volte faccio più fatica a leggere paragrafi giustificati, se sono lunghi e un po' a effetto "wall of text"... Insomma, sono un po' indecisa. Al momento sul mio blog allineo tutto a sinistra, non so se poi cambierò idea di nuovo...
    Notte!

    RispondiElimina
  6. Come sempre utilissima dritta, Alex!!!
    ^_^ buona giornata!!

    RispondiElimina
  7. Grazie mille Alex, post utilissimo perchè mi infastidiscono le cose storte ma a parte la centratura del codice HTML, non sapevo proprio come fare!

    RispondiElimina
  8. Grazie Alex, ho modificato un po' di cosine! ^_^
    Buona giornata!
    Daniela - Mani di Dani

    RispondiElimina
  9. come mai non li applica al blog?
    gloria

    RispondiElimina
  10. Complimenti per questo bellissimo blog e per le preziose informazioni, se dovessi capitare sul mio blog(la cosa mi farebbe molto piacere!!!) non esitare a darmi delle dritte riguardo alle impostazioni di blogger visto che sono nuova da queste parti e non ho idea di come possano apparire le mie pagine ad uno "sguardo" esperto come il tuo!!! Grazie e a presto!

    RispondiElimina
  11. Ciao Alex, ho provato sul mio modello semplice, ma funziona solo sul titolo post, e non sulla data. Come posso rimediare ?? Grazie

    RispondiElimina
  12. Interessante questo post! Il giustificato è l'allineamento che preferisco in assoluto perché mi da un impressione più "ordinata", e adesso grazie a te sono riuscita anche a centrare i titoli dei gadget!
    Però non ho capito come centrare i gadget... se sono quelli in html già lo facevo inserendo direttamente il codice nell'html, ma per i gadget propri di blogger? Dove trovo il codice html del gadget?
    Grazie dell'aiuto!!! ^_^

    RispondiElimina
  13. Alex, grazie!!!!!!!!!!!!!!!!!!!!!!!!!
    Ha funzionato subito.
    Sei veramente grande!
    Un bacione Sara

    RispondiElimina
  14. Tutte le volte che cerco qualcosa...vengo qui e trovo tutto XD
    Grazie mille =)

    RispondiElimina
  15. Grazie per questi utilissimi consigli! Ho sempre tentato di sistemare queste parti del blog senza riuscirci… e adesso ho la soluzione per merito tuo! Chiarissima e efficace: grazie!

    RispondiElimina
  16. Alex...cosa faremmo senza di te!!!!!!!!! Erano settimane che tentavo invano di centrare il titolo del mio Blog!!!! GRAZIEEEEEEEEEEEEE !!!!!!!!!!!!

    RispondiElimina
  17. Ciao sono Stefania ho scoperto il tuo Blog solo due giorni fa e mi si e' aperto un mondo. Ho anch'io un blog che sto cercando di sistemare tu mi stai aiutando tanto anche perchè sono un po' analfabeta!!! Grazie ancora http://stefania-stefaniauffa.blogspot.co.uk/

    RispondiElimina
  18. Ciao Alex... che dire... sono un po' abbattuta! A me non funziona! Possibile? C'è qualche accorgimento in più nella creazione dell'img per l'header? Io l ho caricata come sostitutiva di titolo e descrizione e ho spuntato l'opzione riduci e adatta..
    HELP ME!

    RispondiElimina
  19. Ciao Alex, grazie per questo post. Cercavo da tempo il codice che andasse bene anche per il mio blog per centrare il titolo. Ora ce l'ho fatta!
    Questo è il link al mio blog su Stephen King : http://stephenkingonly.blogspot.com

    RispondiElimina
  20. grazie per i codici utilissimi!

    RispondiElimina
  21. Nella speranza di riuscire a centrare il gadget "Pagine" proprio su Blogger siamo incappati nel tuo post. Ti facciamo i complimenti perchè è stato davvero molto intuitivo ma soprattutto utile! Con calma leggeremo tutti gli altri suggerimenti ;)
    Se ti va di vedere com'è centrata ora la nostra lista di pagine puoi visitare il nostro blog di viaggi.
    Ancora grazie,
    Lisa e Ale

    RispondiElimina
  22. Ciao, una domanda, ma se devo mettere più codici come li inserisco? Ne ho messo uno poi a capo un altro e mi ha preso solo un codice...! Devo mettere una virgola...?
    Grazie mille

    RispondiElimina
  23. Ciao,sono Francesca ho combinato un bel pasticcio...ho cercato di fare come hai detto tu riguardo centrare il titolo del blog, evidentemente ho sbagliato qualcosa perché oltre che non é cambiato il titolo mi si è rimpicciolito tutto il blog. E adesso? Non riesco più a metterlo nelle sue dimensioni normali. Sig sig...non dirmi che lo devo ricominciare da capo?! Sarebbe impossibile . C'e' una soluzione vero? Dimmi di si ti pregooo. Aspetto tue notizie. Grazie

    RispondiElimina
  24. Ciao Alex, devo dire che ogni tanto ti seguo, hai un blog veramente ben fatto ci sono un sacco di cose interessanti e chiare, io che sto da mesi sul mio non riesco a trovare un metodo per renderlo lineare, ordinato e armonioso sto mettendo le mani dapertutto ma non mi accontento mai e credo di aver fatto anche dei pasticci, quindi complimenti prima di tutto, poi vorrei chiederti una cosa, non riesco ad incolonnare come vorrei i gadget specialmente quelli delle page list o comunque che contengono link, la mia sidebar è tutta zig zag come dici tu, e non so più dove mettere le mani puoi darmi qualche consiglio? guarda per es quelli delle page list, ho cercato di ottimizzare creando due colonne però non sono centrate rispetto alle altre... mille grazie ciao! (a proposito ... ho pinnato ehh!! ;)
    http://lemedichessediclo.blogspot.it/

    RispondiElimina
  25. Ciao Alex! Ho aperto un blog da poco e devo ringraziarti per tutti i consigli che hai scritto in questi post semplici e chiari :D
    Vorrei sapere solo una cosa: posso installare gadget di terzi avendo come annuncio dei cookie solo quello che ci ha fornito blogger?? Oppure devo cambiarlo con uno più preciso e particolare??
    Grazie davvero di tutto, bacioni!!

    RispondiElimina
  26. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  27. Ciao Alex è da qualche giorno che visito il tuo blog e ho trovato tanti suggerimenti utili ed interessanti per il mio blog e volevo ringraziarti per la tua disponibilità ma ... questa cosa dei codici html io proprio non la capisco :( non ce la posso fare.

    RispondiElimina
  28. Ciao, è possibile centrare anche le etichette che sono sotto il titolo?

    RispondiElimina
  29. veloce perfetto e pratico.. cosa poter voler di più?
    GRazie

    RispondiElimina
  30. Ciao, non ci conosciamo ma è da giorni che mi stavo scervellando per sistemare il blog e grazie a te ho risolto molti problemi. Grazie mille *_*

    RispondiElimina
  31. Grazie, il tuo post è stato utile ad una povera principiante come me :)

    RispondiElimina
  32. Grazie mille!!! potrei amartiii!!!!!!!!!

    RispondiElimina
  33. purtroppo non ci sono riuscita volevo centratre l'immagine header ma niente da fare ...ho provato sia con css sia col testo HTML ma niente ! come mai ?

    RispondiElimina
  34. Complimento per questo bellissimo post!

    RispondiElimina
  35. ciao <3 Complimenti per il bellissimo e utile blog. Avrei una domanda: ho inserito il gadget Archivio blog a tendina, ma mentre il titolo è centrato, la casella no...quale codice ccs posso utilizzare? grazie!

    RispondiElimina