Come allargare il layout di una o di tutte le pagine statiche di Blogger nascondendo sidebar e/o footer e/o commenti.

Come nascondere la sidebar, il footer e i commenti in tutte le pagine statiche di Blogger o solo in alcune di esse operando nel modello o direttamente nell'HTML della pagina dopo aver trovato i selettori univoci degli elementi che vogliamo nascondere.

Le pagine statiche sono state introdotte da Blogger molti anni fa e i nuovi utenti neppure sanno che all'inizio non c'erano e che ci si doveva arrangiare pubblicando post retrodatati. Tali pagine sono in genere utilizzate per contenuti particolari quali la Informativa lunga per i Cookie, il Disclaimer del blog, la Mappa del sito ma soprattutto Gallerie Fotografiche o Widget con tutti i post del blog divisi per etichette.

Con scelte di questo tipo è quindi opportuno cercare di rendere il layout delle pagine statiche più largo del normale. Il procedimento illustrato in questo post sarà appunto quello di nascondere la sidebar e/o il footer in una determinata pagina statica o in tutte le pagine statiche.

COME TROVARE I SELETTORI UNIVOCI DI SIDEBAR E FOOTER

Per poter procedere bisognerà trovare i selettori vale a dire le classi di stile CSS degli elementi che vogliamo nascondere. I blog possono infatti avere layout molto diversi tra di loro. C'è chi ha una sidebar a sinistra, chi ce l'ha a destra, chi ce l'ha sia a destra che a sinistra, chi ha una sidebar a sua volta divisa in altre due sidebar più piccole, chi ha il footer diviso in tre colonne e chi ce lo ha diviso in due colonne o anche in una sola. Ci sono poi i modelli scaricati da internet che hanno dei selettori con nomi inventati dagli sviluppatori che li hanno creati e che sono diversi da quelli dei template ufficiali.

Si apre in nostro sito con Firefox e si clicca sul destro del mouse quindi si va su Analizza elemento



Si visualizzerà una finestra nella parte bassa del layout dove cliccare sulla icona di "Seleziona un elemento della pagina" in alto a sinistra



L'icona diventerà celeste e si potrà selezionare per esempio la sidebar



Si torna nel modulo in basso e visualizzeremo il codice della sidebar evidenziato di celeste

Ci si clicca sopra con il destro del mouse e si sceglie Copia selettore univoco. Si apre un file di testo del Blocco Note e si incolla quello che abbiamo copiato negli appunti. Il selettore univoco della sidebar del blog che ho preso come test e che è posizionata sulla destra è #sidebar-right-1 e questo risultato sarà lo stesso per gran parte dei template ufficiali di Blogger.

Dovremo fare la stessa operazione se si ha una sidebar sulla sinistra. In un modello ufficiale di Blogger troveremo #sidebar-left-1 mentre il footer avrà come selettore univoco #footer-1. In questo caso è opportuno spostare sulla destra la finestra per poter cliccare più agevolmente sul footer

Alternativamente a questa analisi si può andare su Layout e visualizzare direttamente le sezioni 

Si può quindi decidere di nascondere le parti che ci interessano prendendo nota dei selettori.

NASCONDERE SIDEBAR E FOOTER IN TUTTE LE PAGINE STATICHE DI BLOGGER

Per nascondere sidebar e footer in tutte le pagine statiche di Blogger dopo aver trovato i rispettivi selettori univoci e aver salvato il template,  si va su Modello > Modifica HTML, si cerca la riga </head> e, subito sopra a questa, si incolla il codice seguente

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>    
<style>
#footer-1, #footer-2-1, #footer-2-2,#footer-3,#sidebar-right-1,#sidebar-right-2-1,#sidebar-right-2-2, #sidebar-left-1,#sidebar-left-2-1,#sidebar-left-2-2, .post-footer {display:none;}
#main {width: 960px; /*Larghezza della pagine statiche */}
</style>
</b:if>

quindi si salva il modello. I selettori univoci colorati di rosso sono stati presi dal Layout del blog di test ma debbono essere sostituiti da quelli trovati con il tool Analizza elemento o presi direttamente da Layout. È stata anche allargata la sezione #main per mostrare più spazio nell'area del post. Quando si aprirà una qualsiasi pagina statica questa avrà un layout simile a questo

Per nascondere anche l'area dei commenti basterà aggiungere #comments alla parte del codice colorata di rosso dopo aver inserito una virgola.

COME NASCONDERE SIDEBAR E FOOTER  IN UNA SOLA PAGINA STATICA

Si possono nascondere i vari elementi del Layout solo in determinate pagine statiche, per esempio quelle delle Gallerie fotografiche, e invece lasciare tutto invariato nelle altre. Per questa modifica si può procedere in due modi. Se intendiamo nascondere gli elementi in una sola pagina basterà usare un altro tag condizionale e  modificare il codice precedente in questo modo

<b:if cond='data:blog.url == "URL_PAGINA"'>    
<style>
#footer-1, #footer-2-1, #footer-2-2,#footer-3,#sidebar-right-1,#sidebar-right-2-1,#sidebar-right-2-2, #sidebar-left-1,#sidebar-left-2-1,#sidebar-left-2-2, .post-footer {display:none;}
#main {width: 960px;  /*Larghezza della pagine statiche */}
</style>
</b:if>

L'URL della pagina va incollato sempre con il suffisso canonico .com e non con il .it locale. Questo codice può essere usato anche per un post. Alternativamente a questa operazione possiamo operare nel codice HTML della pagina (o del post) in questione senza modificare il modello.

Durante la pubblicazione della pagina, o anche in un secondo momento durante una modifica, si va sul pulsante HTML accanto a Scrivi e, subito prima di tutto il resto del codice, si incolla

<style>
#footer-1, #footer-2-1, #footer-2-2,#footer-3,#sidebar-right-1,#sidebar-right-2-1,#sidebar-right-2-2, #sidebar-left-1,#sidebar-left-2-1,#sidebar-left-2-2, .post-footer,#comments {display:none;}
#main {width: 960px; /*Larghezza della pagine statiche */}
</style>

in questo modo

Si va su Aggiorna o Pubblica e il risultato sarà lo stesso di quello visto in precedenza. Le altre pagine statiche invece non subiranno alcuna modifica di Layout. Concludo ricordando che anche questa ultima procedura può essere utilizzata pure nei post e non solo nelle pagine.