Aggiungere un link per stampare il post su Blogger!

Molto richiesta nel sondaggio, e in generale molto richiesta via mail, è sempre stata la possibilità di poter aggiungere un link per stampare direttamente il post dal blog. Modifica molto desiderata soprattutto dagli autori dei blog di cucina, tra i quali, ho scoperto recentemente, c’è un vero e proprio scambio continuo di guide culinarie in pdf (e in questo potrebbero tornare utili le guide su come creare documenti in pdf e alcuni servizi gratuiti per pubblicarli in rete).

Ho studiato vari modi in passato per farlo, molti su Blogger utilizzano PDF Online che permette un’integrazione gratuita (ma limitata), tuttavia nel blog di Iole ho trovato una soluzione molto elegante e che non richiede l’uso di strumenti esterni.

Riporto qui l’intervento, con qualche piccola personalizzazione.

Passo 1

Da Layout->Modifica HTML, selezioniate “Espandi i modelli widget” e cerchiate la seguente porzione di codice:

<div class='post hentry'>

Questa riga è presente nel template Minima (il più diffuso e base di partenza per la maggior dei template personalizzati), ma in altri template potrebbe essere leggermente diversa. Se non si riesce a trovare esattamente la riga, basta cercare solo la parte iniziale:

<div class='post hentry

Una volta individuata, bisogna inserire prima dell’ultimo carattere “>” questa porzione di codice:

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

Nell’esempio del template Minima, la riga diventerà quindi:

<div class='post hentry' expr:id='"hentry-" + data:post.id'>

Quella in rosso è la parte da aggiungere.

Passo 2

Cercate questa porzione di codice:

<div class='post-footer'>

E subito sopra incollate questa porzione di codice:

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

Se volete che il link per la stampa appaia solamente nella pagina del singolo post (utile per esempio se utilizzate la visualizzazione sintetica dei post) utilizzate invece questo codice (rispetto al primo ho aggiunto le due righe in rosso):

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class='printer' expr:onclick='"javascript:stampaPostCompleto(\"hentry-" + data:post.id + "\", \"Link: " + data:post.url + "\");"'>Stampa il post</a>
</b:if>

Passo 3

Cercate questa riga nel template:

]]></b:skin>

E subito sopra incollate:

a.printer {
cursor: pointer;
background: url(http://tinyurl.com/lfk9jd) no-repeat;
padding-left: 20px;
margin-right: 10px;
}

Passo 4 (aggiornato)

Cercate questa riga di codice:

</head>

E subito sopra inserite questo codice:

<script> 
    function stampaPostCompleto(divId,link) { 
    var postContent = document.getElementById(divId).innerHTML; 
    stampa(link+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('<a href="#" onclick="window.print();"><img src="http://tinyurl.com/lfk9jd" alt="" border="0" /></a> <a href="#" onclick="window.print();">Stampa il post</a> <br /> <br />' + html); 
    printWindow.document.close(); 
    } 
    </script>

Passo 5

Salvate il template e visualizzate il blog. Sotto ogni post adesso vi apparirà il link per stamparlo:

Cliccandolo, si aprirà una pagina con la versione stampabile del post:

E basterà cliccarci sopra per far partire la finestra della stampante:

Questo comportamento può essere modificato, ad esempio aprendo direttamente la finestra della stampante senza passare dall’anteprima. Possiamo discuterne assieme.

Passo 6

Lasciate un ringraziamento nel blog di Iole, visto che ne è lei l’autrice!

Ho testato la modifica su Chrome, Firefox 3.4 e Internet Explorer 8, senza problemi. Vorrei sapere da voi se trovereste utile trovare anche qui la possibilità di stampare il post, così magari l’aggiungo anch’io.

Se ti è piaciuto l'articolo, iscriviti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog! Per maggiori informazioni sui feed, clicca qui!