Pubblicato il 30/01/12e aggiornato il

Come eliminare le sidebar e personalizzare ciascuna pagina statica di Blogger.

Attualmente su Blogger ci sono sostanzialmente tre tipi di template: quelli Ufficiali ma di vecchio tipo che possono essere assimilati a quelli scaricati da internet e creati da web designer, quelli Ufficiali di Blogger che sono stati introdotti insieme al Designer Modelli e quelli a Visualizzazione Dinamica.

Per questo ultimo gruppo le personalizzazioni da introdurre sono assolutamente limitate visto che non è attiva l'opzione Modifica HTML nella scheda Modello. Al massimo si può andare su Modello > Personalizza > Avanzato > Aggiungi CSS per inserire dei fogli di stile per modifiche alquanto modeste.

Nei commenti su questo blog ho ricevuto spesso la richiesta di come fosse possibile modificare l'aspetto di una singola pagina statica. Ricordo di aver già affrontato questo tema nei post su come eliminare le sidebar nelle pagine statiche nei nuovi modelli e come eliminarle in quelli vecchi.  

Queste modifiche riguardavano però tutte le pagine statiche. Vediamo come modificare lo stile di ciascuna di esse in modo individuale. Dividerò il tutorial in due parti, il primo a beneficio di coloro che hanno un template vecchio o scaricato da internet e il secondo per chi ha un template del Designer Modelli.

 

Come modificare l'aspetto di una singola pagina statica nei vecchi template

In questo caso non occorre apportare nessuna modifica al modello. Si va su Pagine > Nuova pagina > Pagina vuota e si edita la pagina statica come fosse un post. Se la pagina è già stata pubblicata si va su Pagine > Modifica. Si aprirà l'Editor che poi sarà pressoché uguale a quello del post. In alto a sinistra si clicca su HTML che si trova accanto a Scrivi e, subito all'inizio della pagina, si può per esempio incollare un codice come questo

<style type='text/css'>
#sidebar-wrapper{display:none;}
#main-wrapper{
width: 120%; /* Larghezza pagina statica */
background:#eee; /* Sfondo pagina statica */
color:#003366; /* Colore del testo */
}
</style>

dove i dati in rosso possono essere personalizzati e le scritte in verde sono i commenti. Si pubblica la pagina oppure si va su Aggiorna. Vedrete che la sidebar sarà scomparsa e che sarà visibile uno sfondo e un diverso colore del testo. In un'altra pagina statica possiamo inserire altri parametri come per esempio una diversa larghezza (si può usare un valore assoluto p.e width: 940px; al posto di una percentuale), e dei diversi colori di background e per il testo.

Come modificare l'aspetto di una singola pagina statica nei template del Designer Modelli

In questo caso bisogna per prima cosa fare una piccola modifica al template. Ricordo sempre di salvarlo prima di ogni cambiamento. E' anche utile creare una cartella in cui archiviare tutti i file XML con i modelli che si sono salvati rinominati con la rispettiva data e eventuali precisazioni in modo da poter sempre effettuare un backup anche con template salvati mesi prima.

Si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Si cercano le righe

<div class='column-left-outer'>
<div class='column-right-outer'>

che sono in posizioni diverse del modello e si sostituiscono rispettivamente con le seguenti

<div class='column-left-outer' id='left-sidebar'>
<div class='column-right-outer' id='right-sidebar'>

Si salva il modello. Per personalizzare ciascuna pagina statica si va su Pagine > Nuova pagina > Pagina vuota oppure su Pagine > Modifica per aprire l'Editor della pagina. Si clicca su HTML che si trova accanto a Scrivi in alto a sinistra e, prima del contenuto della pagina si incolla un codice come questo

<style type="text/css">
#left-sidebar {
display: none;
visibility: hidden;
}
#right-sidebar {
display: none;
visibility: hidden;
}
#main {
width: 920px; /* Larghezza della pagina statica */
background:#eee; /* Sfondo pagina statica */
color:#003366; /* Colore del testo */
}
</style>

che consente di nascondere le sidebar e di personalizzare l'aspetto della pagina

personalizzare-pagine-statiche-blogger

Si va su Pubblica o su Aggiorna per mettere online la pagina statica che si visualizzerà in modo personalizzato

