Come nascondere sidebar, footer e commenti in un post di Blogger.

Come personalizzare il layout di un post di Blogger eliminando sidebar, footer, commenti e altri elementi senza modificare il modello.

Mi ricordo quando per la prima volta pubblicai un tutorial per nascondere le sidebar nei nuovi modelli di Blogger e per applicare queste personalizzazioni a una singola pagina statica. Seguendo la falsariga del post in cui illustravo come mostrare un background personalizzato in un determinato articolo vediamo come sia possibile modificare il layout di un qualsiasi post o di una singola pagina statica senza neppure intervenire nel codice del modello.

La prima cosa da fare è quella di scoprire i fogli di stile di tutti gli elementi che vogliamo modificare o nascondere. Si può usare Firebug, estensione di Firefox, oppure la più semplice Firebug Lite per Chrome. Chi non le conoscesse può leggersi i post che ho linkato e dove ho anche pubblicato dei videotutorial di questi addon per i due browser.

Ogni modello ha una struttura dei fogli di stile sotto certi aspetti unica, dobbiamo quindi scoprirli tramite Firebug e Firebug Lite. Con quest'ultima basta cliccare sul destro del mouse e scegliere Inspect with Firebug Lite per poi cliccare su Inspect e selezionare con il mouse l'elemento che ci interessa.

L'elemento selezionato sarà circondato da un rettangolo blu e nella finestra di Firebug Lite si visualizzerà il CSS corrispondente. Nello screenshot precedente si vede per esempio che la scritta Iscriviti a: Commenti sul post (Atom) ha class="feed-links" come CSS. Ci sono due tipi di selettori: class e id. Il primo è generico mentre il secondo è univoco nel senso che il primo può essere applicato a diversi elementi della pagina mentre il secondo a uno soltanto. Dobbiamo quindi innanzitutto verificare il tipo di selettore di un determinato oggetto. Se è del tipo class, come nell'esempio precedente, dovremo inserire nello stile .feed-links mentre se è del tipo id il CSS diventerà per esempio #HTML4. In sostanza con class si fa precedere il nome dal punto e con id dal cancelletto. 

Per nascondere gli elementi utilizzeremo il tag display:none; che serve proprio per questo scopo. Come esempio vediamo come nascondere la sidebar di destra, il footer del post e l'area dei commenti. Dopo aver trovato i CSS dei vari elementi, creiamo quindi questo codice

<style type="text/css">
.column-right-outer, .blog-pager, .post-header-line-1, .post-footer, .comments, .feed-links { display:none !important;}
.post { width:150% !important; }
</style>

dove gli elementi da nascondere sono stati separati da virgole. Ho inserito anche una larghezza del post superiore del 50% al normale in modo che possa estendersi per tutta la larghezza del layout. Al posto della percentuale 150% si può mettere un valore assoluto come per esempio 980px.

Con le personalizzazioni possiamo anche non fermarci. Poniamo per ipotesi che volessimo nascondere anche il titolo e la data. Sempre con Firebug Lite nel modello che ho preso come test, il CSS della data è class="date-header" mentre quello del titolo è class="post-title". Per nascondere anche questi due elementi non resta che aggiungere nel codice precedente prima di </style> anche la riga

.post-title, .date-header {display:none !important;}

Potrebbe essere un modo originale per creare una galleria di foto o di video. Si può anche andare oltre e inserire un colore o una immagine di sfondo. Per la immagine vi rimando all'articolo già citato per lo sfondo personalizzato degli articoli. Se si vogliono modificare il colore del testo e il colore dello sfondo del post in oggetto potremo cambiare il CSS in questo modo

.post { width:150% !important;
color:#FFF;
background-color:#121212;
}

Il post prenderà questo aspetto decisamente originale

Ricapitolando, il CSS che abbiamo creato potrebbe essere come questo (vedi codici dei colori)

<style type="text/css">
.column-right-outer, .blog-pager, .post-header-line-1, .post-footer, .comments, .feed-links { display:none !important;}
.post { width:150% !important;
color:#FFF;
background-color:#121212;
}
.post-title, .date-header {display:none !important;}
</style>

Si va su Design > Post > Crea nuovo post > HTML e si incolla all'inizio dell'articolo in tale modalità

quindi si pubblica come al solito. E' meglio farlo direttamente dalla modalità HTML per evitare che Blogger introduca arbitrariamente tag indesiderati. E' anche opportuno andare sulla destra in Impostazioni post > Data di pubblicazione e inserire una data antecedente agli ultimi articoli pubblicati in modo da non farlo andare in homepage perché potrebbe influenzare il suo aspetto