Afficher des images plus grandes sur Blogger

Plusieurs lecteurs de ce blog m'ont déjà demandé comment faire pour afficher des images plus grandes dans leurs articles sur Blogger. Aujourd'hui, grâce à la génial méthode de Kranthi, ce désir va être assouvi.

Voici une image après un téléchargement normale sur Blogger.


Voici la même image après l'application de la méthode que nous allons voir (Notez que je n'ai pas appliqué la méthode pour ce blog, donc l'image risque d'être plus grande que mon bloc de messages) :



Etes-vous prêt à dormir moins bête aujourd'hui ? Alors, allons-y !

1.La première chose à faire, c'est de savoir la taille que vous voulez donner à vos image. Il faut que sa largeur soit un tout petit peu inférieure à celle de l'espace occupé par les messages (articles). Si par exemple, l'espace dédié aux article est de 410 pixles, il faudrait que vos images ne dépassent pas le 400 pixels.

Pour savoir l'espace alloué en largeur à vos article, connectez-vous sur votre compte Blogger, puis allez sur "Mise en page" et ensuite sur "Modifier le code HTML".

Trouvez dans votre code html la valeur de la largeur de votre bloc de message. Pour cela, voyez le code qui commence par :

#main {, soit par #main-wrapper{ soit encore par #main-wrap { (ou similaire) et voyez le nombre après le width contenue dans cet ensemble. Vous pourrez trouver par exemple :

#main-wrap1 {
width:485px;
float:left;

Si la largeur de votre colonne de message est de 485px, alors la largeur de vos photos ne devra pas dépasser 475px.

2. Trouvez le code suivant : (faites CTRL+F et mettez le bout de code dans la pop-up qui s'ouvre sur Internet Explorer ou sur la petite barre qui apparaît au coin gauche au bas de l'écran sur Mozilla Firefox)

]]></b:skin>

Ajoutez ces lignes avant le code ci-haut :


img {
max-width: 560px;
width: expression(this.width > 560 ? 560: true);
}


Changez les valeurs en rouge par le nombre réel un peu en dessous de celui de la largeur de votre bloc de messages.

Notez Bien: Vérifiez si vous n'avez pas déjà la balise img{ dans le code de votre modèle. Si tel est le cas, il faut juste ajouter le lignes suivantes juste après la balise ci-haut (en vert) :


max-width: 560px;
width: expression(this.width > 560 ? 560: true);

Enregistrez les modifications.

3. Maintenant, à chaque fois que vous écrirez un article, et que vous aurez normalement télécharger l'image dans votre article, cliquez sur "Modifier le code HTML" (juste à côté de "Rédiger" dans votre éditeur des messages. Vous trouverez le code l'image que vous avez ajoutée qui ressemble à quelque chose comme ceci :


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIiEMar7pQno9izCKABh8WhyloCTfCNqZHrJl8zhiZHJPinZWEqBiW-AEkI4LGsnUForiYIUrXXkAjq06EkjS5PvJ9B0lH-SMWuK87YyXSDxAmxTHmJ8G2rvynuvZ6Ja8ctG7CCWAPCzS/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 280px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIiEMar7pQno9izCKABh8WhyloCTfCNqZHrJl8zhiZHJPinZWEqBiW-AEkI4LGsnUForiYIUrXXkAjq06EkjS5PvJ9B0lH-SMWuK87YyXSDxAmxTHmJ8G2rvynuvZ6Ja8ctG7CCWAPCzS/s400/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>


Il voujs faudra enlever (effacer) le code en gras et remplacer le S400 (en rouge) par un S800.

Ainsi, le nouveau code ressemblera à quelque chose comme ça :


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIiEMar7pQno9izCKABh8WhyloCTfCNqZHrJl8zhiZHJPinZWEqBiW-AEkI4LGsnUForiYIUrXXkAjq06EkjS5PvJ9B0lH-SMWuK87YyXSDxAmxTHmJ8G2rvynuvZ6Ja8ctG7CCWAPCzS/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIiEMar7pQno9izCKABh8WhyloCTfCNqZHrJl8zhiZHJPinZWEqBiW-AEkI4LGsnUForiYIUrXXkAjq06EkjS5PvJ9B0lH-SMWuK87YyXSDxAmxTHmJ8G2rvynuvZ6Ja8ctG7CCWAPCzS/s800/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>


Et c'est tout ! Maintenant, votre image paraîtra plus grande dans votre article lorsqu'il sera publié.

@+