27 ottobre 2009

39 commenti Condividi il post Facebook Twitter Google+

Come stampare i post di Blogger: funzione per stampare solo alcuni post o porzioni di post

Qualche giorno fa ho ricevuto un'email da Renato e Giuliana del blog cliccandoci.blogspot.com con una richiesta a proposito della stampa dei post. Nel loro blog, alcuni post sono delle ricette e vorrebbero dare la possibilità ai propri lettori di stamparle facilmente, magari selezionando solo la parte della ricetta e tralasciare l'introduzione.

Già tempo fa ho pubblicato due post con le istruzioni per consentire ai propri lettori la stampa:


Utilizzando sia l'uno che l'altro metodo, andando ad agire sul template, ogni post avrà alla fine l'icona e il link per la stampa. In questo modo tutti i post del blog potranno essere stampati. In effetti mi capita spesso di vedere nei blog di cucina che seguo, il link Stampa la ricetta in post che ricette non sono.
Per rispondere alla richiesta di Renato e Giuliana, ho deciso di rivedere quelle funzioni e scrivere questo post con tutte le istruzioni per poter stampare solo un singolo post o un porzione di esso.

Nel css del template, cioè subito prima della riga ]]></b:skin>, incollate questo codice:

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 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://www.iolecal.it/blog/posts/post074/printer.gif"/&gt;&lt;div&gt;' + html);
printWindow.document.close();
}
</script>

e salvate il modello.

Per ogni post che volete far stampare, dovrete modificarne manualmente l'html cliccando sul tab Modifica Html dell'editor di Blogger.

Come vi dicevo prima, potete scegliere se stampare l'intero post o una porzione di esso. Qualunque sia la parte del post che volete stampare, dovrete trovare il codice html corrispondente e aggiungere subito prima <div id="id_del_post"> e subito dopo </div>.

Poi alla fine del post, aggiungete il codice per far apparire il link per la stampa:

<a class='printer' onclick='stampaPost("id_del_post");'>Stampa la ricetta</a>

dove id_del_post deve essere sempre diverso per ogni post (potete mettere il titolo, una sigla, il numero del post, ...), mentre la scritta Stampa la ricetta potete personalizzarla in base alle vostre esigenze.

Vi riporto di seguito l'esempio per stampare solo una porzione di questo post (le prime sei righe):


come potete vedere ho aggiunto <div id="post118"> e </div> al codice html delle prime sei righe del mio post.

Vi posso assicurare che è più facile a farsi che a dirsi.


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

