lundi 20 octobre 2014

Tutoriel Blogger: comment afficher des images côte-à-côte dans un article blogspot

Aligner les images dans Blogger.


Si comme moi vous ne COMPRENEZ pas pourquoi blogger ne VEUT PAS mettre vos images proprement côte à côte alors que la largeur de votre blog est suffisante pour les accueillir, ce tuto est pour vous!

En gros quand on insère des images à la suite dans un article Blogger, elles se mettent automatiquement les unes en dessous des autres. Mais voilà, vous n'avez pas envie que vos lecteurs aient trop à faire défiler le blog, vous aurez envie de les avoir ALIGNEES. 
Après avoir galéré longtemps, je me suis mis en tête de rechercher le parfait tuto, quelques-uns ne marchaient pas mais cet article de acraftingjourney (en anglais) m'a donné la réponse!

Sans plus attendre, voici mon pas-à-pas pour réaliser cet exploit!


1- Créer un nouvel article comme d'habitude

2- Passez en mode HTML, oui ce mode habituellement réservé aux geeks!
cliquez pour agrandir
3- Copiez-collez ce code:

note: table border="1" fera apparaitre des bordures

4-Faites "entrée" plusieurs fois pour laisser de l'espace après la fin de ce texte.

5- Insérez votre première image via l'outil habituel



6- Repérez bien la portion de code qui vient d'apparaitre. Sélectionnez cette portion, Coupez-la 
ajouter la 1e image et couper la portion de texte qui vient juste d'appaitre
7- Collez-la A LA PLACE des majuscules PREMIEREIMAGE dans le code
coller cette portion à la place du texte PREMIERE IMAGE dans le code
8- Refaites les étapes 5, 6, 7 pour intégrer la 2e image,
(pour + d'images rajouter des portions de code <td>-----</td> dans le code et refaites la même procédure).


C'est terminé! Finalisez l'article en mode normal et admirez le résultat!

en revenant en mode classique on constate déjà l'alignement des images
dernière astuce: dans votre portion de code image commençant par <a href> et se terminant par </a>, juste avant la fin, il y a un numéro en s### (exemple s200/fimofruits.jpg dans la capture d'écran 7). Ce numéro représente le redimensionnement de votre image. Vous pouvez donc ajuster la taille de votre image en augmentant ou réduisant ce numéro!

Cet article vous a été utile? Alors mettez un petit commentaire et ajoutez un lien vers votre article pour qu'on puisse admirer le résultat!

8 commentaires:

  1. Merci! Très bonne idée! Je n'ai pas tout compris mais je vais essayer de bidouiller!

    RépondreSupprimer
  2. Très jolie blog je t'ai mis +5 :)
    Moi aussi j'ai créé un blog de Nail Art ;) http://aurelienails.blog4ever.com/
    A bientôt

    RépondreSupprimer
  3. Sympa l'astuce, je vais sûrement m'en servir pour mon blog.

    RépondreSupprimer
  4. Merci pour ce tuto astucieux et bien expliqué, ma mise en page est plus clean maintenant. Au plaisir de continuer à te lire.

    RépondreSupprimer
  5. Très utile je vais essayer! Merci beaucoup pour votre aide :)

    RépondreSupprimer
  6. Merci beaucoup !!! J'avais déja trouvé un article qui expliquait comment mettre des images côte à côte mais il étais moins claire que le tien et je n'avais pas réussi ^^' donc encore merci :)

    RépondreSupprimer

Les commentaires sont les bienvenus! Si vous avez un blog je le visiterai volontiers :-)

Free Backlinks
perPage