Pubblicato il 28/08/15e aggiornato il

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

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

analizzare-elemento

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

selezionare-sidebar

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

codice-sidebar

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

footer-blogger



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

sezioni-layout

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

area-pagine-statiche

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 condizionalemodificare 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

pagina-statica-allargare

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.




12 commenti :

  1. Buongiorno Ernesto,
    Sarebbe possibile fare in modo che la larghezza della pagina statica si adatti automaticamente alla larghezza del layout, anche nella versione personalizzata mobile?

    RispondiElimina
    Risposte
    1. Prova a sostituire width: 960px con width:100%; o width: 95% e poi guarda come funziona e fammelo sapere in un commento. Se non va si tenteranno altre soluzioni
      @#

      Elimina
    2. Grazie per la pronta risposta, ho tentato col 100% e il risultato non è ancora ottimale. Nella versione mobile la larghezza è corretta, in quella da pc invece resta lo spazio della sidebar.
      Ho tentato aumentando la percentuale al 120%, e in questo caso la visualizzazione da pc era corretta, mentre nel mobile compare la barra di scorrimento orizzontale.
      Immagino di dover provare con dei tag condizionali?

      Elimina
    3. @# I dati della larghezza vanno testati. È per questo che ti ho detto di provare. Hai detto 100% per il mobile e 120% per il desktop. Con questi dati dovresti modificare il primo codice in questo modo

      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <b:if cond='data:blog.isMobile'>
      <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: 100%;}
      </style>
      <b:else/>
      <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: 120%;}
      </style>
      </b:if>
      </b:if>

      Elimina
    4. Ciao Ernesto, scusa il ritardo nella risposta.
      Ho modificato il primo codice come da te suggerito, anche se l'ho applicato a una sola pagina statica, e si vede correttamente da mobile. Invece da pc resta sempre lo spazio vuoto per la sidebar di destra.

      Elimina
    5. Al post di width: 120%; metti width: 1100px; o un altra larghezza più adatta
      @#

      Elimina
    6. Ancora non va, prende la stessa larghezza anche da mobile!

      Elimina
    7. Credo di dover intervenire in qualche modo nel codice da pubblicare all'inizio della pagina statica.

      Elimina
    8. @# Ho fatto riferimento al codice del commento 1.c con i tag per distinguere mobile da desktop

      Elimina
    9. Si esatto, ho modificato col valore in pixel proprio quello, che ho inserito soltanto nell'html come da te suggerito. Solo che sembra non influire sul codice che inserisco all'inizio della pagina statica, la visualizzazione si adatta comunque a quello. Perdonami per il tempo che ti rubo, non sono brava a spiegarmi!

      Elimina
    10. I tag condizionali funzionano solo nel modello e non nell'Html. Ecco spiegato l'arcano
      @#

      Elimina
    11. Ok, allora cercherò una soluzione alternativa senza stravolgere tutto! Grazie per il tempo che mi hai dedicato, sei sempre disponibilissimo, buona giornata! :)

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.