Créer un Blog avec Blogger

Images et Photos : Astuces


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

 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 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)

Avez-vous remarqué que TOUTES les images de ce blog n'ont pas de 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