Come aggiungere un logo nella stampa del post in Blogger.

Come aggiungere in automatico un logo o un copyright o un testo alle pagine del blog su Blogger che vengono stampate o salvate in PDF.

La maggior parte degli articoli che pubblico su tutorial e personalizzazioni dei siti su piattaforma Blogger mi vengono ispirati dai lettori. Personalmente ho poche esigenze riguardo alla grafica del mio sito mentre ciascun lettore ha le sue preferenze e i suoi desideri che sono anche funzione della tipologia del blog e dei suoi fruitori.

Ieri è stato pubblicato un post sulla Pagina Facebook di questo sito in cui mi si chiedeva se fosse possibile inserire un logo nella stampa del post e che fosse invece non visibile nella pagina web aperta dal browser. Una personalizzazione di questo genere potrebbe interessare chi volesse aggiungere una immagine di copyright o un logo identificativo nei post stampati o salvati come PDF. Sul momento ho risposto che si poteva stampare tutto quello che era visibile nella pagina web e non quello che fosse invisibile.

Avevo infatti già illustrato come aggiungere un pulsante per stampare il post su Blogger e chi volesse continuare la lettura di questo articolo è bene che lo legga perché farò riferimento a quello. Il sistema usato nell'articolo linkato è stato quello di nascondere tutti gli elementi che non volevamo venissero stampati come l'Intestazione, le Sidebar, la Navbar, ecc.

Il codice può essere modificato a piacere per lasciare o eliminare elementi che possono interessare o meno come i commenti. Viene utilizzato il tag display:none; per nascondere quello che non si vuole stampare. Non c'è però un tag per mostrare quello che non c'è nella pagina web.

La soluzione spesso non è altro che l'uovo di Colombo. Ecco il risultato del test che ho fatto

Nella pagina web c'è una intestazione senza immagine mentre nella pagina stampata ho aggiunto come logo l'intestazione di questo blog. Il metodo che ho usato è quello di imporre larghezza zero alla immagine del logo nella pagina web mentre di imporre una larghezza visibile in quella della pagina di stampa. In questo modo non si nasconde l'immagine in senso stretto ma questa sarà comunque invisibile perché di larghezza zero. Il logo l'ho aggiunto al posto dell'Header ma si può inserire in qualsiasi posizione de layout.

COME MOSTRARE IL LOGO NELLA STAMPA

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.

L'immagine così creata deve essere pubblicata su Google Foto e se ne deve ricavare l'URL diretto con uno dei 4 metodi. Dopo aver inserito il bottone per stampare il post posizionato nella sidebar o alla fine dell'articolo si deve modificare il modello. Prima di procedere bisogna aver salvato il template quindi si va su Modello -> Modifica HTML, si cerca la riga </head> e, subito sopra, si incolla questo codice

<style media='print' type='text/css'>
#onlyprint img {width:900px !important; margin:0 auto;}
</style>

dove 900 è il numero di pixel della immagine del logo da stampare mentre il tag colorato di blu serve per centrare il logo.  Adesso dobbiamo inserire il logo nel modello. Se lo vogliamo mettere al posto della Intestazione cerchiamo il tag </header> e, subito sotto, incolliamo questo codice

<div id='onlyprint'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-d1M5ErFX4WuuHNcWaLbIfiSOn0f90GXiiYgx1jT9BdKMPu67_C-YOtdBSe0dN6UEYLQrdMdRFUTt-L3HcV53uRdoY9AmYkIPVBc96j34hcajTSiAI4AFydcVNEn0lY93809CyyqHFivl/s1600/Header-ipcei.png' width='0'/></div>

Al posto dell'URL colorato di rosso che è il logo di questo sito incollate l'URL diretto o hotlink del vostro logo. Come vedete 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.

Demo
Clicca qui

Concludo ricordando che l'immagine del logo può essere inserita anche in un punto diverso e essere allineata a sinistra o a destra sostituendo il tag margin con float:left; o float:right.