Ajouter une image dans un blog

obtenir ces boutons

Ajouter une image dans un blog

Si une image est déjà enregistrée dans un message, effectuer un "Couper-Coller" de l'image ou du code HTML correspondant.

Si ce n'est pas le cas, procéder comme suit :

1) Choisir une image sur internet ou sauvegarder sur le disque dur une image au format approprié : formats d'images à utiliser

2) Si l'image choisie est déjà sur internet et que l'on peut utiliser l'adresse de cette image, aller directement au point 12.

3) Cliquer sur "Nouveau message" ou sur "Modifier les messages" et sur "Modifier" à côté du message sélectionné.

4) Cliquer sur la petite image (avant-dernière icône) au-dessus du message.

5) Choisir la position de l'image dans le message : à gauche, au centre ou à droite.

6) Choisir la dimension de l'image : petit, moyen ou grand.

7) Choisir son image (Parcourir).

8) Cliquer sur "Envoyer une image".

9) Quand c'est terminé, l'image se trouve en haut du message. Pour la placer au bon endroit, utiliser les commandes "Couper" et "Coller'.

10) On peut aussi toujours changer la position horizontale "à gauche, au centre ou à droite" en remplaçant une des trois mentions

float: left;
text-align:center;
float: right;

par une autre.

11) L'image est toujours enregistrée avec sa taille d'origine. Le choix "petit, moyen ou grand" ne concerne que la dimension de l'image dans le message.

On peut par la suite toujours agrandir ou diminuer la taille de l'image : page à consulter.

12) Le code de l'image se présente en 3 parties comme ceci :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_sPwH_KmuNT8/SucKqRVQ4YI/AAAAAAAAAFc/9g9ZlpHR3f8/s1600-h/z+ArcRail+1.JPG" target="_blank">
<img style="margin: 0pt 0pt 10px 10px; float: right; cursor: pointer; width: 200px; height: 136px;" src="http://3.bp.blogspot.com/_sPwH_KmuNT8/SucKqRVQ4YI/AAAAAAAAAFc/9g9ZlpHR3f8/s200/z+ArcRail+1.JPG" alt="" id="BLOGGER_PHOTO_ID_5397294399750201730" border="0" />
</a>

<a ... : ancre : contient ce qui est affiché quand on clique sur l'image (voir ci-dessous );

<img ... : contient l'image affichée dans le message ;

</a> : ferme l'ancre.

13) Quand on clique sur l'image, elle s'agrandit temporairement.

Il est ESSENTIEL qu'elle s'agrandisse dans une nouvelle fenêtre, afin que le visiteur qui a visionné cette photo, se retrouve sur le blog au lieu de le fermer en même temps que l'image.

Pour cela il faut ajouter target="_blank" à la fin de l'ancre (<a ....> : première partie du code de l'image) :

<a .... target="_blank">

14) Le lien (<a ...) vers un agrandissement de la photo, évoqué au point précédent, peut être remplacé par un lien vers n'importe quelle adresse URL (http://...). En cliquant sur l'image, on ouvrira la page internet correspondant à l'adresse URL. Créer un lien : page à consulter.

On peut effectuer ce changement dans la version HTML du message.

On peut aussi utiliser l'option "Rédiger" un message et :

- sélectionner l'image avec la souris;

- cliquer sur la petite image verte (lien) au-dessus du message;

- coller une adresse URL (http://....).

15) Depuis peu, l'agrandissement des images s'effectue par défaut dans un écran (avec un fond noir peu esthétique) qui propose un accès aux autres images du message. S'il y en a plusieurs, le chargement prend du temps.

Pour désactiver cette "Lightbox", cliquer ici.

Aucun commentaire: