| 178 commenti ]

Come avrete potuto notare la maggior parte (se non tutti) dei template che Blogger ci da a disposizione non occupano l' intero schermo. Sarò più chiaro. La colonna principale (quella dove ci sono i post) e quella laterale (che a secondo del template si trova a destra o a sinistra di quella principale) occupano solo la parte centrale del blog, con notevoli limitazioni per quanto riguarda la grafica (ad esempio molte implementazioni non possono essere inserite nella barra laterale perchè questa è troppo stretta)...e poi, diciamoci la verità...E' ANCHE PIU' BELLO UN BLOG A TUTTA PAGINA :D...Ma io vengo in vostro aiuto, condividendo con voi le mie scoperte!!

Per modificare l' aspetto del nostro template andiamo su MODELLO, quindi clicchiamo su MODIFICA HTML...

Quello che ci troviamo di fronte è il codice HTML del nostro template e la modifica che ci permetterà di avere un blog a tutto schermo è molto semplice, qualunque sia il vostro grado di conoscenza del linguaggio HTML.
La parte che dobbiamo cercare e che ci interessa è questa:
/* Outer-Wrapper----------------------------------------------- */
#outer-wrapper {
width: 100%;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont; }
#main-wrapper {
width: 50%;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
#sidebar-wrapper {
width: 45%;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
Trovato?(NB I VALORI DI WIDTH SARANNO DIVERSI A SECONDA DEL TEMPLATE ED ESPRESSI NON IN % MA IN PX!!!QUESTI SONO I DATI "MODIFICATI" DEL MIO TEMPLATE!!) Se vi può essere d' aiuto vi dico che si trova alle prime righe del codice, non dovete scendere tantissimo.
Allora innanzitutto analizziamo le varie sezioni:
-outer wrapper: sono i dati relativi all' intero template;
-main wrapper: sono i dati relativi alla colonna in cui troviamo anche i post;
-sidebar wrapper: sono i dati relativi alla colonna laterale.
Ora analizziamo i vari valori sui quali potremo intervenire:
-width: è il valore che ci esprime la larghezza della sezione interessata, è inizialmente espresso in pixels (px), successivamente modificheremo "l' unità di misura", per motivi di comodità;
-float: è il posizionamento nella pagina della sezione interessata. I valori ammessi saranno left, right e center.
Per allargare il blog a tutta pagina, quindi, non dovremo che sostituire al valore di width della sezione outer wrapper che troviamo nel codice, (ripeto, espresso in pixel) il valore percentuale 100%, che ci andrà proprio ad indicare la percentuale di schermo occupata dal blog.
es.
#outer-wrapper { width: 100%;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont; }
ovviamente quel valore potrà essere anche un qualsiasi valore percentuale, anche maggiore del 100% (ad esempio se utilizziamo 200%, avremo due pagine orizzontali occupate, con il risultato che, per visualizzare il blog per intero, dovremo scorrere con la barra di scorrimento ).
Fatto questo andremo a intervenire sui valori width di main-wrapper e sidebar-wrapper. Ovviamente la somma delle due percentuali dovrà essere pari al valore percentuale di width in outer-wrapper (es se abbiamo 100, potremo utilizzare 50 e 50, 60 e 40 e così via...), anche se io consiglio vivamente di lasciare un 5% almeno di "scarto", personalmente lo vedo meglio a livello grafico, soprattutto se il nostro blog, AL CONTRARIO DEL MIO, utilizza colori vivaci e soprattutto diversi.
es.
#main-wrapper { width: 50%;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

#sidebar-wrapper {
width: 45%;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
Per quanto riguarda float, basterà sostituire, utilizzando i valori center, right e left, al valore che abbiamo uno diverso per spostare la relativa sezione.
Ad es. se il valore float della main-wrapper è left e noi vogliamo che la barra dei post sia, invece spostata a destra, sostituiremo il valore con right.
Esiste anche un modo per inserire una terza colonna, tuttavia la spiegazione più chiara è in inglese (clicca qui per leggerla) e comunque è inutilizzabile per molti tipi di template. Ciò nonostante sto provando a utilizzarla (non sono per niente un genietto) e appena avrò risultati positivi sarete informati.


Articoli correlati per categorie



178 commenti

Posta un commento

Archivio