Come inserire un bottone per stampare una pagina del blog.

Come aggiungere un bottone per stampare le pagine di un blog su Blogger.

Ricordo alcuni articoli che ho già pubblicato sull'argomento che riguarda la stampa delle pagine del sito:

          1)   Come stampare un articolo del blog -
          2) Inserire un link per stampare una pagina -

Con questo post voglio invece presentare qualcosa di molto più semplice e immediato e che può essere la scelta migliore per siti che non hanno pubblicità o oggetti grafici particolarmente sofisticati. Si tratta in sostanza di inserire un semplice pulsante andando su Design > Aggiungi un gadget > HTML/Javascript e incollando il seguente codice

<input type="button" style=" color:#003366; background-color: #FDBCB7; width: 12em; font-weight:bold; padding: .5em; border-radius: .7em;" value="Stampa questa pagina" onclick="window.print()" />

L'aspetto del bottone sarà questo

e potrà essere personalizzato in tutti i suoi parametri. Ricordo che le dimensioni in un CSS possono essere fissate in pixel (esempio 120px), in point o pt (usato da programmi come Word o Photoshop) o in EM come nel caso del precedente codice (esempio width: 12em; ). Nel caso della unità di misura EM si tratta di un dato relativo. Se nel nostro blog la dimensione normale dei caratteri è di 10px, scrivendo 1.5em equivale a una dimensione di 15 pixel. Questo sistema di misurazione delle dimensioni è molto utilizzato nei modelli perché basta fissare una sola dimensione generale e tutte le altre in relazione a questa. Se si cambieranno i pixel dei caratteri della dimensione principale, si modificheranno anche tutti gli altri in modo automatico.

Nel codice precedente la larghezza del bottone (width) è stata impostata a 12em cioè 12 volte la dimensione standard dei caratteri (144 pixel per un blog che ha font di 12px). Un discorso analogo vale per il padding .5em; vale a dire la metà della dimensione dei font. E' la distanza tra il testo e il bordo del bottone. E' stato anche inserito l'arrotondamento del pulsante mediante il tag border-radius: .7em; in cui la dimensione risponde alla stessa regola. Per il colore del testo del bottone e lo sfondo vi rimando al post sui codici dei colori. L'attributo value="Stampa questa pagina" determina quello che si vedrà realmente nel pulsante.

Il navigatore che ci cliccherà sopra, vedrà aprirsi una finestra di dialogo con cui selezionare la stampante reale o virtuale con cui procedere. Se volete fare una prova andate in questo

• Post di Demo del pulsante per stampare il post -

Può essere inserito in qualsiasi posizione del layout.