Blogger: pulsante per stampare i post

Come aggiungere un bottone per stampare i post su Blogger o per salvarli in PDF, scegliendo cosa stampare e cosa no tra header, footer, sidebar, commenti, banner pubblicitari, ecc..., e inserire un logo nella stampa

Anche se la digitalizzazione dei contenuti è ormai una strada tracciata che non prevede inversioni di marcia, ci possono essere dei casi in cui occorre stampare una pagina di un sito per fissarne i contenuti. La stampa può essere anche virtuale, visto che il salvataggio di una pagina web in formato PDF non è altro che una operazione di stampa.

La difficoltà di creare un bottone per lasciare stampare i nostri contenuti è quella della presenza di un sacco di elementi sovrabbondanti. Mi riferisco per esempio all'header, al footer, alle sidebar, ma anche alle unità pubblicitarie e anche ai commenti. A seconda della tipologia dei blog, alcuni di questi elementi vengono considerati inutili per essere stampati, mentre non lo sono in altre situazioni.

In questo post vedremo come personalizzare la stampa dei post sul nostro blog su Blogger in modo da permettere la stampa di solo quello che riteniamo importante. Una soluzione molto interessante, che prevede l'utilizzo delle funzionalità di Google Sites, l'ho già mostrata per i blog di cucina che volessero far stampare le ricette, con solo l'elenco degli ingredienti e delle istruzioni per la preparazione del piatto.

Si crea un secondo sito su Google Sites in cui pubblicare solo il testo della ricetta. In calce alle pagine create con Google Sites c'è il link Stampa Pagina, che può essere usato dal lettore per stampare ingredienti e istruzioni per la preparazione della ricetta. Questa metodologia, che può essere usata anche per siti di altro genere, ha però la controindicazione di dover sostanzialmente creare due post, uno per il blog ufficiale e uno per Google Sites, epurato di tutti gli orpelli inutili in fase di stampa della pagina.

La selezione dei contenuti da non stampare, può essere fatta anche preventivamente attraverso le classi di stile (CSS) e gli ID dei singoli elementi della pagina. Si può usare il tool Ispeziona di Chrome per trovare i selettori dei vari elementi. Facciamo degli esempi pratici. Si salva il Tema, per un eventuale ripristino, quindi si va su Tema -> Modifica HTML, si cerca la riga </head> quindi, subito sopra, si incolla questo codice:

in cui attraverso il tag display:none; si impedisce la stampa degli elementi separati da virgole. Per esempio con il tag #comments non si stampano i commenti al post, con il tag #header non si stampa l'intestazione, con il tag #footer non si stampa in footer e così via. Ovviamente ciascun utente può lasciare gli elementi che invece vuole che siano stampati. Il tag .noprint è stato inserito per aggiungere altri elementi come vedremo più tardi.

Il tag width: 920px !important; serve per mostrare la colonna centrale del blog di larghezza 920 pixel che ovviamente possono essere modificati. In questo modo si evita dello spazio inutilizzato nella zona delle sidebar.

Se avete un Tema molto personalizzato, o scaricato da internet, e volete nascondere altri elementi, vi consiglio di leggere il post su come trovare gli ID delle sezioni del blog su Blogger andando su Layout. Tali ID potranno essere aggiunti separati da virgole a quelli già presenti nella lista.

AGGIUNGERE UN PULSANTE DI STAMPA NELLA SIDEBAR

Per mostrare un pulsante di stampa nella sidebar del sito, bisogna innanzitutto avere una immagine di un tale bottone e caricarla sul web. Lo si può fare per esempio creando una Bozza su Blogger, in cui poi caricare detta immagine e ricavarne l'hotlink. L'immagine rimarrà online anche dopo aver eliminato la Bozza.

Si va poi 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/s36/stampa.png) left no-repeat; padding-left: 42px; font-size:18px; font-weight:bold;'><a href='javascript:window.print()'> Stampa il post </a></span>

che deve essere considerato come una sorta di esempio. Al posto dell'URL del bottone colorato di rosso, incollate l'indirizzo del vostro pulsante. Potete anche settare diversamente le misure del bottone.

Il pulsante sarà visibile in tutte le pagine del sito. È però opportuno che rimanga visibile solo nei post, visto che sono quelli i contenuti da stampare e non la home, le pagine di etichette o di archivio. Al widget HTML/Javascript del bottone avremo opportunamente aggiunto un titolo per individuarlo nel codice HTML del Tema.

Lo si trova incollandolo nel campo che si apre, e andando su Invio, dopo aver cliccato sull'area del codice e aver digitato Ctrl+F. Si clicca sulle freccette del codice per visualizzarlo interamente. Si individuano le due righe

