Blog d'aide, trucs et astuces

Publicité

Imprimer article (basic)

Bonjour,

Vous désirez proposer à vos lecteurs une fonction "imprimer l'article"

​Cette fonction existait sur Over-Blog V2, 

mais est actuellement absente de la version Kiwi.

 

Je vais vous donner un petit truc "bête",

simple à mettre en place, sans obligatoirement passer par le CSS,

mais avec un petit défaut.

Ce petit truc tout bête, c'est un simple code "self print" en "javascript".
Ne fuyez pas, il n'y a rien à encoder.

 

Le petit problème, si vous proposez plus d'un article par page de blog et

que votre lecteur n'est pas sur la page de l'article,

il va imprimer toutes les articles de la page affichée.

Le code est le suivant :

<a href="javascript:self.print()"> Imprimer l'article</a>

Pour l'installer,
Vous écrivez votre article comme à votre habitude.
Une fois que tout est en ordre, si ce n'est déjà fait cliquez sur

"Convertir en section HTML"
Ensuite sur "Basculer vers le mode HTML" et tout en bas de tout ce qu'il y a vous collez le code.


Prévisualisez et si ça vous convient "Publier" ;)

Maintenant, si vous désirez aller un peu plus loin, pas trop,

juste pour rendre votre lien "plus beau"

Vous pouvez ajouter dans votre CSS :

 

a.print {
color: #CC3333 !important;
text-decoration: underline;
background: url(http://img.over-blog-kiwi.com/0/54/39/59/201304/ob_ec6dd3a71d8b16d362cc8be480090c86_print1.GIF) left center no-repeat;
padding-left: 20px;
}
a:hover.print {
text-decoration: none;
}

Dans le code, c'est la première des trois imprimantes,

libre à vous de choisir une des deux autres icones (toutes libres de droit)

 

Icone imprimante 01 Icone imprimante 02 Icone imprimante 03

 

Dès lors le code à placer dans l'article fera appel à ce petit bout de css ,

il se présente sous cette forme :

<a class="print" href="javascript:self.print()">Imprimer l'article</a>

C'est ce dernier que j'utilise

 

Dans le futur je tâcherai de vous présenter une fonction imprimer avec feuille de style "print.css"

 

Cliquez pour tester (après avoir cliqué sur le titre de l'article) :

Imprimer l'article

Publicité
Retour à l'accueil
Partager cet article
Repost0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
U
Hey could you please elaborate on what this is actually about &quot; Dès lors le code à placer dans l'article fera appel à ce petit bout de css , il se présente sous cette forme : Imprimer l'article C'est ce dernier que j'utilise&quot; Most of these are hard to digest.
Répondre