Allargare il template del blog a tutta la pagina
Inauguriamo una rubrica tecnica di modifiche per blog in collaborazione con l'amico, ed ex membro di Diego Garcia, Elgatoben.
Cominciamo oggi già oggi con l'affrontare un argomento importante per la qualità grafica di un blog, ovvero l'allargamento a tutta la pagina del template del blog.
Speriamo, grazie alle guide di Elgato, di offrire un servizio utile a tutti i bloggers.
Prossimamente: Come creare una c-box per i commenti dei visitatori.
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.
Post
ottima rubrica... la seguirò sempre. Per il momento, però, non mi interessa, dato che ho già un blog a tutta pagina... :D
il monticiano says
Voglio confessarti una cosa. Che tu sei un genio non c'è alcun dubbio, che le indicazioni che fornisci sono perfette, che il risultato che si ottiene è magnifico ma spiegami per favore come fa un capoccione-somaro come me e per di più ai primi passi in questo campo a cliccare un solo microscopico tasto in più di quelli che finora ha imparato a forza di notevoli sforzi?
Scusa la domanda troppo lunga ma ti prego abbi pietà di me. Sapessi quanto ci sformo per il fatto che non riesco a seguirti. Consolami.
Bastian Cuntrari says
Cavolo, Mirco! Questo post me lo stampo proprio (e poi ci provo...)!!! Grazie!
3my78 says
Ottimo. Che io di impostazioni ci capisco niente :-)
Sgang says
buono
Ivo Serentha and Friends says
Faccio un nodo al fazzoletto,proverò nel prossimo weekend,ora me cala la palpebra!!!
Non sono convinto d'un particolare,a tutta pagina,ma tutte le notizie,gadget vari a lato che fine fanno??
Notte
&& S.I. &&
il cuoco says
Grazie ci proverò sicuramente in settimana e se puoi mi insegni anche a mettere una colonna sonora continua? Grazie
tommi says
rubrica interessante. la terrò d'occhio per carpire soluzioni utili da applicare al mio blog!
tommi
BC. Bruno Carioli says
Grazie, ottimi consigli.
Andrew says
ottima guida mirco, ci voleva
Lalia says
Grazie per le informazioni. Da qualche giorno ci provavo senza riuscirci.
hock says
ITemplatez.com offers professional web templates, flash templates ,swish templates, dreamweaver templates, and other web design productsavailable for immediate download.
Anonimo says
Grazie! La spiegazione è chiarissima!
Anonimo says
leggere l'intero blog, pretty good
Anonimo says
La ringrazio per Blog intiresny
Anonimo says
imparato molto
Anonimo says
molto intiresno, grazie
Anonimo says
Si, probabilmente lo e
Anonimo says
Si, probabilmente lo e
Anonimo says
necessita di verificare:)
Anonimo says
Perche non:)