Blogger: Migliorare la stampa dei post

Uno dei problemi di un gran numero di blog e siti web (anche professionali) è un non corretto supporto alle funzioni di stampa dei post o degli articoli: oltre al testo e alle eventuali immagini interessate ci si ritrova spesso a sprecare fogli e fogli di carta con intestazioni, loghi, menù laterali e  avvisi pubblicitari.

Fortunamente la situazione - malgrado sia estremamente seccante - si può migliorare in maniera piuttosto semplice (almeno per i nostri blog), possedendo anche solamente una minima dimestichezza con l'HTML!

Anche ArsTecnica.org non era immune da questo problema e infatti, provando a stampare un post qualsiasi, si otteneva un risultato come questo:

Per risolvere la situazione è necessario sfruttare i CSS e apportare piccole modifiche al template.

1. loggatevi in Blogger
   
   
2. cliccate sulla scheda DESIGN, quindi su Modifica HTML
   
   
3. marcate la checkbox Espandi i modelli widget e fate un backup di sicurezza del template, cliccando su Scarica modello completo
   
   
4. cercate la seguente porzione di codice:

]]></b:skin>

5. immediatamente prima inserite

@media print {
.noprint {display: none;}
body {background:fff; color:000;}
a {text-decoration: underline; color:00f;} 
}

6. ora è necessario scorrere il codice HTML e inglobare le sezioni che si desidera vengano escluse dalla stampa all'interno in questo codice

<span class='noprint'>
</span>

ad esempio la sezione

<div id='header'> <ul> <li><a href='http://www.arstecnica.org/'>Home</a></li> <li><a href='http://www.arstecnica.org/p/chi-siamo.html'>Chi siamo</a></li> <li><a href='http://www.arstecnica.org/p/licenza.html'>Note legali</a></li> <li><a href='/search/label/freeware' rel='nofollow'>Freeware</a></li> </ul> </div>

diventerà

<span class='noprint'>
<div id='header'> <ul> <li><a href='http://www.arstecnica.org/'>Home</a></li> <li><a href='http://www.arstecnica.org/p/chi-siamo.html'>Chi siamo</a></li> <li><a href='http://www.arstecnica.org/p/licenza.html'>Note legali</a></li> <li><a href='/search/label/freeware' rel='nofollow'>Freeware</a></li> </ul> </div>
</span>

7. ripetete l'operazione escludendo dalla stampa anche i vari adv pubblicitari
   
   
8. salvate

Ed ecco il risultato finale, niente pubblicità, menù, intestazioni inutili o barre laterali: