Come aggiungere un bottone per stampare i post e i commenti nei blog su Blogger.

Come aggiungere un link o una icona nella sidebar o alla fine dei post per stampare il contenuto del post e gli eventuali commenti.

Agli inizi della mia attività di blogging pubblicai un tutorial su come aggiungere un link o bottone per permettere ai lettori di stampare i singoli articoli compresi i commenti. A distanza di otto anni il principio per stampare i post rimane invariato però sono necessarie alcune modifiche per renderlo ancora funzionante.

Il principio è quello di creare un CSS per nascondere gli elementi del blog che non vogliamo vengano stampati per poi invece allargare lo spazio di quello che vogliamo venga stampato. Si utilizza in sostanza un sistema simile a quello per nascondere le sidebar nelle pagine statiche.

Il link per stampare può essere posizionato in una sidebar o anche alla fine dell'articolo. All'inizio vedremo la prima opzione per poi illustrare come procedere se invece si desidera la seconda. Dopo aver salvato il template si va su Modello -> Modifica HTML quindi si cerca la riga </head>. Subito sopra a questa si incolla questo codice

<style media='print' type='text/css'>
#header, .icon-action, .post-footer, #comments h4, .postprint, .header, #sidebar-right-1, #sidebar-left-1, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section,#navbar-iframe, .subscribe_notice, .noprint {display: none;}
.column-center-inner{width: 940px !important;}
</style>

quindi si salva il modello. Gli ID evidenziati di giallo sono quelli delle sidebar di sinistra e di destra per non visualizzarle nella stampa. Se il vostro modello fosse più complesso cercate gli ID delle altre sidebar e sezioni da nascondere andando su Layout. Il valore di 940 pixel è quello che abbiamo impostato per la colonna centrale del post che invece deve essere stampata.

Si va ora su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript e si incolla questo codice

<span style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGi30BUqef9ZNnubX8xE7T7v-z23kRC_aANnEg7Y-1x5R5GTuSBzN3rvpctBx93kuMvSkuvYcHsa4pywWbgEhXuwhMhLbq6xcJuz6CF0aoLLtrgAhi1OWo-dO-VUfEvA2fwi2X_6xlDtrs/36/stampa.png) left no-repeat; padding-left: 42px; font-size:18px; font-weight:bold;'><a href='javascript:window.print()'> Stampa il post </a></span>

Si salva e si posiziona nella sidebar. La icona ha dimensione di 36 pixel e la scritta è distanziata di 42 pixel. Si può cambiare icona e testo colorato di blu caricandone un altra su Google Foto per poi trovarne il link diretto. Il collegamento e la immagine per stampare i post sarà vista in tutte le pagine

Come vedete dallo screenshot ho anche digitato il titolo del widget "Stampa il post" prima salvarlo. La ragione risiede nel fatto che questo bottone viene visto in tutte le pagine e invece è opportuno che resti visibile sono quando si aprono gli articoli. Questa parte che vado a illustrare naturalmente è facoltativa e si può lasciare il bottone sempre visibile.

Si torna su Modello -> Modifica HTML quindi si cerca il titolo del widget che abbiamo digitato. Si incollano quindi i tag condizionali per mostrare il widget solo nei post vale a dire la riga

<b:if cond='data:blog.pageType == &quot;item&quot;'>

subito sotto a

<b:includable id='main'>

e la riga

</b:if>

subito sopra alla riga

</b:includable>

come mostrato nello screenshot seguente



Si salva il modello. Quando il lettore cliccherà su Stampa il post ecco quello che verrà stampato



L'articolo prenderà tutto lo spazio della pagina e verranno stampati anche i commenti.

Demo
Clicca qui

COME INSERIRE COLLEGAMENTO E ICONA SOTTO AI POST

È evidente che un link per stampare un post ha senso solo nella versione desktop. Invece di posizionare il secondo codice nella sidebar con Layout si torna su Modello -> Modifica HTML e si cerca la riga

<b:includable id='post' var='post'>

Si scorre il codice verso il basso fino a trovare la riga

<div class='post-footer'>

che determina l'inizio del footer. Subito sopra a questa si incolla questo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span class='postprint' style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGi30BUqef9ZNnubX8xE7T7v-z23kRC_aANnEg7Y-1x5R5GTuSBzN3rvpctBx93kuMvSkuvYcHsa4pywWbgEhXuwhMhLbq6xcJuz6CF0aoLLtrgAhi1OWo-dO-VUfEvA2fwi2X_6xlDtrs/36/stampa.png) left no-repeat; padding-left: 42px; font-size:18px; font-weight:bold;'><a href='javascript:window.print()'> Stampa il post </a></span>
</b:if>

quindi si salva il template. Alla fine degli articoli sarà visibile icona e link

Concludo ricordando che se vogliamo nascondere altri elementi oltre a header, sidebar, ecc si possono usare i tool Ispeziona elemento di Chrome e Analizza elemento di Firefox per trovarne gli ID e aggiungerli a quelli separati da virgole prima del {display:nome;}. Infine la classe postprint è stata introdotta per non stampare il testo Stampa il post se posizionato sotto l'articolo.

Aggiornamento: Se non volete che venga stampata una sezione o un paragrafo del post dovete mettere il suo codice tra queste due righe <div class='noprint'> e </div> .