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}
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 centercon le seguenti:
leftper spostare a sinistraright per spostare a destrajustify 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