Quelques bidouilles html (simples) pour améliorer la présentation de ses articles...

Pour tous ceux et celles qui ne seraient pas entièrement satisfaits de leur éditeur html, quelques astuces simples pour corriger la présentation de leurs articles.

Je m'en sers systématiquement depuis que j'utilise le nouvel éditeur de Blogger, mais ces bidouilles peuvent être utiles à tous.

1. Si vous avez trop de sauts de ligne, il faut chercher dans l'onglet "Modifier le code HTML" s'il n'y a pas des <br /> en trop...
   Pour obtenir un saut de ligne, l'éditeur Blogger génère deux <br /> à la suite dans le code html (un seul  <br /> correspond à un retour à la ligne). De temps en temps, il en génère trop, provoquant ainsi des sauts de ligne trop importants. On ne les voit pas toujours dans l'onglet Rédiger, par contre ils apparaissent à la publication et dans l'Aperçu. Quelques fois il faut les chercher un peu car ils peuvent être séparés par des éléments tels que </a> ou </div>...
   
   De temps en temps, l'éditeur génère aussi des &nbsp; (espace insécable) qui peuvent également créer un saut de ligne après un <br /> alors qu'on ne voudrait qu'un retour à la ligne simple...
2. Si vous trouvez la police "Petit" de l'éditeur trop petite, il faut chercher dans le code html la fonction <span style="font-size: x-small;">texte</span> et remplacer x-small par 85% ou la valeur que vous trouverez correcte
   
   Les autres polices proposées correspondent dans le code html à xx-small pour "La plus petite", small pour la police normale, large pour "Grand", et x-large pour "La plus grande", à remplacer de la même manière par une autre valeur si celle-ci ne vous convient pas.
3. Pour éviter que vos images insérées en "grand format" ne débordent de la colonne centrale, il faut supprimer les marges générées par l'éditeur.

Rien à voir avec l'article, c'est juste pour montrer le décalage...
(cette photo était publiée dans cet article)

D'abord le résultat cherché :

L'image "rentre" dans la colonne et, au passage, j'ai supprimé le lien
(l'image n'est plus "cliquable")

Ensuite c'est un peu barbare mais c'est juste parce que les adresses des images générées par Blogger sont à rallonge.

La syntaxe de base est toute simple...
<a href="url du lien sur l'image"><img src="adresse de l'image"></a>

Code html qu'insère Blogger quand vous téléchargez une image...

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMJ1TduJhwaN_aRddJmMdfT4RCdgAUkVuioesj00tt7hONArWozJufZ0FOin9ynwlDAZYNaH8VlQ1pRUTZJ6QRG9hsqKNixqjUXUNHEuexBVEaJL-5x2KbRUkdBL11gL8OeuAzh1lD5jo/s1600-h/cornerview2009-09-30_white05.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMJ1TduJhwaN_aRddJmMdfT4RCdgAUkVuioesj00tt7hONArWozJufZ0FOin9ynwlDAZYNaH8VlQ1pRUTZJ6QRG9hsqKNixqjUXUNHEuexBVEaJL-5x2KbRUkdBL11gL8OeuAzh1lD5jo/s400/cornerview2009-09-30_white05.jpg" /></a><br /></div>

En bleu, la fonction pour insérer une image dans la page avec l'adresse de l'image redimensionnée (générée par Blogger)

En jaune, la fonction pour faire un lien sur une image avec l'url vers laquelle pointe l'image (par défaut l'image en taille réelle avec toujours le nom à rallonge généré par Blogger)

Les marges à corriger sont à l'intérieur de la fonction lien <a href=...> : il faut remplacer style="margin-left: 1em; margin-right: 1em;" par style="margin:0;"

L'astuce en plus...
Si vous voulez supprimer le lien sur l'image, il suffit de supprimer toute la partie de code en jaune (sans oublier le </a>)

Désolée pour cet article un peu (beaucoup) rébarbatif, j'espère que c'est un peu clair quand même.

Et c'est promis, bientôt je re-parle des lectures préférées de mes enfants ou je vous donne quelques sublimes recettes pour les pas douées comme moi...

Lire aussi :
Un nouvel éditeur de message dans Blogger
Lire la suite... (enfin dans Blogger) 
Trouver un texte dans une page web (ou un code html)

(tous mes tutoriels et mes bidouilles sont dans l'index "informatique")