Pubblicato il 19/04/16 - aggiornato il  | 9 commenti :

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ì

nome-sidebar-blogger
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

sidebar-doppie


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

personalizzare-pagina-statica

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

nascondere-sidebar-blogger

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

pagina-statica-senza-sidebar

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.


9 commenti :

  1. Grazie Ernesto! Sei stato gentilissimo e velocissimo :DD Stamattina ho fatto tutti i test su un modello di prova (incluso quello per eliminare i footer, a cui non avevo ancora pensato) e sono andati tutti a buon fine, e ne sono ben contento! Continuo a seguirti e a non perdermi nemmeno uno dei tuoi nuovi post! Ancora grazie e buon lavoro. :))

    RispondiElimina
  2. Sbaglio o l'orientamento della pagina è a sinistra? Più diminuisco le dimensioni più la pagina si restringe, ma solo a destra. Non c'è un modo per centrarla?

    RispondiElimina
    Risposte
    1. Forse è il caso che faccia un post su come centrare un layout generico e come applicarlo a una singola pagina. Seguimi i prossimi giorni
      @#

      Elimina
    2. (Grazie per la risposta). Volevo chiederti un'altra cosa. Io ho il modello con con il read more automatico. È possibile far sparire la sidebar quando si aprono i post (cliccando sul read more, per intenderci)?

      Elimina
    3. Una richiesta interessante. Non lo so. Salvo il commento. Se mi viene qualche idea ci faccio un post. Se non lo vedi significa che non ho avuto nessuna illuminazione :)
      @#

      Elimina
  3. ho messo un menu per desktop e uno per mobile con i tag condizionali in base alla risolzione del dispositivo grazie a te. visto che ora su desktop la sidebar (unica, a sinistra) è diventata di troppo, come fare per renderla visibile solo su mobile / in base alla risoluzione?

    RispondiElimina
    Risposte
    1. Anche io ho scelto questa soluzione ma senza il vincolo della risoluzione del dispositivo. La sidebar viene mostrata solo su desktop. Non è possibile mostrarla su mobile. Anche nella versione personalizzata non si può inserire e in quelle di default non è presente.
      @#

      Elimina
    2. da mobile la sidebar sinistra si apre cliccando le 3 linee, all'interno ci ho messo il menu per la versione mobile e alcuni gadget. però come mettere invisibile la sidebar su desktop?

      Elimina
    3. @# Prova a usare lo stesso codice di questo post. Al posto della riga evidenziata di verde nel secondo codice metti invece questa riga
      <b:if cond='data:blog.isMobile == "false"'>

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy