Merci à l'équipe Blogger.
@+
" eweeb est un espace-Web libre et gratuit permettant à tout un chacun de s’inscrire pour publier.
Il peut être utilisé comme un Digg-like, un blog, une tribune libre, un site de bookmarking ou un annuaire.
eweeb est en quelque sorte un site caméléon.
En vous inscrivant vous devenez auteur et vous pouvez :
- proposer des liensVoici 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 :
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) :
Enregistrez les modifications.
max-width: 560px;
width: expression(this.width > 560 ? 560: true);
<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é.
@+