Publier des photos sous blogger

Partie 2: la publication

Vous avez choisi votre hébergeur, votre photo est sur le net, et vous voulez maintenant la publier sur votre blog.

L'album de photobucket se présente comme ça:

Dans un premier temps je vais expliquer les codes au pied de la vignette et ensuite je vous conseillerai une procédure qui offre énormément plus de liberté d'affichage.


Direct link donne l'adresse de votre photo.

HTML Code: ajoute les balises HTML pour pouvoir publier la photo telle qu'elle, sur un blog
Vous pouvez copier ce code, cliquer sur "modifier le code HTLM" et le coller dans votre billet.
Je n'utilise cette procédure que lorsque je veux que la taille de la photo ne soit pas modifiée.

IMG Code: ajoute les balises IMG pour pouvoir publier la photo telle qu'elle, sur un forum.

Si vous utilisez Imageshack, il donne beaucoup de codes pour les forums. Il permet par exemple d'y afficher des vignettes. Pour l'instant, allez au bas de la page.

Procédure recommandée:

-copiez "direct link to image" : pointez le code avec la souris, cliquez à droite et choisissez "copier"
-Retournez sur votre blog et cliquez sur l'icône "ajoutez une image":


une fenêtre apparait:


Collez le code dans "ajouter une image provenant du web"( la case de droite)
L'avantage de cette procédure est qu'elle permet d'ajuster facilement la taille de votre image, vous allez comprendre:

Première étape très facile, vous choisissez "petit" "moyen" ou "grand" puis la position de la photo par rapport à votre texte.

Cliquez sur "envoyer une image" et votre photo apparait en haut de votre billet.

Glissez la photo à l'emplacement que vous souhaitez .
Si ça ne marche pas :
copier le code HTLM que vous trouvez dans l'onglet "modifier le code HTML".
Il commence par <a et fini par ></a> n'oubliez aucun crochet.
Ensuite, collez le au bon emplacement
Attention! restez toujours dans la fenêtre "modifier le code HTML"

Maintenant vous pouvez procéder à tous les ajustements que vous voulez en modifiant de code HTML.

Ouvrez l'onglet "modifier le code HTML"

Changer la taille d'affichage de la photo:

L'étape la plus difficile, retrouvez le code de la photo:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://votredirectlink.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px;" src="http://votredirectlink.jpg" alt="" border="0" /></a>

width est la largeur en pixels de la photo qui apparait sur l'écran.
Il suffit de modifier ce chiffre pour agrandir ou diminuer la taille de la photo.
La longueur reste proportionnelle, il n'y a rien à calculer.
Dans tous les cas blogger insère un code pour voir la photo à sa taille originale en cliquant dessus.

100 pixels de large

400 pixels de large

600 pixels de large

Pour ceux qui ont envie de dompter l'HTML: Modifier la place de la photo par rapport au texte

Dans le code:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://votredirectlink.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px;" src="http://votredirectlink.jpg" alt="" border="0" /></a>

text-align définit la place de la photo.

Remplacez
text-align: center par
float: left pour une photo à gauche

Plus difficile, pour avoir une photo à droite:
remplacez
text-align: center par float: right
et
margin: 0px auto 10px par margin: 0pt 0pt 10px 10px

PS: cette photo est un clin d'œil à celle du blog "made in caraïbe"