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:

 image

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

image

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:

image

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:
Condividi su Facebook Condividi su Twitter Pubblica su 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!

18 commenti:

Diamantya ha detto...

Molto interessante..pensa che proprio oggi guardavo il post che parlava delle pagine statiche per farne una che contenesse varie info su di me. Quindi se ho ben capito questa modifica appare solamente andando sulla pagina statica e non sul blog e vale per tutte quelle che si creano..giusto?? Grazie per tutto!!!

Tenebrae ha detto...

@diamantya: esatto! puoi provare il risultato prima e se non ti piace basta eliminare le righe aggiunte

Majka ha detto...

Ciao,

ho inserito il link al tuo blog nel mio blog http://evoluzioneditoriale.blogspot.com/ Se capiti su questo indirizzo, prova a dare un'occhiata e a dirmi cosa ne pensi. Grazie per tutti i tuoi consigli. A presto, Majka

Vinnie ha detto...

Ottimo

Il Profeta Elia ha detto...

A me non accade nulla! Ho come template uno dei degli proposti in draft!

MILADY ha detto...

Molto interessante questo post,Orazio...anche io avrei bisogno di un spazio più grande per i miei post...utilissima anche questa idea,come la precedente,per "leggi tutto"...Grazie!

Gabriele Gualco ha detto...

Bello. ma trovo più efficiente questa dicitura, che evita di vedere la colonna sebbene abbia il padding, e quindi un pezzetto si vedrebbe comunque:

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

Tenebrae ha detto...

@gabriele: concordo totalmente, tanto che ho aggiornato il post con il tuo consiglio :)

@majka: grazie majka, aggiungerò il tuo all'elenco dei blog che mi linkano e verrò a trovarti

@profeta: evidentemente la struttura del template è diversa, ci darò un'occhiata e magari integrerò il post

@milady: nel tuo caso, dai un'occhiata anche a questo allora!

Recenso ha detto...

Ciao Tenebrae, so che è possibile avere un adsense revenue sharing per blog multiautore anche su piattaforma blogger, ma che tu sappia esiste un modo per avere un revenue sharing autore/webmaster del tipo 90/10 o 80/20, cioè a percentuali diverse dal 100%?

Tenebrae ha detto...

@recenso: senza saperlo mi hai anticipato... nel senso che ho qualcosa pronto per il revenue sharing, anche se non avevo previsto la tua casistica... non è impossibile, ma mi ci devo dedicare, ti farò sapere direttamente nel post che dedicherò su come implementare il revenue sharing su blogger (prox settimana)

Recenso ha detto...

Grazie Ten :)

Ugo ha detto...

Ciao Tenebrae, Ti chiedo una cosa che magari hai già esposto in qualche Tuo articolo. Io ad esempio nel mio blog (basato su template blogger in draft) vorrei poter vedere alcuni widget solo sulla home page e non ogni volta che vado ad aprire un post. Ho provato alcuni suggerimenti trovati su internet ma non sono efficaci. Non vorrei che fosse perchè ho adottato i nuovi template di blogger appunto (quelli che si possono modificare per intenderci che al momento sono di 4 tipi)... Pensi che sia possibile?. Grazie.

Lord Spectre ha detto...

Buongiorno.....
Io volevo chiedere una cosa.....
Ho installato un Template che già di suo mi da la pagina statica (esattamente mi da un menù con 4 bottoni...uno è Home Page, mentre gli altri 3 vorrei modificarli in quanto non mi interessano)ho trovato la parte di codice per cambiare il nome, e son riuscito anche a moltiplicare i bottoni.
Quello che non riesco a capire,(calcolando che è la prima volta che mi avvicino all'HTML) è come andare a scrivere nella pagina.
Avendo cambiato il Template, ho importato anche le pagine statiche di blogger (quelle fatte con i Gadget)Ora vorrei copiarle o al limite rifarle......
Ma non riesco a capire esattamente come fare.....ho provato a fare ricerche con google, ma nessuna mi da delle risposte soddisfacenti.
Il mio blog è Questo: http://loscrignodilordspectre.blogspot.com/
Se riuscisse a spiegarmi come fare la ringrazzierei molto......
E' già da tempo che la seguo, e ho trovato il suo Blog molto interessante (ho inserito l'antipixel).
Grazie per l'attenzione....

Dany ha detto...

grazie mille! finalmente sono riuscita a togliere le colonne nelle pagine statiche!
Mi è rimasta una cosa che vorrei togliere, ma non trovo come si chiama: quella dove ho il foglietto giallo con le coccinelle http://dany-imieihobby.blogspot.com/p/tutorial.html

altra domanda si possono inserire i commenti nele pagine statiche?

grazie mille il tuo blog è utilissimo.

colorbis@yahoo.it ha detto...

Ma pero le nove template hanno nome diversi e no si po capire nulla.
Altra cosa si p avere tutti due tipi di pagine su steso blog.

Romy Beat ha detto...

Salve , io ho provato ma ... non va, puo darsi che la mia configurazione non possa essere cambiata , http://romybeat.blogspot.com/
Ciao .

Fra ha detto...

:( io non ci riesco....

chenlina ha detto...

red bottom shoes
pandora jewelry
louis vuitton paris
jordan 11
ugg boots
kobe 9 shoes
cheap oakley sunglasses
true religion uk
louis vuitton outlet
giuseppe zanotti sneakers
coach factory outlet
michael kors handbags
longchamp sac
louis vuitton bags
jordan 6
adidas originals
nike tn pas cher
adidas ultra boost
ghd hair straighteners
christian louboutin shoes
christian louboutin sale
minnesota vikings jerseys
adidas yeezy
ugg canada
michael kors outlet
kate spade outlet
nfl jerseys wholesale
michael kors handbags
ugg sale
mont blanc pens for sale
kobe bryant shoes
pandora jewelry
oakley sunglasses wholesale
louis vuitton
air jordans
canada goose
ralph lauren outlet
insanity workout
adidas nmd
mont blanc pen
chenlina20160823


Prima di lasciare un commento, leggete qui

Posta un commento