• ACCUEIL
  • blogger

    Images et Photos : Astuces


    1-Comment mettre dans un article plusieurs photos bien positionnées ?

    Nota : voir d'autres possibilités et variantes dans l'article suivant "Optimiser la présentation" 

     Lorsque vous avez de nombreuses photos à publier dans votre article, il est utile de maîtriser la mise en page. Le plus simple consiste à créer un tableau correspondant à votre mise en page et d'y insérer vos photos.

    La difficulté consiste à concevoir le tableau et, ensuite, copier/coller le code en mode HTML.

    Exemple 1 : 2 photos côte à côte

    Dans l’onglet HTML insérez le code suivant pour mettre 2 photos sur la même ligne :

    <table><tbody> <tr><td>photo 1-1 </td><td>photo 1-2 </td></tr></tbody></table>

    Revenez à l’onglet “texte” et vous avez ceci :
     
    Il suffit à présent d'insérer vos photos dans les cases ou se situe le texte


    Exemple 2 : 2 colonnes de 3 lignes

     il suffit de copier le code suivant:
    <table><tbody> <tr><td>photo 1-1 </td><td>photo 1-2 </td></tr> <tr><td>photo 2-1 </td><td>photo 2-2 </td></tr> <tr><td>photo 3-1 </td><td>photo 3-2 </td></tr> </tbody></table>

     Comment  obtenir le code correspondant  à un tableau plus complexe ?  voir notre dossier consacré aux tableaux qui donne plusieurs pistes simples


    Résultat  pour l'exemple 2
    Nous avons inséré une photo entre "photo" et  "son chiffre"
    Le texte des cellules est volontairement resté, et dans la dernière cellule, il n'y a pas de photos.
    Il suffit à présent de supprimer le texte.
    A noter que les photos ont des tailles différentes.


    photo
    1-1
    photo
    1-2
    photo 2
    -1
    photo 2
    -2
    photo 3
    -1
    photo 3-2


    IDEM  4 photos (taille identique)avec tableau couleurs...




    2-Réaliser une Image défilante

    Insérer ce code en mode HTML et modifier ce qui est en fluo :

    <marquee align="center" height="140" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="8" scrolldelay="1"> <img border="0" src="adresse image" /><</marquee></script>

    Exemple : ici, il s'agit d'un gif animé (gif)





    3-Images en Rollover

    => passer la souris sur la photo...
    Insérer ce code en mode HTML et modifier ce qui est en fluo :
    image1 : image qui s'affiche
    image2: image qui s'affiche avec la souris

    image3 : image qui s'affiche après le passage de la souris

    <img src=" adresse image 1" onmouseover="this.src='adresse image 2'" onmouseout="this.src='adresse image1'">

    Exemple








    4-Image aux coins arrondis
    Pour arrondir les coins d'une image, aller sur le site : Roundpic.com
    puis télécharger (Download) l'image fournie

    Ensuite l'insérer dans le blog
    pour obtenir:


    5-Supprimer les bordures des images (et photos)

                                                               Image sans bordure 



                           Par défaut Blogger impose une bordure à toutes images du blog.






    Pour supprimer cette bordure, et pour toutes les images du blog obligatoirement, il faut modifier le code du modèle.

    Cette opération assez complexe nécessite des compétences et de la prudence...
    Des explications très claires sont fournies sur ce site

    Explications simplifiées
    1- Se rendre  dans l’administration du blog, ensuite : «Thème > cliquer sur la flèche, à coté de personnaliser > Modifier le code html 



    2- d'abord, faire une sauvegarde de votre blog,
    3-Vous voyez le code html et CSS
    4- faire une recherche avec Ctrl + F  sur votre clavier. Dans cette barre de recherche, taper  post-body img, et cliquer  sur la touche Entrée  du clavier. 
    5-Apparaît surligné en jaune  le résultat de la recherche.
    6- Sélectionner la partie du texte sélectionné et le  supprimer. 
    7-Enregistrer
    8- le résultat : plus de bordure.