Bouton pour imprimer ou télécharger les articles du blog en PDF

By
Advertisement


En juillet 2007, nous avions vu qu’il était possible d’ajouter l’option “imprimer” pour les articles de votre blog afin de permettre à vos lecteurs de garder une copie papier de votre blog. Nous allons ici vous présenter le gadget de Print Friendly qui ajoute un bouton pour imprimer ou télécharger les articles du blog en PDF

Bouton pour imprimer ou télécharger les articles du blog en PDF


Grâce au bouton de Print Friendly, seuls les contenus de vos articles seront imprimés, pas les autres parties du blog. Vous pouvez voir un exemple de ce que ça va donner sur votre blog en faisant un test sur la page d'accueil de Print Friendly. Mettez l'url de votre blog là où il est écrit "enter a url" puis cliquez sur "print preview".

Pour Blogger au bout du doigt, ça donne cette belle page :

exemple article du blog à imprimer grâce à Print Friendly


Voici ce qu’il faut faire pour donner à vos lecteurs la possibilité d’imprimer ou de télécharger vos articles en PDF.

1. Aller sur cette page de Print Friendly

2. Pour l’étape 1 “Choose site type”, cocher sur la case pour “Blogger/blogspot”

3. Pour l’étape 2 “Choose button”, choisir le type de bouton à afficher sur le blog

4. Toujours à l’étape, pour “Features”, choisir les fonctions (Allow = Permettre, Not allow = Ne pas permettre, Enable = Activer, Disable = Désactiver)

Page header (Entête de la page)
Click-to-delete (Cliquer pour effacer)
Email
PDF
Print (Imprimer)
Custom css url (mettre l'url de code css à utiliser à la place de celui de Print Friendly)
HTTPS (Connexion sécurisée)

5. Pour l’étape 3 “Copy the code”, sélectionner et copier le code généré.

Voici en exemple le code généré après le choix du deuxième bouton de la deuxième colonne

<script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if('https:' == document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script><a href="http://www.printfriendly.com" style="color:#6D9F00;text-decoration:none;" class="printfriendly" onclick="window.print();return false;" title="Printer Friendly and PDF"><img style="border:none;margin:0 6px"  src="http://cdn.printfriendly.com/pf-print-icon.gif" width="16" height="15" alt="Print Friendly Version of this page" />Print <img style="border:none;margin:0 6px"  src="http://cdn.printfriendly.com/pf-pdf-icon.gif" width="12" height="12" alt="Get a PDF version of this webpage" />PDF</a>

On peut franciser le code de la manière suivante : 

a. Remplacer le “Print Friendly Version of this page” par “Imprimer cette page”

b. Remplacer “Print” par “Imprimer”

c. Remplacer “Get a PDF version of this webpage” par “Télécharger une version PDF de cet article”

6. Se connecter à Blogger, aller sur “Modèle” puis cliquer sur “Modifier le code HTML”. Là, cocher sur “Développer des modèles de gadget”

7. Trouver l’une des lignes de codes suivante : 

<data:post.body/> (Cette ligne est celle qui affiche le corps de votre article)

<div class='post-footer'> (Après cette ligne se trouvent les codes pour ce qui doit apparaître au bas de l’article)

8. Coller le code de Print Friendly juste après l’une des lignes de codes de l’étape 7.

9. Enregistrer le modèle. 

Avec ces manœuvres simples, vous aurez ajouté un bouton pour imprimer et télécharger les articles de votre blog au format PDF

@+


9 commentaires:

  1. Bonjour,

    Je lis souvent ton blog et je me sert de tes articles pour faire mon blog.
    Malheureusement, je ne trouve plus comment faire pour modifier le code html de mon blog.
    Lorsque je vais sur blogger puis "Modèle" et "Modifier le code HTML", je ne trouve plus la case à cocher "Developper les modèles de gadgets" et donc je ne sais plus comment faire pour ajouter les lignes de codes qui tu nous donnes.
    Merci de m'aider à comprendre ces changements dans blogger
    Michel

    RépondreSupprimer
    Réponses
    1. Ce commentaire a été supprimé par son auteur.

      Supprimer
    2. Slt les intouchables
      C'est dans "acceder aux widgets" il ont retirer l'ancien "Développer les modèles de gadgets" !!!
      Je me permet de vous mon site en partie améliorer grasse a Rodney
      http://logicieldepiratage.blogspot.fr/

      Supprimer
  2. Bonjour Rodney, très intéressant cet article, j'ai pu découvrir print friendly grâce à toi.
    Merci

    RépondreSupprimer
  3. Bonjour! je le trouve où le Custom css url? Merci d'avance!

    RépondreSupprimer
  4. Bonjour Rodney,

    J'ai essayé dans tout les sens mais ça ne marche pas chez vous, est ce dû au fait que je n'ai aucune des balises data post et post footer dans mon template? Je ne sais pas ;)
    Merci pour ton super blog !

    RépondreSupprimer
  5. Wow Merci Rodney!!! Super utile ton article! J'aurais besoin de toi pour quelque chose d'autre. Pour ma part, il faut que la personne clique sur mon article pour avoir l'opportunité de voir le bouton imprimer. Mais, serait-ce possible de l'avoir en tout temps en haut de chaque article? Ou du moins, l'avoir juste en bas du titre. (moi c'est des recettes de cuisine, ça aurait du sens..) Peux-tu m'aider?? www.popoteettalonshauts.blogspot.ca

    RépondreSupprimer
  6. Je suis vraiment fier de vous découvrir, votre blog est vraiment super ! J’aime bien son interface, et j’ai trop adoré le contenu aussi. Surtout continuez ainsi !

    RépondreSupprimer
  7. je suis un jeun apprenti et je voudrais votre aide pour mieux modifier mon interface du blog .merci à tout porte vous bien.

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT