realiser une mosaique de liens

obtenir ces boutons

Créer une mosaïque d'images

Créer une mosaïque de liens

Créer un tableau

Titre


On peut ajouter dans un gadget (soit dans une colonne latérale, soit en-haut ou en-bas du blog) une mosaïque des images enregistrées dans un album "PICASA" (qui est l'hébergeur des images de Blogger).

Dans ce cas, en cliquant sur l'image, on arrive dans l'album PICASA.

Méthode :

1) aller sur picasaweb.google.com et choisir un album.

2) Sélectionner "montage".

3) Choisir la présentation.

4) Suivre les instructions.

* * * * *
On peut aussi créer manuellement une mosaïque d'images qui sont des liens comme ci-dessus : dans la version HTML/JavaScript d'un message ou d'un gadget HTML/JavaScript.

Il suffit de créer un tableau :

1) placer le code de l'image (entourée par les balises <a>, contenant le lien, et </a>) entre les balises <td> et </td> ;

2) diminuer la résolution de l'image : dans l'exemple ci-dessus : /s200/ est devenu /s60/ ;

3) placer le titre et chaque LIGNE d'images entre les balise <tr> et </tr> ;

4) placer le tout entre les balises <table> et </table> ;

5) mettre le tableau entre des balises <div style=margin-left:130px;line-height:8px;"> et </div> pour le décaler vers la droite et réduire l'espace entre les lignes ;

6) mettre le titre entre des balises <span style=margin-left:10px;line-height:14px;"> et </span> pour le décaler vers la droite et régler la hauteur de ligne.

Cela donnerait par exemple (pour deux images placées sur la même ligne) le code suivant :

<div style=margin-left:130px;line-height:8px;">

<table>

<tr><span style=margin-left:10px;line-height:14px;">Titre</span></tr>

<tr>

<td><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank"><img src="http://3.bp.blogspot.com/_sPwH_KmuNT8/SucKqRVQ4YI/AAAAAAAAAFc/9g9ZlpHR3f8/s60/z+ArcRail+1.JPG" style="width: 60px;" alt="" border="0" /></a></td>

<td><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank"><img src="http://3.bp.blogspot.com/_sPwH_KmuNT8/SucKqRVQ4YI/AAAAAAAAAFc/9g9ZlpHR3f8/s60/z+ArcRail+1.JPG" style="width: 60px;" alt="" border="0" /></a></td>

</tr>

</table>

</div>

IMPORTANT : DANS UN MESSAGE, le code doit figurer SANS AUCUN ESPACE ni SAUT DE LIGNE entre les instructions.

* * * * *
On peut aussi créer une mosaïque de vignettes qu'on peut agrandir en cliquant dessus. Il suffit de mettre dans le tableau tout le code obtenu en sauvegardant une image, l'image agrandie étant appelée par la balise <a ........>.

* * * * *
Pour créer une mosaïque d'images qui ne sont pas des liens, il suffit de supprimer les balises <a ........> et </a>.

* * * * *
On peut ajouter dans un gadget (soit dans une colonne latérale, soit en-haut ou en-bas du blog) une mosaïque des images enregistrées dans un album "PICASA" (qui est l'hébergeur des images de Blogger).

Dans ce cas, en cliquant sur l'image, on arrive dans l'album PICASA.

Méthode :

1) aller sur picasaweb.google.com et choisir un album.

2) L'album doit être rendu public (accessible à tous).

3) Afficher l'album.

4) Avec le bouton droit de la souris, copier l'adresse du lien "RSS".

5) Dans cette adresse, identifier le nom de l'utilisateur : après : /user/
et de l'album : après : /albumid/

6) Depuis le tableau de bord de Blogger, cliquer sur "Mise en page" puis sur "Ajouter un gadget".

Sélectionner : "Ajouter votre propre (gadget)".

Coller l'adresse suivante :

http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/picasa-album-photostream.xml

Compléter les paramètres dont le nom de l'utilisateur et de l'album : voir ci-dessus.

Enregistrer.

7) Modifier éventuellement l'emplacement du gadget et enregistrer à nouveau.

* * * * *
On peut aussi créer un tableau avec des liens identifiés par des mots au lieu d'images.

On peut enfin créer un tableau avec des mots qui ne sont pas des liens.

Un cadre a été ajouté dans l'exemple ci-dessous et le code qui figure juste après. Ce code permet d'ÉVITER DE MODIFIER LE "MODÈLE" - "TEMPLATE" DU BLOG. "border-collapse: collapse;" supprime les espaces entre les cellules du tableau. Dans le code définitif, toutes les instructions doivent être contiguës pour éviter des sauts de ligne et des lignes blanches.

titre 1titre 2titre 3titre 4
Donnée 1.1Donnée 2.1.Donnée 3.1Donnée 4.1
Donnée 1.2Donnée 2.2Donnée 3.2Donnée 4.2
Donnée 1.3Donnée 2.3Donnée 3.3Donnée 4.3
<style type="text/css">.tableautable {border-collapse: collapse;}.tableauth{border: 1px solid black;padding:5px;}
</style><div style=margin-left:80px;>
<table class="tableautable">
<tr>
<th class="tableauth">titre 1</th>
<th class="tableauth">titre 2</th>
<th class="tableauth">titre 3</th>
<th class="tableauth">titre 4</th>
</tr>
<tr>
<th class="tableauth">Donnée 1.1</th>
<th class="tableauth">Donnée 2.1</th>
<th class="tableauth">Donnée 3.1</th>
<th class="tableauth">Donnée 4.1</th>
</tr>
<tr>
<th class="tableauth">Donnée 1.2</th>
<th class="tableauth">Donnée 2.2</th>
<th class="tableauth">Donnée 3.2</th>
<th class="tableauth">Donnée 4.2</th>
</tr>
<tr>
<th class="tableauth">Donnée 1.3</th>
<th class="tableauth">Donnée 2.3</th>
<th class="tableauth">Donnée 3.3</th>
<th class="tableauth">Donnée 4.3</th>
</tr>
</table></div>
Template images by konradlew. Powered by Blogger.

5 commentaires:

Anonyme a dit…

merci, cela m'a bien aidé.
http://valios.blogspot.com (article sur Courseulles sur mer)

Anonyme a dit…

Bonjour,

est-ce que l'on peut créer une mosaïque de vignettes qui lorsqu’on clique sur chaque vignette, l'image s’agrandit dans une nouvelle fenêtre mais sans ouvrir picasa web ?

Merci

Meiser a dit…

Bonjour.

On peut toujours afficher une image dans un gadget avec les balises <a ... &glt; et </a&glt;

Dans la première balise, on place comme cible (quand on clique) le code de l'image agrandie. Entre les 2 balises, le code de l'image en miniature.

http://modifier-les-modeles-de-blogger.blogspot.be/2010/01/inserer-une-image-dans-un-message.html


le petit monde d'Azelys a dit…

Merci j'ai enfin pu mettre plusieurs images sur une même ligne avec des liens differents. Merciiii!

Alcapone a dit…

Merci beaucoup pour ce tuto : efficace et très utile. Je n’ai pas encore la page ni lié les images. Mais je vous dis si ça marche. Merci encore !