Come aggiungere un pulsante per stampare i post

Se nel nostro blog siamo abituati a scrivere post molto lunghi, e’ facile che i lettori, invece di leggere tutto sullo schermo, preferiscano stampare il nostro articolo per poterlo leggere con calma senza dover continuamente scorrere verticalmente la pagina con il mouse e affaticarsi nella lettura.

Inoltre se il nostro contenuto e’ di ottima fattura, puo’ essere che i lettori vogliano conservalo per non rischiare di non poterlo piu’ trovare.

Sebbene nella maggior parte dei browser esista la possibilita’ di stampare le pagine web attraverso menu o pulsanti, e’ sempre una buona cosa inserire un pulsante o link anche alla fine di ogni post per permettere ai lettori di procedure con la stampa con un solo click.

Ma passiamo direttamente alle spiegazioni pratiche senza perdere altro tempo: per aggiungere la funzione di stampa e’ necessario utilizzare un po’ di Javascript, ma non vi preoccupate, e’ solamente una riga di codice facilissima.

L’unico problema potrebbe sorgere se alcuni vostri lettori non avessero Javascript abilitato, loro dovranno stampare seguendo i “metodi tradizionali”.

Con Javascript possiamo aggiungere un pulsante attraverso il seguente codice:


Che mostrera’ il seguente bottone:

Ovviamente potrete cambiare sia il nome del pulsante modificando i valori del tag value, sia la forma utilizzando i CSS per personalizzarlo in base al vostro tema.

Se invece di un pulsante vorreste inserire solamente un link, utilizzate il seguente codice:

Stampa questo post

Che mostrera’ il seguente link

Stampa questo post

Anche qui potrete ovviamente personalizzare sia il titolo che la presentazione utilizzando I Css.

Attraverso questo comando verra’ stampata tutta la pagina visibile sullo schermo, comprendente anche la sidebar il footer e l’header che spesso non interessano al lettore. Nel prossimo post vi spieghero’ quindi come creare uno stile con i Css per far stampare solamente gli elementi utili al lettore.

Nell’attesa lasciate pure commenti e suggerimenti!

4 commenti

  1. Paolo ha detto:

    @lettori del post:

    ho alcuni problemi nella visualizzazione del codice da usare, risolverà il problema appena possibile.

  2. daniela ha detto:

    ciao! utilissimo questo post, proprio ciò che cercavo avendo necessità di inserire un codice di stampa in una pagina che si apre in pop-up! grazie mille x la segnalazione ^^
    ps.il codice son riuscita a copiarlo aprendo il codice html della pagina…

  3. Paolo ha detto:

    Ciao Daniela, sono contento di esserti stato utile! Purtroppo non sono ancora riuscito a sistemare questo post, ci deve essere qualche errore minuscolo nel codice che non riesco a trovare e crea il problema… C’è qualcuno la fuori che mi sa dire dove sbaglio?

Lascia un commento