Blogger: Imprimer un message

(Photo credit: Wikipedia)

Bien sûr, on peut toujours imprimer un article avec la fonction d'impression du navigateur web.

Mais, dans ce cas, c'est toute la page qui s'imprime, avec l'en-tête, les couleurs du modèle et les widgets, ce qui peut être difficilement lisible et constitue un gaspillage d'encre et de papier.

Il est possible de modifier le modèle du blog de façon que seul l'article, avec images, formatage, imprimé en texte noir sur fond blanc s'imprime proprement.

C'est non seulement utile pour vous-même, en tant que créateur du blog, car cela vous permet d'imprimer vos articles, mais également pour vos lecteurs car cela leur permet d'imprimer un tutoriel, une recette de cuisine ou autre type d'article afin de pouvoir les suivre facilement chez eux.

Il est possible d'installer des gadgets de tiers, comme par exemple CleanPrint ou PrintFriendly. Mais vous pouvez également modifier le CSS: ça demande un peu plus d'attention mais vous ne devez plus faire appel à des gadgets de tiers.

Procédure:

Prenez toujours la précaution de sauvegarder votre modèle avant de modifier votre CSS, ça vous permet de le revenir en arrière en cas de problème! (Voir ici: Copie de sauvegarde de votre modèle)

1. Cliquez sur Modifier le code HTML

2. Cliquez sur "Modifier le modèle"
3. Cherchez la balise <b:skin><![CDATA et insérez le code suivant juste avant:

<!-- Imprimer seulement l'article DÉBUT -->
<style type='text/css'> 
@media print {
/* hide Blogger bar */
#navbar-iframe { 
 display: none; }
/* Reset colors to black text on white background and background images */
.header, .footer-outer, .post-outer { 
 background-color: white; background-image: none; 
 color: black; text-shadow: none; font-size: 14pt;}
/* Hide Pages, sidebars, embedded videos and iframes */
.tabs-outer { 
 display: none; }
.sidebar { 
 display: none; width: 0%; }
iframe, object { 
 display: none; }
.blog-pager, .quickedit, .post-feeds, .post-share-buttons, .comment-replybox-thread { 
 display: none; }
/* Reset post width to fill the entire page */
.main-inner, .columns {
   padding-left: 0px !important;
   padding-right: 0px !important;
   width: 100%; }
.content-outer { 
 margin: 0px; width: 100%; }
.content-inner { 
 padding: 0px; width: 100%; }
.post-outer { 
 border: none; width: 100%; }
/* Specific for my blog */
#header-wrapper, #header, .header, #footer-2-1, #footer-2-2, #footer-3, #sidebar-left, #sidebar-right { 
 display: none; }
#content-wrapper, #main-wrapper, #main { width: auto !important; overflow: visible !important; float: none !important; border: none; }
#main a { text-decoration: underline; color: blue; } 
}
</style>
<!-- Imprimer seulement l'article FIN --> 

• vérifier avec la prévisualisation d'impression
• tout ce qui précède display: none est exclu de l'impression
• il est possible que vous deviez ajouter des choses à exclure dans le fichier ci-dessus
• vous pouvez enlever des parties de pages entières (en-tête, bas de page, colonne...), il n'est pas nécessaires d'enlever un par un tous les widgets qui se trouvent dans cette partie de page
• changer la taille du texte: font-size: 14pt peut être modifié en % ou pt

Installer un bouton d'impression (optionnel):

Le code précédent modifie la mise en page pour toute impression, que ce soit en utilisant les boutons d'impression fournis par Blogger ou par le menu de votre navigateur (Fichier-Imprimer) ou par raccourci clavier (CTRL+P).

Si vous désirez cependant ajouter un bouton personnalisé, voici la procédure.

1. Cherchez la chaîne de caractères suivante:

<data:post.body/>

2. Insérez immédiatement après un des codes suivants:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'>Print this post</a>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<form> <input type="button" value="Imprimer" onClick="window.print()" /> </form>
</b:if>

3. Cliquez sur "Enregistrer le modèle"