Come nascondere le sidebar nelle pagine statiche di Blogger.

Come personalizzare le pagine statiche di Blogger nascondendone le sidebar e/o il footer e settandone colore di sfondo e del testo oltre alla larghezza.

Nella piattaforma Blogger si possono creare al momento fino a 20 pagine statiche. Dette pagine non vanno a finire nei Feed RSS del sito e servono per contenuti avulsi dall'attualità. Si possono usare per un modulo di contatto, per la Informativa estesa sulla Cookie Law o per una galleria di immagini.

Visto che le pagine statiche hanno una finalità molto diversa dai post si può avere la necessità di modificarne il layout. Si può procedere in due modi distinti. La prima possibilità è quella di personalizzare ogni singola pagina statica in funzione dei suoi contenuti e la seconda è invece quella di modificare l'aspetto di tutte le pagine statiche operando direttamente nel modello. Se si decide per questa seconda ipotesi tutte le pagine statiche verranno modificate nello stesso modo.

COME TROVARE L'ID DELLE SIDEBAR DI BLOGGER

Prima di procedere bisogna trovare l'ID della o delle sidebar di Blogger. Si va su Bacheca > Layout e si legge l'ID della sidebar direttamente da lì

Nello screenshot che ho fatto al un blog di test tale sidebar ha ID sidebar-right-1 visto che si trova sulla destra. Se si trovasse a sinistra sarebbe sidebar-left-1.  Ci possono essere anche modelli con sidebar doppie con ID tipo sidebar-right-2-1 e sidebar-right-2-2 come mostrato qui sotto

COME NASCONDERE LE SIDEBAR IN UNA SINGOLA PAGINA STATICA

Se vogliamo modificare la larghezza della sidebar solo in una determinata pagina statica non occorre operare sul template. Si va su Bacheca > Pagine e si clicca su Modifica nella pagina statica che vogliamo personalizzare. Si sceglie HTML invece di Scrivi e all'inizio si incolla

<style type="text/css">
#sidebar-left-1, #sidebar-right-1, #sidebar-right-2-1, sidebar-right-2-2 {
display: none;
visibility: hidden;
}
#main {
width: 920px; /* Larghezza della pagina statica */
background:#fff; /* Sfondo pagina statica */
color:#003366; /* Colore del testo della pagina */
}
</style>

in questo modo



Si aggiorna o si pubblica la pagina statica per la prima volta. Il risultato sarà il seguente

con i contenuti che prenderanno tutto lo spazio della pagina mentre le sidebar verranno nascoste. Nel codice precedente possono essere scelti i codici dei colori del testo e del background oltre alla larghezza della pagina. È necessario inserire separati da virgola i giusti ID delle sidebar da nascondere evidenziati di giallo e colorati di viola. Se ci fosse una sola sidebar la virgola ovviamente non occorrere. Oltre alla sidebar si può decidere di nascondere anche il footer aggiungendo il suo ID a quelli delle sidebar.

Per esempio con questi ID #sidebar-left-1, #sidebar-right-1, #sidebar-right-2-1, sidebar-right-2-2, #footer-1, #footer-2-1, #footer2-2, #footer si nascondono anche footer con più colonne.

COME NASCONDERE LE SIDEBAR IN TUTTE LE PAGINE STATICHE

Per nascondere le sidebar in tutte le pagine statiche bisogna operare sul modello dopo aver salvato il template. Per questa operazione si utilizzano i tag condizionali. Si va su Modello > Modifica HTML e si cerca la riga </head> quindi, subito sopra, si incolla questo codice

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type="text/css">
#sidebar-left-1, #sidebar-right-1, #sidebar-right-2-1, sidebar-right-2-2 {
display: none;
visibility: hidden;
}
#main {
width: 920px; /* Larghezza della pagina statica */
background:#fff; /* Sfondo pagina statica */
color:#003366; /* Colore del testo della pagina */
}
</style>
</b:if>

dove si operano le stesse personalizzazioni già viste. Si salva il modello. Le pagine statiche prenderanno un aspetto simile a questa pagina statica in cui è stata inserita una Mappa del Sito

Si devono sostituire gli ID della o delle sidebar e si possono aggiungere anche quelli del footer.

APPENDICE

Si possono modificare tutte le pagine statiche esclusa una usando le nuove espressioni di tag condizionali  sostituendo nel codice il tag condizionale evidenziato di verde con il seguente

<b:if cond='data:blog.pageType == "static_page" and data:blog.url != "URL_PAGINA"'>

dove al posto di URL_PAGINA si sostituisce l'indirizzo della pagina statica che non vogliamo modificare. Ricordo di usare sempre negli URL il .com al posto del .it.