personalizzazioni-pagine-statiche

Se si sono già pubblicate altre pagine statiche, queste non muteranno in nulla il loro aspetto e, con questa metodologia, possiamo modificare larghezza, sfondo, colore e altri parametri di ciascuna pagina statica in modo individuale.





57 commenti :

  1. Ciao, ottima guida, la proverò. Una domanda, è possibile scegliere come background un'immagine invece che soltanto il colore?

    RispondiElimina
  2. E per eliminare la sidebar nella pagina commenti?
    Grazie come sempre

    RispondiElimina
  3. @francesco
    Non conosco la pagina commenti. Ci sono le pagine statiche, quelle di archivio, delle etichette, la homepage, i post ...

    RispondiElimina
  4. Sono in homepage per esempio del tuo blog, pigio commenti ed entro nella pagina,sezione...dedicata ai commenti. Mi riferisco a questo.
    grazie

    RispondiElimina
  5. @francesco_qci_
    Si tratta semplicemente di un post con l'aggiunta alla fine dell'URL della stringa
    #comment-form
    perché in questo blog c'è il modulo incorporato sotto il post. Non si tratta di una nuova pagina. Si apre semplicemente il post solo non all'inizio ma nell'area dei commenti.

    RispondiElimina
  6. Ciao! Ascoltami visto che siamo in tema volevo sapere se fosse possibile rimuovere la sezione "commenti" da una pagina statica, grazie in anticipo :D

    RispondiElimina
  7. Gentilissimo Ernesto due domande:
    01: ho inserito in pagina un testo come gadget ed ho dato a questo testo un link per creare collegamento ad un'altra pagina. E' possibile eliminare la sottolineatura del testo?
    02: ho creato alcune pagine statiche al mio blog. E' possibile eliminarne il titolo corrispondente che compare in pagina (titolo corrispondente al nome della pagina statica)?

    RispondiElimina
  8. @donatelloamabile
    Per la prima domanda rova a mettere il link con questa sintassi
    <span style="text-decoration:none;"><a href="URL COLLEGAMENTO">TESTO VISIBILE</a></span>
    Per la seconda domanda la richiesta è davvero bizzarra comunque non sei il solo ad averlo chiesto e avevo già pubblicato un post in merito
    http://www.ideepercomputeredinternet.com/2011/04/nascondere-il-titolo-nelle-pagine.html

    RispondiElimina
    Risposte
    1. grazie mille sempre preciso e puntuale. la domanda è un pò bizzarra perchè credo val
      ogliamo usare il blog come un sito per cui il nome delle varie pagien non vogliamo che compaia oppure sia caratterizzata da una grafica a parte sotto forma di immagine, per cui il testo con il titolo del post/pagina può a volte dare noia, ma nulla di insopportabile :)grazie per l'aiuto!

      Elimina
  9. Salve complimenti per il blog, veramente utile.
    Vorrei chiederti se è possibile eliminare una sidebar dai post come nelle pagine statiche,
    grazie ancora per i suggerimenti, ciao.

    RispondiElimina
    Risposte
    1. @sergingus
      Se vuoi eliminare la sidebar oltre che dalle pagine statiche anche dai post, dove è che la vuoi lasciare? A questo punto ti conviene cambiare template e prenderlo a una sola colonna. Comunque tecnicamente è possibile ma non così immediato.

      Elimina
    2. Vorrei esattamente lasciare solo la sidebar sx e mantenere le due solo in home page.
      stavo testando i tuoi suggerimenti qui http://sergingus-prova200.blogspot.it.
      comunque se è troppo complicato farò diversamente.
      Grazie mille per la risposta.

      Elimina
  10. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. @Lamiacasettadizuccerodilaura
      Ti ho già risposto su Google Plus
      https://plus.google.com/111056841635962157738/posts/jTF1gutxC6B?hl=it

      Elimina
  11. hey Ernesto, ho seguito la guida, e le sidebar non me le mostra più, però mi lascia lo spazio bianco al posto delle sidebar. Come posso elimininarlo?
    Se vuoi dare un'occhiata questo è il mio blog www.infoapplecomputer.blogspot.it
    La pagina che ho modificato è "Live Apple Keynote"

    RispondiElimina
  12. @KevinMaggi
    Usa Firebug Lite
    http://www.ideepercomputeredinternet.com/2012/07/firebug-chrome-blogger-css-html.html
    per nascondere tutto il superfluo inserendo dei CSS del tipo

    .fauxborder-left {display:none;}

    RispondiElimina
  13. ok, non ci capisco molto, ma ok. Ma se invece volessi una pagina completamente vuota? cioè anche senza footer, gadget delle pagine,ecc.?

    RispondiElimina
    Risposte
    1. @KevinMaggi
      Leggi il post che ho appena pubblicato
      http://www.ideepercomputeredinternet.com/2012/09/blank-template-blogger.html

      Elimina
  14. Ciao Ernesto,
    io non vorrei che tutte le mie pagine avessero la tipologia della homepage. Come mai sulle pagine che aggiungo nn mi lascia fare 2/3/4/5 post ma è impostata come unica pagina? Che devo fare?
    Vedi il mio blog http://lamiacasettadizucchero.blogspot.it/ - vorrei avere la possibilità di poter sfruttare di piu' anche le altre pagine.
    Ecco un'esempio: http://creamaricrea.blogspot.it/
    Spero di essermi spiegata.
    Ti ringrazio tantissimo per i tuoi preziosi consigl ;)

    la mia casetta di Zucchero

    RispondiElimina
    Risposte
    1. @LamiaCasettadiZucchero
      A ciascuna pagina è associato un URL. In alcuni URL cone quello della Homepage, delle etichette o dell'archivio è presente un insieme di pagine. Negli URL dei post si può visualizzare solo una pagina.

      Elimina
    2. Quindi come avrà fatto quella ragazza secondo lei a fare di tutte le pagine una "homepage" ?

      Elimina
    3. @Lamiacasettadizucchero
      Quali pagine? Tipo questa?
      http://creamaricrea.blogspot.it/search/label/cucito%20creativo
      Sono pagine di etichette. E' la raccolta di tutti i post che hanno quella etichetta.

      Elimina
    4. Ciao e grazie davvero per il post. Nel mio blogspot avrei bisogno di personalizzare una pagina facendo in modo
      a) di scrivere diversi post (mi pare di capire che si possa usare il sistema delle etichette, come dicevi sopra, ma ce ne sono altri?)
      b) di inserire colonne a sx e a dx con i vari gadget di blogspot (immagini ecc), mentre la home dovrebbe restare non suddivisa.
      Grazie mille

      Elimina
    5. Puoi mettere un elenco di post in una pagina statica, non me ne vengono in mente altri. Si può personalizzare l'aspetto del blog inserendo degli elementi solo in particolari pagine con i tag condizionali
      http://www.ideepercomputeredinternet.com/2013/03/tag-condizionali-blogger.html
      @#

      Elimina
    6. Grazie per la risposta.
      Perdona l'ignoranza, ma non capisco come.
      Le etichette che io sappia si possono mettere solo sui post.
      Come faccio a fare in modo che determinati post etichettati in un certo modo compaiano solo in una specifica pagina?
      Se vuoi dare un occhio, sto facendo il sito per il mio paese (bracchio.it) e sulla pagina fc (e solo su quella) dovranno comparire i post relativi alla squadra di calcio.
      Stesso discorso varrebbe per i gadget. Nella pagina della squadra dovrebbero comparire immagini diversi da quelle delle altre pagine (i piccoli sponsor locali, il link al CSI....)
      Ancora grazie

      Elimina
    7. Mi pare che tu abbia troppa carne al fuoco per essere uno alle prime armi, almeno così sembra dal tipo di domande. Forse potresti creare dei sottodomini specifici per ogni argomento ma non è cosa alla portata di tutti.
      http://www.ideepercomputeredinternet.com/2012/06/creare-dei-sottodomini-di-un-dominio.html
      http://www.ideepercomputeredinternet.com/2012/06/come-creare-un-network-di-blog-su.html
      Invece per quello che riguarda il filtro dei post da visualizzare nella pagina Facebook puoi usare IFTTT
      http://www.ideepercomputeredinternet.com/2013/01/ifttt.html
      o Twitterfeed
      http://www.ideepercomputeredinternet.com/2009/11/come-postare-i-commenti-del-blog-su.html
      @#

      Elimina
  15. Ho già seguito i tuoi consigli per togliere le sidebar dalle pagine...ora mi piacerebbe sapere se si può inserire un codice per ottenere delle colonne e...sempre più difficile, inserire in queste colonne i gadget dei blog seguiti, come in questo esempio
    http://home-shabby-home-links.blogspot.it
    Grazie!

    RispondiElimina
    Risposte
    1. @ cinziacorbetta
      Fammi capire, prima togli le sidebar e poi le vuoi rimettere?
      Il blog che mi hai indicato ha un modello particolare formato da colonne. Non si può applicare a una o più pagine statiche. Volendo potresti creare dei sottodomini
      http://www.ideepercomputeredinternet.com/2012/06/creare-dei-sottodomini-di-un-dominio.html
      e in ciascun sottodominio inserire quel modello che comunque non so da chi sia stato creato

      Elimina
    2. Grazie per la risposta. Pensavo si trattasse di una pagina personalizzata. Proverò a vedere il link che mi hai indicato.
      Ciao

      Elimina
  16. Ho scritto un articolo sul mio blog con il tuo codice inserito dopo lo "stacco"

    http://ivabellini.blogspot.it/2013/01/vaccino-trivalente-autismo-comilva-medbunker.html

    In questo modo nella home è presente la sidebar ma nella pagina del articolo è ora possibile incollare con Clipboard o con altri, quello che non ci starebbe con la sidebar a destra.

    RispondiElimina
    Risposte
    1. @ IvanoBellini
      Infatti nella home la sidebar si vede. E' una buona idea per personalizzare un singolo post o una singola pagina senza modificare il modello :)

      Elimina
    2. Appunto, è una drittata per quello, ma ora tolgo il codice perchè ho scoperto che posso ridurre il primo articolo con una perdita accettabile di risoluzione dello stesso, mantenendo così la sidebar. Ci saranno altre occasioni per usare questa "supercazzola" ;)

      Elimina
  17. Aiutooo!!! Ho notato che non funziona più la condivisione della home e dei singoli articoli con i social network cinesi! Mentre con le pagine statiche e con gli altri social va tutto bene....mi chiedo, forse questo è dovuto alla modifica che tu suggerisci qui!?
    Verifica tu stesso usando la linguetta verticale blu a sinistra con la scritta in cinese ;)

    RispondiElimina
    Risposte
    1. @ Non metto in dubbio che non ti funzioni più la condivisione sui social cinesi ma questa personalizzazione penso proprio che non c'entri nulla. La avevi anche prima, presumo. Forse dipende da loro che hanno posto delle limitazioni. E' successo anche con Facebook

      Elimina
    2. limitare gli articoli singoli e la home, ma non le pagine statiche!? Che senso ha? Si perchè con le pagine statiche i cinesi vanno benone come sempre sono andati, sono le pagine normali che mi danno l errore "The connection to the server was reset while the page was loading." quando cerco di condividerle in Cina.

      Elimina
  18. Ciao Ernesto, ho provato ad eliminare le sidebar da una pagina statica, ok queste mi scompaiono, ma la pagina statica invece di occupare tutta la larghezza del modello, rimane tutta spostata verso dx. Dove ho sbagliato? Eppure ho seguito alla lettera le tue indicazioni.
    Loredana

    RispondiElimina
    Risposte
    1. Dipende dalle impostazioni ereditate dal tuo modello. Prova a fare questa modifica
      #main {
      width: 920px;
      margin-left:-300px;
      ....
      inserendo un margine negativo a sinistra per vedere se va. Al posto di 300 puoi mettere un altro valore.
      @#

      Elimina
    2. ok. mille grazie. :-) così funziona.

      Elimina
  19. Ciao.

    Come mai con la nuova visualizzazione del codice html
    usando il ctrlF non trova le stringhe
    div class='column-left-outer'
    div class='column-right-outer'

    Grazie

    RispondiElimina
    Risposte
    1. Può darsi che questi tag non ci siano. Forse hai un modello scaricato da internet. Per essere sicuro segui questa procedura
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      @#

      Elimina
    2. Grazie per la sollecita risposta.
      Il modello utilizzato è uno standard di blogger (semplice)
      ho provato anche a cambiare il modello,
      ma non trova questi tag ...
      Grazie

      Elimina
  20. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  21. Ciao Ernesto, ho modificato una pagina con questa spiegazione e funziona perfettamente. Ecco la mia difficoltà: su desktop si visualizza benissimo mentre su mobile il testo deborda a sinistra, costringendo a scorrere in larghezza, penalizzando la navigazione. Come posso modificare il codice nella pagina? Grazie in anticipo!

    RispondiElimina
    Risposte
    1. Dovresti inserire i codici nel modello e non nella singola pagina quindi utilizzare i tag condizionali per fare in modo che questi codici siano efficaci solo per il desktop e non per il mobile. Leggi questo post
      http://www.ideepercomputeredinternet.com/2014/11/blogger-tag-condizionali-desktop-mobile.html
      Se hai un po' di esperienza non ti dovrebbe essere difficile trovare la strada giusta.
      @#

      Elimina
  22. Salve, la ringrazio per alcuni suoi tutorial e consigli che ho già utilizzato con successo. Purtroppo non riesco ad eliminare la sidebar dalle pagine statiche nel mio modello (attualmente ne uso uno di prova). Aprendo l'html non riesco a trovare le righe da modificare indicate in questo post div class='column-left-outer' div class='column-right-outer'
    Probabilmente dal 2012 google ha apportato delle modifiche al modello "Semplice" che ho scelto per il mio sito? Esiste qualche soluzione alternativa per ovviare al problema? Ancora grazie e saluti :)

    RispondiElimina
    Risposte
    1. Salvo il tuo commento. Riprenderò il post nei prossimi giorni usando come test un modello più recente
      @#

      Elimina
    2. Molte grazie! (..anche per il "tu"). Allora resto in attesa dei prossimi aggiornamenti consultando direttamente questo post. Ciao e a presto! :)

      Elimina
    3. Ecco il nuovo post su questo tema
      http://www.ideepercomputeredinternet.com/2016/04/blogger-pagine-statiche-sidebar-larghezza.html
      @#

      Elimina
    4. Grazieee! :) soprattutto per la gentilezza e la velocità con cui hai risposto alla mia richiesta! Ho subito testato i nuovi codici sia alla pagina singola che all'intero modello, e funziona tutto perfettamente. Ti ringrazio molto, un saluto e buona giornata! :))

      Elimina
  23. Ciao e
    Ernesto, io ho un problema diverso, non sono riuscita a trvoare nulla nel tuo sito. Spero che tu possa aiutarmi. Da ieri mi sono accorta che i widget del mio sito, sia quelli di sinistra che queli di destra sono tutti in fondo al blog, per l'esatezza nel footer. Non riesco a farli visualizzare in alto, risperttivamente a dx e sx. Come mai mi è ccaduta una cosa del genere? Ho provato anche a installare un altro modello, ma nulla. Grazie. Il mio blog www.ellagai.com

    RispondiElimina
    Risposte
    1. È probabile che tu abbia impostato una larghezza complessiva del blog che non è compatibile con la larghezza dalla main area e della sidebar. Prova a seguire questo post
      http://www.ideepercomputeredinternet.com/2011/05/come-cambiare-la-larghezza-del-blog-e.html
      Puoi aumentare la larghezza della sidebar e contestualmente diminuire quella dell'area del post oppure aumentare la larghezza totale aumentando quella della sidebar. Ricordati di apportare le modifiche solo dopo aver salvato il template
      @#

      Elimina
    2. Nel senso che se la larghezza della sidebar non è sufficiente i widget vanno a finire sotto la main area
      @#

      Elimina
    3. scusami, ho risolto, non avevo mchiuso un tag in un post e mi si era sballa tutto.
      Posso approfittare per chiderti un'altra cosa, mi consigli (dato che ne hai scritto più di uno) perinserire i pulsanti di condivisione?
      Fino a ieri li inserivo manualmente a ogni post. Vorrei non doverlo più fare. Grazie

      Elimina
    4. Puoi seguire questo post
      http://www.ideepercomputeredinternet.com/2016/03/blogger-icone-social-network-mobile-desktop.html
      per installare i bottoni nella versione mobile (opzionalmente) e in quella desktop.
      @#

      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.