31 marzo 2009

45 commenti Condividi il post Facebook Twitter Google+

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.




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

45 commenti

  1. Ciao jole, è possibile vedere il bottone di stampa solo nel singolo post e non nella home page?spero di essermi spiegato bene.. ciao e grazie.

    RispondiElimina
  2. @Michele: sì!
    Devi aggiungere questo codice:
    <b:if cond='data:blog.pageType == "item"'>
    pulsante di stampa
    </b:if>
    dove pulsante di stampa è il codice html che ho scritto nel post.

    RispondiElimina
  3. Grande lavoro!
    Complimenti davvero. Magari quando ho più tempo riprendo il tuo post nel mio blog.
    Ciao

    RispondiElimina
  4. Veramente complimenti Iole..del resto il genio è genio ;D

    RispondiElimina
  5. Iole sei un MITO! grazie mille per avermi aiutato nella mia richiesta... posso farti ancora due domande?
    anche io vorrei spostare il pulsante nel post e non nella home ma non ho capito dove inserire le righe che hai dato a michele.
    la seconda domanda è: si può fare in modo che spostando il mouse sul pulsante di stampa appaia la "manina"?
    GRAZIE MILLE ANCORA DI CUORE!!

    RispondiElimina
  6. @Francesca: l'ho fatto volentieri. Per le altre due modifiche contattami domani che ti spiego passo passo cosa fare.
    Metterò poi la spiegazione alla fine del post per chi fosse interessato!

    RispondiElimina
  7. trooooppo grande! quando finisci la dieta fammelo sapere che c'è una scatola di biscotti che ti arriva!
    francesca

    RispondiElimina
  8. Andiamo per ordine
    1 grazie sei un tesoro.
    2 sono tre settimane che gioco all'allegra infermiera con i miei figli
    3 appena smettono di ammalarsi (manca solo il cane)facciamo sto lavoretto
    4 ho visto i tuoi pinguini: adorabili, penso che li copierò.
    Ancora grazie e a presto.
    Ciao, Daniela

    RispondiElimina
  9. @Francesca: ti prego non tentarmi con i biscotti!
    @Daniela: i figli prima di tutto... poi pensiamo al template.

    RispondiElimina
  10. Cercavo da tempo questa soluzione, grazie! :)

    RispondiElimina
  11. @cielomiomarito: vedo che l'hai già messa nel tuo blog!

    RispondiElimina
  12. Iole, sono arrivata al tuo blog attraveerso vari passaggi, non mi ricordo nemmeno chi ti raccomandava (forse Tenebrae)e ora ti chiedo una spiegazione per un fatto misterioso. Mi è sparito dalla pagina del layout del mio blog lo spazio dove copiare i vari codici per aggiungere banner od altri "oggetti". Mi puoi aiutare? Io sono alle primissime armi. Grazie comunque.

    RispondiElimina
  13. @Flamminia: sì certo che ti aiuto. Se mi dai l'indirizzo del tuo blog provo a dare un'occhiata all'html per capire dove sta l'errore.

    RispondiElimina
  14. Ciao paziente amica mia .. stamattina ho fatto la modifica nel mio blog per stampare direttamente la ricetta ... Funziona tutto finoal punto in cui si apre la pagina per la stampa ... che non prende la ricetta ma viene bianca .. mi dai una mano a sistemare il problema?
    Grazie ...

    Giugiù

    RispondiElimina
  15. @Giugiu': devi sostituire
    <a class='printer' expr:onclick='"javascript:stampaRicetta(\"post-" + data:post.id + "\");"'>Stampa la ricetta</a>
    con
    <a class='printer' expr:onclick='"javascript:stampaPost(\"post-" + data:post.id + "\");"'>Stampa la ricetta</a>

    RispondiElimina
  16. Iole, a quest'ora di sabato sono al computer! Che segno è? Meglio lasciar perdere ... il mio blog (appena nato e già in rianimazione) é :
    flamminia-nellealpi.blogspot.com
    Verrò a vedere lunedì come va. Buon sabato notte

    RispondiElimina
  17. @Flamminia: ok a lunedì. Contattami dalla chat del blog.

    RispondiElimina
  18. Grazie ... ottimo!Ce l'ho fatta!
    :-)
    6 grande!
    Ma come faccio a far venire la manina sopra al link "stampa la ricetta" e non il brutto simboletto anonimo che viene ora?
    grazie, un bacio!

    Giugiù

    RispondiElimina
  19. @Giugiu': per la manina devi aggiungere nella classe a.printer del css cursor: pointer;, cioè:
    a.printer {
    cursor: pointer;
    background: url(http://img257.imageshack.us/img257/1238/printer.gif) no-repeat;
    padding-left: 20px;
    margin-right: 10px;
    }

    RispondiElimina
  20. @Francesca: ho modificato il codice javascript della funzione getPostContent per stampare solo la ricetta (questo codice è valido solo per il tuo blog):

    function getPostContent(id) {
    var content = '';
    var post = document.getElementById(id);
    var divs = post.getElementsByTagName('div');
    for(var i=0; i&lt;divs.length; i++) {
    if(divs[i].id == "ricetta-titolo") {
    content += divs[i].innerHTML + '&lt;br/&gt;';
    }
    if(divs[i].id == "ricetta") {
    content += divs[i].innerHTML;
    }
    }
    return content;
    }

    Fammi sapere se va bene!

    RispondiElimina
  21. Ciao!! Innanzitutto complimenti per il blog e per le dritte che fornisci! Ho provato ad inserire questa cosa dello stampa la ricetta ma quando andavo per salvare il modello mi diceva che era impossibile da salvare e che andava corretto con i tag ..insomma non ci ho capito nulla. La parte di codice css la prende e la salva senza problemi, la parte in javascript non me lo fa salvare...

    RispondiElimina
  22. @Elga: contattami la prossima settimana che ti aiuto a risolvere gli errori della parte javascript.

    RispondiElimina
  23. Iole, sei strepitosa. Una meraviglia. TI ADORO. Ho installato il tutto in modo che la versione stampabile sia visibile solo dal singolo post, come da modifiche che hai suggerito nei commenti. Funziona benissimo e per il mio blog questa caratteristica, come puoi immaginare, è di importanza fondamentale. GRAZIE DI CUORE.

    Volevo anche chiederti una cosa. Nel foglio stampato mi compare in alto la data di stampa e la scritta "Documento senza titolo". Tu credi che sarebbe in qualche modo tecnicamente possibile averci una scritta tipo il titolo del blog e il suo autore? E' giusto uno sfizio, non certo una caratteristica fondamentale.

    Ti ringrazio ancora di cuore. SEI UN MITO. Abbracci e buon tutto,

    Rita

    RispondiElimina
  24. Mille grazie..cercavo da tempo questa cosa..anche se ho già provato a seguire le tue indicazioni ma mi da errore per un tag di chiusura...proverò nuovamente...ti linko nel mio blog!!

    RispondiElimina
  25. @Elena: ok, riprova e fammi sapere. Se hai ancora problemi mandami il tuo template che do un'occhiata al codice per vedere cosa non va.

    RispondiElimina
  26. Ciaoooooooo Iole, ho provato a mettere questa funzione nel mio blog: dolceesalatoperilpalato.blogspot.com, ma quando metto stampa nell'anteprima non mi viene il titolo del post! Riesci ad aiutarmi"

    RispondiElimina
  27. Scusami Iole mi sono persa....nella funzione che ho inserito io...si stampa tutto, non solo la ricetta, se invece volessi stamapre solo la ricetta?Quale istruzioni devo seguire...stamattina son più addormentata del solito....uff. Grazie assaissimo

    RispondiElimina
  28. @EssenZadiCanneLla: come ho già detto nel post, lo script che ho realizzato è specifico per il blog di Francesca e per tutti quelli che hanno nei propri post della parti "nascoste". Con lo script è possibile stampare tutto il post oppure solo la ricetta (contenuta nella parte nascosta).
    Nel tuo blog invece, per come sono strutturati i post, puoi solo stampare l'intero post.

    RispondiElimina
  29. aaaa scusami ok....grazie di nuovo. Un bacio.

    RispondiElimina
  30. è una funzione che cercavo da tempo, ma...il problema è che mi perdo con tutte quelle righe e più che altro ho il terrore di sbagliare!!!!!!
    non si potrebbe avere un unico blocco intero già pronto dove basta che faccio un copia-incolla, annullando quello che c'è scritto prima?
    sarebbe più pratico no?
    io vorrei stampare solo il post.
    ciao

    RispondiElimina
  31. @luby: in tantissimi hanno utilizzato questo script (o le altre versioni) senza troppe difficoltà.
    Non ho capito cosa intendi dire "non si potrebbe avere un unico blocco intero già pronto dove basta che faccio un copia-incolla, annullando quello che c'è scritto prima".

    RispondiElimina
  32. per blocco intendo come quello che ho inserito direttamente nell'ultimo mio post sul germogliatore.
    appare la scritta stampa che cliccandoci sopra fà stampare tutto.
    il problema è che stampa appunto tutto tutto non il solo post.
    ,non ha un'icona carina.cercavo una soluzione così.
    scusa il disturbo ,ma ad usare il tuo metodo proprio non mi riesce!!!!

    RispondiElimina
  33. alleluia! finalmente dopo tutto questo tempo ci sono riuscita!
    grazie!
    ma che fatica...^_^

    RispondiElimina
  34. E' tutta la sera che ci provo ma devo essere davvero idiota a non riuscirci con una spiegazione così facile e dettagliata...

    Se ti mando l'html del mio blog mi dici solo dove sbaglio così cerco di stare più attenta?

    Riesco a visualizzare "stampa il post" ma non è un link cliccabile... :) Grazie

    RispondiElimina
  35. @Ska: se non hai ancora risolto il problema, mandami il template via email.

    RispondiElimina
  36. K@tia
    http;//pappaecicci.blogspot.com
    ciao iole, sto cercando da un pò di mettere la funzione stampa sul mio blog ma mi esce sempre questo errore:
    bX-3t7tzx mi puoi aiutare??? grazie mille in anticipo.

    RispondiElimina
  37. @K@tia: quando in Blogger compaiono errori del tipo bX-... basta aspettare un po' e riprovare più tardi.

    RispondiElimina
  38. ciao sono sempre K@tia di pappaecicci, scusa se continuo a disturbarti, ma hoprovato e riprovato in momenti diversi ma mi esce sempre lo stesso codice. help me, please!! grazie davvero tanto!!

    RispondiElimina
  39. @K@tia: mandami il tuo template via email che lo provo sul mio blog di prova appena ho un minuto libero.

    RispondiElimina
  40. Ciao Iole anche io vorrei poter stampare solo la ricetta ora invece mi si stampano tutti i commenti e la mia introduzione. Ma è possibile stampare solo la ricetta anche x chi non ha sezioni nascoste? O come faccio a suddividere le cose, grazie mille!

    RispondiElimina

Se volete sostenere il mio blog, visitate questi siti. Grazie!
Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy