Centrare il layout di Blogger o spostarlo in alto o in basso.

Come centrare, abbassare o alzare il layout di tutto il blog su Blogger limitatamente a date risoluzioni oppure limitatamente alle pagine statiche o a una sola di esse o un solo post.

A seguito di un commento ricevuto ieri passo a illustrare una semplice procedura per centrare il layout del nostro sito su Blogger oppure per spostarlo più in alto o più in basso qualora ci fosse troppo o troppo poco spazio sopra all'Header o Intestazione. Premetto che le personalizzazioni e soprattutto i codici che andrò a presentare li ho testati in un modello ufficiale di Blogger. Non si può dire nulla in proposito ai template scaricati da internet in cui tali codici potrebbero o non potrebbero funzionare.

COME SPOSTARE IL LAYOUT DI BLOGGER SULLA SINISTRA O SULLA DESTRA

Poniamo che nonostante i nostri sforzi il layout del nostro sito non sia perfettamente centrato e che si veda spostato troppo da una parte. Si può risolvere con una semplice modifica al modello. Tanto per fissare le idee ecco due screenshot esemplificativi del problema e della sua soluzione. La situazione di partenza in effetti è perfetta e non ha bisogno di modifiche. Ho solo testato la funzionalità

Per spostare il layout di una certa quantità di pixel sulla sinistra si va su Modello -> Modifica HTML e si cerca la sezione <b:skin>  quindi si clicca sulla freccetta nera posta sulla sinistra per visualizzare tutto il codice della sezione quindi digitando Ctrl+F si cerca la riga ]]></b:skin>, quindi, subito sopra a questa, si incolla il codice seguente

.content {
margin-left:-150px !important;
}

Si salva il modello. Ovviamente il valore colorato di rosso si può modificare a piacere. Per spostare il layout verso la destra sempre di 150 pixel il codice da incollare nello stesso punto diventerà

.content {
margin-right:-150px !important;
}

 

COME LIMITARE LA MODIFICA A UN INTERVALLO DI RISOLUZIONE

Questa modifica potrebbe andare bene se il blog venisse aperto per esempio con un computer che avesse uno schermo da 1920 pixel ma potrebbe non essere funzionale se aperto per esempio con un netbook. Possiamo testare le varie visualizzazioni con il tool Screenfly. Inseriremo quindi una condizione in modo che la modifica funzioni solo con una risoluzione del computer superiore a un dato valore. Si va sempre su Modello -> Modifica HTML e stavolta si cerca la riga </head> quindi subito sopra a tale riga si incolla questo nuovo codice

<style>
@media screen and (min-width: 1600px) {
.content {
margin-left: -150px !important;
}
}
</style>

che sposterà il layout sulla sinistra sempre di 150 pixel ma solo per risoluzioni superiori a 1600 pixel. Si può usare la stessa sintassi anche per spostare il layout sulla destra.

COME LIMITARE LA MODIFICA ALLE SOLE PAGINE STATICHE

Quando si  allarga il layout delle pagine statiche nascondendo le sidebar può accadere che ci sia un decentramento di tali pagine. Si può risolvere con lo stesso sistema appena visto. Si va su Modello -> Modifica HTML e si cerca la riga </head> quindi sopra di essa si incolla questo codice

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
@media screen and (min-width: 1600px) {
.content {
margin-left: -150px !important;
}
}
</style>
</b:if>

Se volessimo centrare solo una pagina potremo sostituire la prima riga del tag condizionale con

<b:if cond='data:blog.url == "URL_PAGINA"'>

Ho lasciato anche il tag media screen per operare la modifica del layout solo per risoluzioni superiore a una data (1600 pixel) ma si può tralasciare se non abbiamo rilevato problemi in questo senso. Per spostare il layout verso destra si sostituisce margin-left con margin-right. 

COME SPOSTARE VERSO L'ALTO O VERSO IL BASSO IL LAYOUT DI BLOGGER

Si va sempre su Modello -> Modifica HTML e si cerca la riga ]]></b:skin>  con le modalità già illustrate. Subito sopra a questa riga si incolla questo codice

.content {
margin-top:50px !important;
}

che sposterà verso il basso di 50 pixel il contenuto di tutto il blog come mostrato dallo screenshot



Per alzare il contenuto basterà usare valori negativi come p.e. -50px.