vendredi 1 mai 2009

Blogspot : adapter la largeur selon la résolution

Je propose un tout petit tuto pour avoir, sous Blogspot (anciennement Blogger) une mise en page flexible suivant la résolution de l'écran. C'est très simple à réaliser et plutôt sympa quand on connait tous les différents formats qui fleurissent aujourd'hui (c'est le printemps, je sais, mais quand même!).

Dans le Tableau de bord, il suffit d'aller sous Mise en page puis Modifier le code HTML.

Note avant de commencer : sauvegarder le template existant.


  1. Sous Header, modifier la largeur (initialement en pixel) pour avoir une valeur en pourcentage (ici j'ai mis 90%). Sur Matt attaque le blog, c'est la grosse entête encadrée.
  2. Toujours sous Header, trouver le paramètre description et modifier la largeur maximale (ici 100%). Ceci étant fait, le topo dans l'entête s'ajustera à la taille de l'encadré.
  3. Enfin, sous Outer-Wrapper, changer les largeurs de l'enveloppe (outer-wrapper), des posts (main-wrapper) et de la sidebar (sidebar-wrapper)

Voilà le résultat dans différentes résolutions (800*600, 1024*768, 1280*1024):




Amusez-vous bien, bande de blogueurs,
Eclatez-vous bien, bande de blogueuses ;)

8 commentaires:

FOURNIER Jacques Roland a dit…

Merci c'est super.
je publie surtout mes photos.
Comment les agrandir également en proportion.
Merci, Jacques
http://jfalbum.blogspot.com

Matthieu a dit…

Pour les photos, je n'ai jamais essayé mais à mon avis il suffit juste de changer l'unité pour la largeur et la hauteur. Dans le billet, il faut aller sous "Modifier le code HTML" trouver le code de la photo (entre les balises ). Il y a deux champs "width: 400px" et "height: 51px" et il suffit d'écrire des valeurs en %.
Si vous avez encore des questions, n'hésitez pas ;)

Admin - Songes du Crépuscule a dit…

Thanks a lot
J'ai googolé pas mal avant de trouver ton topic. Et le coup du % c'est tous simplement ce qu il y a de plus smart !
all the best

Matthieu a dit…

moi aussi, j'avais cherché comment faire et vu que je n'ai pas trouvé grand chose, j'ai testé chez moi ;)

Bonne continuation
++

Anonyme a dit…

Salut ! J'ai besoin de ton aide, j'ai réussi, grâce à toi à augmenter la largeur, mais par contre, je ne sais po comment augmenter la taille de la photo..
J'arrive po à trouver le code de la photo...

Help me pleaaaaaase..

Merci!!!

Matthieu a dit…

@Anonyme: salut, désolé de répondre si tard.
Quand tu post un billet, tu peux l'écrire en html.(à côté de l'onglet "rédiger") Et c'est là que tu mettras tes tailles en %.

Voilà, je crois qu'il n'y a pas de souci. N'hésite pas à me secouez si t'as un problème. Je suis de nouveau sur ce blog.
++

jean guzo a dit…

Merci beaucoup pour ce tuto simple et efficace. Je commençais à en avoir marre de voir mes gribouillis toujours tronqués.

PH a dit…

Bonjour
Merci beaucoup pour ce bon tuto qui a répondu à mes questions.
Ceci dit (ça fait suite à ce que Anonyme disait), j'aimerais que mes images s'adaptent automatiquement à la taille de mes post, et ce dans toutes les résolutions d'écran. Je publie beaucoup de photos, et ça serait un peu long de changer la valeur en % pour chaque photo à chaque fois que j'en publie une.
As tu une idée??
En tout cas merci encore, ce tuto m'a bien aidé