Comment afficher la méme taille pour tous des Images dans les articles Blogger

C'est l'une des astuces blogger la plus recherché, ce qui permet de publier des photos de grande taille dans les articles blogger.

Normalement, si vous téléchargez une photo grand format sur blogger (avec la taille du pouce de sélection), Elle sera automatiquement redimensionner et ensuite l'afficher sous forme de vignette.

Mais, la qualité de l'image de l'image redimensionnée est très pauvre.
Donc, pour rendre l'image plus propre et plus nette,voila la solution

Normalement Image Uploaded: (avec vignette de grande dimension choisies)




Image après l'application de l'astuce :




Alors, laisse moi vous apprendre à le faire ...
1. calculer la taille que vous souhaitez afficher (normalement, c'est la largeur de votre corps d'article ou message).
Prenons un exemple, la largeur du corps principal d'un blog est d'environ 570px. Ainsi, la largeur maximale à mettre une grande image est 570px. Mais, pour rendre l'image intéressante, nous devons donner une largeur un peu inférieure à la largeur du corps du message ... comme 560px.
Maintenant, allez dans Mise en page » Modifier html

Trouver cette :

]]></b:skin>

Ajouter cette avant cette ligne:


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

Modifiez la valeur en rouge en fonction de l'étape précédente.

Note: Ne pas vérifier si vous avez le tag img (déjà dans votre modèle. Si vous l'avais, il suffit d'ajouter le couple supplémentaire de lignes pour lui.


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


Enregistrer les modifications.

2. Maintenant, tout en faisant vos messages, de télécharger les images normalement, comme vous l'avez fait précédemment.
Une fois l'image est téléchargé, allez dans l'onglet Modifier le code HTML et le code image ressemblera à quelque chose comme ça :


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd_3aBZ933hyphenhyphenp46xJ0dWPHIktt1gRrCjBKtg6xl7MsCQnWfV7vrjhTSrZ8D8YAM0g9BbOF05QJNZY7BbG8plmr78utRTJTEO6XernXbwQMOfA41Qnn-_kcAqXbsjst15CTZpVc_9rINXfs/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/AVvXsEgd_3aBZ933hyphenhyphenp46xJ0dWPHIktt1gRrCjBKtg6xl7MsCQnWfV7vrjhTSrZ8D8YAM0g9BbOF05QJNZY7BbG8plmr78utRTJTEO6XernXbwQMOfA41Qnn-_kcAqXbsjst15CTZpVc_9rINXfs/s400/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>

Tout ce que vous avez à faire est de supprimer uniquement le texte en gras (attributs de largeur et hauteur) et de remplacer S400 à S800.
Ainsi, le code final ressemble à ceci


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd_3aBZ933hyphenhyphenp46xJ0dWPHIktt1gRrCjBKtg6xl7MsCQnWfV7vrjhTSrZ8D8YAM0g9BbOF05QJNZY7BbG8plmr78utRTJTEO6XernXbwQMOfA41Qnn-_kcAqXbsjst15CTZpVc_9rINXfs/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/AVvXsEgd_3aBZ933hyphenhyphenp46xJ0dWPHIktt1gRrCjBKtg6xl7MsCQnWfV7vrjhTSrZ8D8YAM0g9BbOF05QJNZY7BbG8plmr78utRTJTEO6XernXbwQMOfA41Qnn-_kcAqXbsjst15CTZpVc_9rINXfs/s800/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>

Maintenant, votre image sera agrandi dans l'article.