Pubblicato il 27/11/16 - aggiornato il  | 10 commenti :

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

stampare-post-blogger

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

tag-condizionali

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

stampa-post

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


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

icona-stampare-post

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>


10 commenti :

  1. Ciao mitico Ernesto
    volendo aggiungere il tasto stampa alla fine di un post, sono ancora valide queste istruzioni?
    Grazie

    RispondiElimina
    Risposte
    1. Sì. È lo stesso codice che sto usando per il bottone PDF che puoi vedere sotto il titolo e alla fine del post
      @#

      Elimina
  2. Salve Ernesto, ho seguito le istruzioni del suo post ma arrivata alla ricerca della stringa div class=post-footer non la trovo...Come posso fare? Grazie.

    RispondiElimina
    Risposte
    1. C'è per forza. Ho controllato il codice dei tuoi due blog
      http://frammentidilibri.blogspot.it/
      http://lacuocagolosa.blogspot.it/
      e la stringa
      div class='post-footer'
      c'è in tutte e due subito sopra all'altra
      div class='post-footer-line post-footer-line-1'

      @#

      Elimina
    2. Sono finalmente riuscita a trovarlo! L'ultima riga che ha scritto nel suo post mi ha aiutato nella ricerca. Grazie e buona giornata.

      Elimina
    3. Salve Ernesto, ho provato più volte a inserire il tasto per farlo apparire in fondo al post, ma non si visualizza. Se invece metto l'altro codice utilizzando il gadget html il tasto stampa appare nella sidebar e funziona perfettamente. Io desideravo utilizzare quello che dovrebbe apparire alla fine del post, ma non riesco a metterlo. E' possibile che sbaglio qualche passaggio nonostante abbia seguito passo passo le istruzioni nel suo post? Grazie.

      Elimina
  3. Hai salvato il modello oppure ti sei limitato/a a guardare l'anteprima?
    Il bottone si vede solo nei post e dopo aver salvato il template.
    @#

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy