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

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

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.