Come stampare i post di Blogger

Qualche settimana fa Francesca mi ha contattata dal blog e mi ha chiesto se era possibile stampare ogni singolo post.

Nel suo blog infatti ogni post è una ricetta e vorrebbe dare la possibilità ai suoi lettori di stamparle.

Ed eccomi qui a spiegarle e spiegarvi come realizzare questa funzione.

Prima di iniziare a mettere mano al template fate il backup da
Layout -> Modifica HTML -> Scarica modello completo.

Poi cliccate su Espandi i modelli widget e trovate la riga con il codice

<div class='post-body' >

in alcuni template potrebbe essere

<div class='post-body entry-content' >

Prima del carattere > aggiungete questa stringa:

expr:id='"post-" + data:post.id'

Quindi alla fine sarà così:

<div class='post-body entry-content' expr:id='"post-" + data:post.id' >

Poi trovate questa parte di codice:

</div>
<div class='post-footer'>

e subito prima va inserito il codice html per la funzione di stampa.

Io ho realizzato due funzioni (specifiche per il blog di Francesca) che servono per stampare la singola ricetta o il singolo post... che non sono la stessa cosa visto che il suo template prevede delle sezioni "nascoste" che contengono le ricette. Vi basterà visitare il su blog per capire di cosa sto parlando.

Il codice html per stampare un post è:

<a class='printer' expr:onclick='"javascript:stampaPost(\"post-" + data:post.id + "\");"'>Stampa il post</a>

mentre per i template con sezioni nascoste, è possibile stampare solo il contenuto di tali sezioni inserendo questo codice:

<a class='printer' expr:onclick='"javascript:stampaRicetta(\"post-" + data:post.id + "\");"'>Stampa la ricetta</a>

Poi trovate la riga ]]></b:skin> e subito prima incollate questo codice css:

a.printer {
cursor: pointer;
background: url(http://www.iolecal.it/blog/posts/post074/printer.gif) no-repeat;
padding-left: 20px;
margin-right: 10px;
}

Poi trovate la riga </head> e subito prima incollate questo codice javascript:

<script>
function stampaRicetta(divId) {
var postContent = getPostContent(divId);
stampa(postContent);
}
function getPostContent(id) {
var content = '';
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for(var i=0; i&lt;spans.length; i++) {
if(spans[i].id == "fullpost") {
content += spans[i].innerHTML;
}
}
return content;
}
function stampaPost(divId) {
var postContent = document.getElementById(divId).innerHTML;
stampa(postContent);
}
function stampa(html) {
var printWindow = window.open("","printPost","top=100,left=200,width=600,height=400,scrollbars=yes,status=no,menubar=no,toolbar=no,locations=no");
printWindow.document.open();
printWindow.document.write('&lt;div onclick="javascript:window.print();"&gt;&lt;img src="http://lh4.ggpht.com/_fyUYhNUOXMw/Sg2XCP2OJaI/AAAAAAAAATo/vW0r9tXrpzU/printer.gif"/&gt;&lt;div&gt;' + html);
printWindow.document.close();
}
</script>

Salvate il modello e alla fine di ogni post vedrete i link "Stampa la ricetta" e/o "Stampa il post", come potete provare nel mio blog di prova in cui ho pubblicato un post copiando una ricetta di Francesca.

Cliccando sul link "Stampa la ricetta" o "Stampa il post" si apre una finestra popup con rispettivamente la ricetta (contenuta nella sezione nascosta) o il contenuto del post (tranne le parti nascoste). In quest'ultimo caso se prima di cliccare su "Stampa il post" si rende visibile la ricetta cliccando su "Read more..." allora nel popup sarà visualizzato il post per intero.

Dal popup basta poi cliccare sull'icona per stampare il post.

Lo script dovrebbe funzionare su tutti i template... se avete problemi contattatemi o lasciatemi un commento che vi aiuto volentieri.

E' possibile inoltre stampare la ricetta o il post senza aprire il popup; basta solo apportare delle modifiche al codice javascript. Chiunque fosse interessato può contattarmi.
Io personalmente preferisco questa soluzione poiché consente di vedere prima cosa si sta per stampare.

Post correlati:
Nuovo script per stampare anche il link e il titolo del post
Funzione per stampare solo alcuni post o porzioni di post

Newsletter by follow.it

Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.