<b:includable id='main'> e </b:includable>

Subito sotto alla prima, si incolla il tag condizionale seguente

<b:if cond='data:blog.pageType == "item"'>

e subito sopra alla seconda, si incolla la chiusura del tag condizionale </b:if>, come mostrato nello screenshot. Si salva il Tema. Il bottone per la stampa a questo punto sarà visibile solo nei post. Chi ci cliccherà sopra, visualizzerà l'anteprima di stampa e una finestra in cui selezionare la stampante da usare.

Nella anteprima di stampa saranno visualizzati solo gli elementi che abbiamo deciso di non nascondere. La scelta della stampante può essere fisica oppure virtuale. In questo secondo caso si salverà un PDF del post.

COME MOSTRARE IL PULSANTE DI STAMPA ALLA FINE DEL POST

Invece che mostrare il pulsante di stampa nella sidebar, lo si può mostrare automaticamente alla fine o all'inizio del post. Si va su Tema -> Modifica HTML e si cerca la riga

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

quindi si scorre verso il basso fino a trovare l'altra riga

<div class='post-footer'>

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

<b:if cond='data:blog.pageType == "item"'>
<span class='postprint' style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGi30BUqef9ZNnubX8xE7T7v-z23kRC_aANnEg7Y-1x5R5GTuSBzN3rvpctBx93kuMvSkuvYcHsa4pywWbgEhXuwhMhLbq6xcJuz6CF0aoLLtrgAhi1OWo-dO-VUfEvA2fwi2X_6xlDtrs/s36/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>

Si salva il template. Il pulsante sarà mostrato alla fine dell'articolo. La classe .postprint è stata aggiunta per non mostrare il pulsante per stampare il post nella anteprima di stampa.

Per mostrare il pulsante sotto il titolo, prima del contenuto, il codice precedente va incollato subito sopra al tag <data:post.body/> che è quello che indica il contenuto dell'articolo.

Per mostrare il pulsante anche nella versione mobile del sito, si utilizza lo stesso codice, che però dovrà essere aggiunto sempre sopra alla riga <div class='post-footer'> che però stavolta dovrà essere cercata scorrendo verso il basso il codice della sezione <b:includable id='mobile-post' var='post'>.

COME NON STAMPARE LE UNITÀ PUBBLICITARIE

Se volete nascondere in fase di stampa i banner pubblicitari e altri elementi, dovete inserire il loro codice tra le due righe <div class='noprint'> e </div>. Le unità pubblicitarie continueranno a essere visibili come al solito ma non verranno mostrate nella Anteprima di stampa e quindi non saranno stampate.

Un discorso analogo si applica anche a tutti gli altri elementi che intendiamo nascondere in fase di stampa.

COME AGGIUNGERE UN LOGO NELLA STAMPA

Volete fare in modo che comunque rimanga stampato nella pagina, o salvato in PDF, un logo del vostro sito per mostrarne la paternità? Si può per esempio non nascondere l'header del sito che sarà stampato insieme a tutto il resto. Possiamo però far stampare anche un logo diverso dall'header, specialmente se non abbiamo una immagine come intestazione. Prima di procedere occorre avere pronta l'immagine del logo. Potrebbe essere anche un testo. Lo si può creare con un programma di grafica tipo Photoshop o Gimp andando su File -> Nuovo per poi aggiungere la scritta con lo Strumento Testo.

Tale logo dovrà poi essere caricato online, anche con Blogger creando una Bozza con il metodo linkato più sopra. Si seguono le istruzioni già viste in precedenza. Si passa quindi a caricare il logo nel Tema di Blogger.

Si va su Tema -> Modifica HTML, si cerca la riga </head> e, subito sopra si incolla questo codice:

dove 900px è la larghezza del logo che ovviamente può essere personalizzata. Si può trattare anche di una immagine semitrasparente per mostrare, oltre al logo, anche tutto quello che c'è sotto.

Adesso dobbiamo inserire il logo nel modello e quindi scegliere dove posizionarlo. Se lo vogliamo p.e. mettere al posto della Intestazione, cerchiamo il tag </header> e, subito sotto, incolliamo questo codice

L'URL colorato di rosso è il link diretto della immagine del logo. Per questa immagine è stata impostata la larghezza 0, quindi non sarà visibile nella pagina web, ma lo sarà invece nella pagina stampata o salvata come PDF per il codice precedente in cui abbiamo impostato una diversa larghezza in caso di stampa.

L'immagine del logo può essere inserita anche in un punto diverso, e essere allineata a sinistra o a destra, sostituendo il tag margin: 0 auto; con float:left; o float:right.

Pubblicato il 30/03/19 - aggiornato il | Nessun commento :