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