Come eliminare le sidebar dalle pagine statiche nei nuovi modelli di Blogger.

Come nascondere le sidebar nelle pagine statiche di Blogger.

Nei vecchi template di Blogger era diventato abbastanza semplice togliere le sidebar dalle pagine statiche; con l'avvento dei template del Designer Modelli, la cosa è invece diventata più complicata ma finalmente fattibile. Prima di passare a illustrare il procedimento, ricordo che l'eliminazione delle sidebar risponde all'esigenza di avere un layout molto più ampio tale da poter utilizzare dette pagine per gallerie fotografiche, gallerie di video o landing page particolari. Nei nuovi modelli si può optare tra vari layout e si possono anche scegliere le dimensioni dei vari elementi. Se si va su Design > Designer Modelli > Layout si può vedere che si possono avere fino a tre sidebar e fino a tre colonne nel piè di pagina

mentre se si va su Design > Designer modelli > Modifica le larghezze ci sono dei cursori per la configurazione delle dimensioni

Questo comporta che in questi template sono comunque presenti dei codici relativi a almeno due sidebar. Se si è scelto un layout con una sidebar soltanto, la larghezza della seconda sarà posta automaticamente uguale a zero. Dopo questa breve introduzione teorica, passiamo alla personalizzazione vera e propria. Andiamo su Design > Modifica HTML e salviamo il modello completo per un eventuale backup di ripristino. Dopo aver messo la flag su espandi i modelli widget, cerchiamo una riga come questa

<b:variable default='930px' name='content.width' type='length' value='930px'/>

Il numero colorato di viola rappresenta la larghezza di default del modello e quello colorato di rosso la larghezza effettiva. Se non avete apportato modifiche alle larghezze, i due valori coincideranno. Dobbiamo tenere a mente la larghezza effettiva del blog anche se, come vedremo, sarà solo una misura indicativa. Adesso cercate questa riga

<div class='column-left-outer'>
e modificatela in questo modo
<div class='column-left-outer' id='left-sidebar'>
Cercate quest'altra riga
<div class='column-right-outer'>
e sostituitela con quest'altra
<div class='column-right-outer' id='right-sidebar'>

Dobbiamo creare due nuovi classi, left-sidebar e right-sidebar, per fare in modo che le sidebar diventino non visibili se si introduce il tag condizionale che riguarda le pagine statiche. Ho usato le due espressioni left-sidebar e right-sidebar per mantenere uniformità di lingua, visto che il codice del modello è in inglese, ma si possono scegliere anche altre espressioni. Adesso questi due attributi debbono trovare una corrispondenza nei fogli di stile (CSS). Si cerca la riga </head> e, subito sopra si incolla questo codice

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#left-sidebar {
display: none;
visibility: hidden;
}
#right-sidebar {
display: none;
visibility: hidden;
}
#main {
width: 900px; /*Larghezza della pagina statica */
}
</style>
</b:if>

Il numero in rosso rappresenta la larghezza della pagina statica e nei miei test ho potuto constatare che il risultato è esteticamente migliore se si mette una larghezza leggermente inferiore a quella di tutto il blog (p.e 900 invece di 930). E' evidente che questo valore può essere calibrato al meglio in un secondo momento. Si salva il modello e le sidebar non saranno visibili nelle pagine statiche. Guardate questa pagina statica demo che ho messo in rete rispetto alla homepage del blog da cui deriva.

Caso della sidebar presente sulla sinistra dell'area del post

Se è stato scelto un layout che prevede una sidebar sulla sinistra, il contenuto della pagina statica si vedrà spostato sulla destra. Per ovviare a questo piccolo inconveniente, dobbiamo innanzitutto vedere quanto è larga questa sidebar. Cerchiamo un codice simile a questo

<b:variable default='0' name='main.column.left.width' type='length' value='180px'/>

da cui si può desumere che la larghezza è di 180 pixel, che poi è quella di default. In questo caso, il codice da incollare sopra alla riga </head> sarà

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#left-sidebar {
display: none;
visibility: hidden;
}
#right-sidebar {
display: none;
visibility: hidden;
}
#main {
width: 900px; /*Larghezza della pagina statica */
margin-left: -165px;
}
</style>
</b:if>

Dove si è aggiunta la riga colorata di viola. Il contenuto della pagina viene cioè fatto iniziare 165 pixel più a sinistra. La differenza di 15 pixel tra la larghezza della colonna (180px) e il margine di rientro (-165px) è puramente indicativa e può essere modificata secondo le esigenze di ogni singolo layout. Ho postato in rete un esempio di pagina statica derivante da un blog con una sidebar sulla sinistra.