39 commenti

  1. Grazie Iole, sono Giuliana. Adesso ho letto il tuo post velocemente, ma non appena riesco, vedrò di fare le modifiche al blog o farle fare a Renato! E...naturalmente in caso di necessità, chiederemo aiuto. Sei sempre molto disponibile. Ciao.

    RispondiElimina
  2. ciao Iole! Ho fatto quello che mi hai detto e ora i commenti sono OK! Sei bravissima come sempre: mi credi se ti dico che è tutta la serata di ieri e la mattina di oggi che ci provavo? Un bacio, ciao^^^

    RispondiElimina
  3. @Giuliana: per qualunque cosa, contattatemi pure!
    @Daniela: non è merito mio, ma di Firebug ;)

    RispondiElimina
  4. grande Iole, come sempre sei una fonte inesauribile di consigli, trucchi, istruzioni... devo provarci!! ti farò sapere

    ciao eli

    RispondiElimina
  5. Iole, sei eccezionale! Con i tuoi suggerimenti sono riuscito ad aggiungere il link per stampare il post. Appena possibile ne parlerò sul mio blog citando le tue preziose informazioni. Ciao, Martin

    RispondiElimina
  6. @AbcHobby.it: buon lavoro allora! Poi fammi sapere.
    @Martin: hai subito messo in pratica i miei consigli, ma hai commesso un piccolo errorino...
    hai scritto <a class="printer" href="" quindi ogni qualvolta clicco sul link di stampa ricarica la homepage del blog; basta togliere href="" e tutto funziona alla perfezione ;)

    RispondiElimina
  7. Ehi Iole, chiunque tu sia sei fantastica. Il tuo blog è una delizia. Grazie!!! di esserti collegata anche tu al mio!
    ♥♥♥♥♥♥♥♥♥♥

    RispondiElimina
  8. Cara Iole, quelle aggiunte non le ho fatte io, ma le ho ritrovate automaticamente alla riaccensione del computer. Allora ho riscritto il codice finale, ma stavolta nella maggior parte dei post cliccando per la stampa o non si trova la pagina oppure appaiono solo le prime righe. Cosa mi consigli?

    RispondiElimina
  9. @Michiamomari, e: grazie per i complimenti!
    @Martin: ho riprovato a cliccare sul link della stampa del tuo ultimo post, nel popup della per la stampa compare correttamente tutto il contenuto del post ma continua a ricaricare l'homepage del blog. Se hai intenzione di mettere il link per la stampa del post completo a tutti i post vecchi, allora avrai tanto lavoro da fare, forse è meglio utilizzare uno dei due metodi precedenti modificando il template.

    RispondiElimina
  10. Ciao Joletta, come va? Oggi provo subito ad aggiornare :-D
    Ma secondo te esiste un modo per cambiare il carattere di blogger inserendo tra gli otto predefiniti anche il Comic Sans SM o altri (cioà senza dover andare ogni volta a sostituire "comic sans sm" ad esempio a "georgia" in html ?)
    Un bacione !

    RispondiElimina
  11. @Jajo: per prima cosa sbagli a scrivere il nome della font-family. E' font-family:comic sans ms; e non SM come scrivi tu :)
    Se vuoi che tutti i tuoi post abbiamo il carattere Comic basta aggiungere
    font-family:comic sans ms; subito dopo .post-body {
    Prova e fammi sapere!
    Prima però dovrai eliminare dai post il codice errato font-family:comic sans sm;

    RispondiElimina
  12. E hai ragione, come sempre !!! :-D

    RispondiElimina
  13. Aiutino...
    Ciao, ho aggiunto la funzione "stampa" nel mio blog: http://dolceesalatoperilpalato.blogspot.com/ e mi sono arenata, nel senso che adesso si può stampare, ma tutto il post e senza titolo, ma come faccio a far stampare soltanto la ricetta e magari il titolo, basta che modifico, ovvero aggiungo quanto hai scritto nel post html?
    Giuliana di http://cliccandoci.blogspot.com e http://dolceesalatoperilpalato.blogspot.com/
    Aspetto un tuo aiutinooooooooooo che per me è un aiutoneeeeeeeeeee!
    Grazie.
    Ciao.

    RispondiElimina
  14. @Giuliana: per stampare anche il titolo devi utilizzare lo script per stampare anche il link e il titolo del post; però avrai il post completo in stampa e non solo una porzione.

    RispondiElimina
  15. Grazie Iole, sono arrivata a questa funzione attraverso Orazio...creareblog e lui mi ha mandata da te....grazie grazie. Adesso vado all'altra funzione per non stamapare tutto. Un bacione.

    RispondiElimina
  16. Ciao Iole,

    grazie per i tuoi preziosi consigli.
    credevo di avercela fatta, mi compare l'icona ma non mi stampa nulla tranne il titolo del post...dove posso aver sbagliato?

    http://raccontidimarche.blogspot.com
    Grazie

    RispondiElimina
  17. @Narratore: ho controllato nel tuo blog e la funzione di stampa visualizza nel popup solo l'id del div. L'errore che hai commesso è il seguente: hai messo la funzione javascript sbagliata sull'onclick del link Stampa.
    Mi spiego meglio: devi sostituire
    onclick='javascript:stampa
    con
    onclick='javascript:stampaPost
    Prova e fammi sapere!

    RispondiElimina
  18. Carissima Iole
    grazie per tutti gli aiuti però ho tentato d'inserire parecchie volte l'insieme die codici ma sembra mi veniva la risposta...non possibile salvare per mancanza tag chiusura (più o meno questo).
    Ho il mio bol però ne ho aperto un altro per fare delle prove anzi è il secondo per prove il primo è talmente incasinato .... Questoinvece ho salvato il template d'origine..

    In cosa potrei avere sbagliato????
    Qual'è il segno che indica la fine in html???
    Io non ci capisco niente.
    Edvige

    RispondiElimina
  19. Ciao sono Giada del blog raganellasanvigilio.blogspot.com.
    Sono alle prime armi, è solo una settimana che mi diletto con il blog. Intanto complimenti perchè il tuo sito permettere di aiutare tante persone che non sanno niente di computer come me. Volevo chiederti se potevi aiutarmi. Io ho fatto tutti i passaggi per stampare il blog ma non mi appare l'icona, solo la scritta. Come mai?

    RispondiElimina
  20. @edvige: come ho ripetuto più volte, i template non sono tutti uguali quindi non so dirti dove sbagli. Comunque seguendo passo passo le istruzioni del post non dovresti avere problemi.
    @Giada: scusa se ti rispondo con così grande ritardo. Ho visto che sei riuscita ad aggiungere la funzione di stampa nel tuo blog senza il mio aiuto: brava, hai fatto un ottimo lavoro.

    RispondiElimina
  21. Ciao Iole, grazie per il complimento e non ti preoccupare per il ritardo sono sempre in debito con te visti i tuoi preziosi insegnamenti... volevo ringraziarti per essere la prima sostenitrice del mio blog, cominciavo a deprimermi. Una piccola domanda come faccio a cambiare la scritta di stampa questo post in "stampa il regolamento" solo in un post e non in tutti? Grazie ancora e un abbraccio. Giada

    RispondiElimina
  22. Iole, io ti ringrazio tanto ma non mi sarei permessa di scriverti se non avessi provato più volte a seguire tutte le tue istruzioni. Per non sbagliare nella ricerca della stringa giusta uso Ctrl+F e mi sono anche scarita NotePad++ ma il risultato è sempre lo stesso...manca qualcosa con la chiusura.
    Si ho letto che non tutti template sono uguali....vuol dire che il mio è tanto diverso da non accettare i codici.
    Pazienza.
    Grazie lo stesso del tempo usato per rispondermi.
    Ciaooo e buon lavoro.

    RispondiElimina
  23. @Giada: purtroppo non è possibile associare ad un solo post o ad alcuni post una scritta diversa; modificando il template tutti i post avranno la stessa scritta.

    RispondiElimina
  24. @edvige: non metto in dubbio la tua buona volontà... facciamo così mandami il template completo del tuo blog, lo modifico io, lo provo su un mio blog di prova e quando tutto funziona te lo mando via email.

    RispondiElimina
  25. grazie mille Iole! Mi serviva proprio sul mio blog!!! =)

    www.accordicanzoniperbambini.it

    RispondiElimina
  26. Ciao Iole, complimenti sei bravissima O_O sei riuscita a farmi capire come fare a me che sono un'asina! Non sapevo neppure cos'è l'html e avevo una gran paura di modificare!!!! Però ci sono riuscita!!! Hai spiegato tutto benissimo, hai ragione è stato più facile a farsi che a dirsi!

    Avrei solo una domandina da farti... se io volessi stampare solo una porzione del post, ma ANCHE il link del mio blog, come dovrei fare?
    Perchè mi pare di aver capito (correggimi se sbaglio) che o si stampa tutto (compreso link del blog e titolo) oppure solo una porzione, ma senza link e titolo. Il mio è un blog di ricette (mooolto in costruzione, per ora) e avrei il piacere che i miei lettori potessero stampare solo la ricetta (senza gli bla bla bla iniziali) però vorrei che nel documento stampato gli rimanesse almeno il link del mio blog (sai, per la gloria! XD) Spero mi risponderai! Grazie mille.
    Roberta!

    RispondiElimina
  27. @Innamoratincucina: per stampare una porzione del post e il link del tuo blog, ti ho modificato la funzione javascript.
    Provala e dimmi se va bene!

    <script>
    function stampaPost(divId) {
    var link = location.href;
    var postContent = document.getElementById(divId).innerHTML;
    stampa(link+&#39;&lt;hr&gt;&#39;+postContent);
    }
    function stampa(html) {
    var printWindow = window.open(&quot;&quot;,&quot;printPost&quot;,&quot;top=100,left=200,width=600,height=400,scrollbars=yes,status=no,menubar=no,toolbar=no,locations=no&quot;);
    printWindow.document.open();
    printWindow.document.write(&#39;&lt;div onclick=&quot;javascript:window.print();&quot;&gt;&lt;img src=&quot;http://lh4.ggpht.com/_fyUYhNUOXMw/Sg2XCP2OJaI/AAAAAAAAATo/vW0r9tXrpzU/printer.gif&quot;/&gt;&lt;div&gt;&#39; + html);
    printWindow.document.close();
    }
    </script>

    RispondiElimina
  28. Ciao Iole!
    sai che volevo mettere nel mio blog questa modifica in modo da non avere la scritta stampa ricetta quando non è una ricetta...ma non riesco a farla funzionare...non capisco cosa modificare dalle istruzioni iniziali che mi avevi dato... mi puoi aiutare?
    grazie mille comunque

    RispondiElimina
  29. @Francesca Pazienza: un modo molto semplice per risolvere il problema è quello di cambiare la frase "stampa ricetta" con "stampa il post".

    RispondiElimina
  30. Ciao Iole,
    Ho letto la tua mail e quindi adesso rimango in attesa del capolavoro che farai per la piattaforma cui appartengo ^^ Noi di wordpress siamo un pochetto sfortunati: non abbiamo tutte le belle funzioni che avete voi...Ma per fortuna ci sei tu che fai dei splendidi lavori!!

    RispondiElimina
  31. @Elisa: appena mi libero un po' vedrò cosa posso fare per tutte voi di GialloZafferano.
    Ti chiedo solo di avere un po' di pazienza, ho tante richieste in sospeso.

    RispondiElimina
  32. Ciao ho scoperto in questi giorni il tuo blog e devo farti i miei complimenti è bellissimo e molto utile io ho aperto da poco un blog di cucina ma sono un po' inesperta quindi mi trovo un po' in difficoltà se vuoi dargli un occhiata magari mi puoi dare qualche buon consiglio si chiama FATTI PRENDERE PER LA GOLA ho tanti piccoli problemi che spero di riuscire a risolvere grazie per la tua attenzione.

    RispondiElimina
  33. @melise: grazie mille per i complimenti!
    Passo subito a visitare il tuo blog!

    RispondiElimina
  34. Ciao iole non so' se sei riuscita a dare un occhiata al mio blog se l'hai fatto avrai visto che sono proprio all'inizio le cose principali che non riesco a fare sono il mettere la possibilità di stampare la ricetta di condividere o commentare, in più non vorrei avere i titoli delle ricette in alto sopra il titolo del blog e vorrei le varie indicazioni in italiano non in inglese. Queste sono le prime cose che non riesco a fare. Grazie per il tuo aiuto.

    RispondiElimina
  35. @melise: ho visto che il tuo blog è su GZ e non su Blogger. Non so se è possibile inserire la funzione di stampa. Per le altre cose che mi chiedi dovresti aggiungermi come amministratore.
    Non so come contattarti via email... quindi scrivimi tu a iolecal@gmail.com

    RispondiElimina
  36. Ciao Iole, ho provato a inserire il tuo codice nel mio blog la cui grafica è curata da me. Lo style è scritto nel template per cui quando vado a stampare perdo completamente la formattazione e non vorrei che acccadesse. Non vorrei nemmeno associare a ogni singolo post la formattazione perché se un giorno volessi cambiarla dovrei rifarla per ogni post. Mi sapresti dare una mano a risolvere il problema? Aspetto un tuo riscontro. Grazie mille!!! Elena

    RispondiElimina
  37. @Zonzo Lando: ti aiuto volentieri!
    Ti chiedo solo qualche giorno di tempo per realizzare per te uno script che ti permetta di stampare le tue ricette con la formattazione dei post senza dover impostare nulla nei post.

    RispondiElimina
  38. Troppo, troppo gentile!!! :-) Grazie mille intanto per aver risposto così velocemente e spero di poterti ringraziare presto anche per la soluzione al mio problema. Buona giornata! :-)

    RispondiElimina
  39. @Zonzo Lando: vi invio tramite email la mia soluzione al vostro problema.
    Per qualsiasi modifica sono qui a disposizione.

    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