Come nascondere le colonne del blog quando si visualizza una pagina statica su Blogger

Così come è possibile capire stabilire regole per la visualizzazione di alcuni elementi solo nella pagina del singolo post (penso per esempio alla visualizzazione degli annunci AdSense), allo stesso modo si possono fare delle distinzioni sugli elementi visibili se viene visualizzata una pagina statica di Blogger.

Questo tipo di pagine si presta molto bene per inserire elementi di servizio (come una pagina con le informazioni personali) ma anche per scopi di diverso tipo in cui può essere utile avere quanto più spazio possibile a disposizione, anche a costo di sacrificare altri elementi del blog come le colonne laterali (o magari proprio per escluderle per dare risalto al contenuto della pagina).

E’ il contenuto di questo articolo, che sarà un utile rimando in futuro per altri articoli in lavorazione.

Trovare le colonne del template

Da Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cerca il codice CSS che identifichi lo stile delle colonne laterali, che avrà genericamente una formula di questo tipo:

#nomecolonna-wrapper

Nel caso del template Minima di Blogger, l’unica colonna laterale ha come identificativo:

#sidebar-wrapper

Diciamo che la regola generale è quindi cercare una riga che finisca con –wrapper. Se avete seguito le mie istruzioni per inserire la terza colonna, troverete anche:

#new-sidebar-wrapper

Purtroppo nessuno impedisce a chi ha creato il template di avere usato nomi assolutamente incomprensibili per identificare le colonne, e in quel caso chi vorrà fare la modifica dovrà armarsi di buona pazienza e non deve dimenticare di fare il backup del template.

Trovare la sezione dei post

Dopo aver individuato il codice CSS delle colonne, dovrete trovare quello della sezione dei post. La regola generale segue quella già indicata e nel caso del template Minima la sezione dei post è identificata da questo:

#main-wrapper

Tenete da parte le larghezze

Per le colonne ai lati del post, dopo aver trovato il codice CSS dovrete individuare la larghezza, indicata dalla parola width:

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Nel caso del template Minima la larghezza è 220 pixel. Stessa cosa per la sezione dei post:

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

In questo caso 410 pixel. Visto che vogliamo che la sezione dei post occupi tutta la pagina, dobbiamo sommare le due larghezze: 410 + 220 = 630. Se avete altre colonne ai lati dei post, dovrete sommare anche le loro larghezze.

Inserire il codice nel template

Cerchiamo questa riga di codice:

]]></b:skin>

E subito sotto inseriamo queste:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>

#main-wrapper {
  width: 630px;
  }

#sidebar-wrapper {
  display: none !important;
  }

  </style>
</b:if>

Come si vede, ho impostato come larghezza del main-wrapper (la sezione dei post) il valore di 630 (il risultato della nostra somma), mentre il sidebar-wrapper (la colonna) viene reso invisibile dalla riga che ho messo in rosso (grazie a Gabriele del consiglio). Se avessimo avuto altre colonne, anche quelle andavano riportate con la stessa riga (copiando e incollando il codice della sidebar-wrapper cambiandone il nome secondo l’esigenza).

Il risultato finale

Dopo aver salvato e visualizzato il blog, solo nella visualizzazione di una pagina statica, siamo passati da questo:

 

A questo, con molto più spazio e senza colonne:

Come si può vedere nell’immagine, a destra la larghezza del post non è perfettamente in linea con il bordo dell’header. Questo succede perchè alcuni template prevedono dello spazio tra gli elementi e anche nascondendoli lo spazio rimane. In questo caso basta allargare ancora un po’ di più la larghezza della sezione dei post, portandola fino a 660px:

Per concludere

Modifica un po’ tecnica che si rende complessa nel caso di template personalizzati (senza criterio) dall’autore, ma subito richiesta fin dall’introduzione delle pagine statiche su Blogger. Alcuni hanno già cominciato a usare tecniche simili, magari nascondendo i link “Post più vecchio”, “Home”, “Post più recente” per trasformare il proprio blog in una sorta di sito statico, e ne ho approfittato per proporre un mio standard personale, che ritengo quello più corretto perchè altera di poco la struttura originale del template.

La modifica varrà per tutte le pagine, e non è possibile personalizzarla per una sola pagina in particolare.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!