Gpooo: Aide blogger - Modifier la largeur des messages

vendredi, décembre 01, 2006

Aide blogger - Modifier la largeur des messages

Modifier la largeur des posts et de la barre latérale

Nous allons voir comment modifier les dimension d'une colonne texte ou barre de côté sur un blog bloger.
Dans la photo ci dessous, le fond de la page n'a pas été modifié volontairement, pour que vous visualisiez bien le résultat.

Comment procéder

Dans l'admistration de votre blog:

Onglet: Modèle
Rubrique: modifier le code html
descendre dans le code html, jusqu'à voir:
.../* Wrapper */

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 752px;
text-align: left;...}

Avec cette ligne (width: 752px;) vous pouvez jouer sur la largeur de votre colonne de texte, celle où son publié les posts blogger.
Attention à ne pas donner une largeur trop importante. Cela rendrait votre blog illisible (sans scroll) pour des visiteurs équipé en 800x600 (résolution écran).
ICI la référence est le pixel (px), mais vous pouvez aussi exprimer les dimensions en millimètre (mm) et quelques autres unités...

Pour modifier la largeur de la colonne latérale, toujours dans l'onglet modèle, modifier code html... Allez jusqu'à:

#sidebar {
width: 256px;
float: right;
color: $sidebarTextColor;
word-wrap: break-word;...}

Ici aussi pensez à essayer votre mise en page avec une résolution d'écran 800x600. Vous aurez quelques surprises si vous mettez des valeurs trop importantes.

Tuto réalisé avec le modèle de blog: Son Moto

Libellés : aide blogger

36 Comments:

Et hop ! Un tuto de plus !

Seulement là, je pense avoir merdu.... Enfin, je sais po, histoire de voir, peux tu aller jetter un oeil sur ce dernier stp...

Voila ce que j'ai constaté, et que toi aussi, après avoir modifié les largeurs comme je voulais...

1/ Bandeau de droite, textes + images ne sont plus centrées dans le bandeau.

2/ Bandeau de gauche, ou sont les messages, les 'corps' des textes (en vert) ne s'étalent plus sur la largeur total du bandeau.

3/ Toujours dans le bandeau de gauche, impossible de mettre 3 photos les unes à coté des autres, meme fortement diminuées, 2 ok, mais pas trois.

Richard, histoire que tu galère pas trop à chercher en faisant des essais, et vu que j'ai entièrement confiance en toi, veux tu que je te communique les pass de mon blog afin de le bidouiller directement !
(Par Mail par exemple !)

Amicalement

Pascal.

By WEIDER, at vendredi 1 décembre 2006 20 h 41 GMT
Yop pascal ;-)

Attend un peu avant de m'envoyer les pass :-D
Tu pourras m'ajouter comme contributeur au blog, on verra déjà si j'ai accès à quelques options. et ce ser toujours intéressant. ;-)
C'est une responsabilité quand même, si je fais une bourde.
Et puis l'idée c'est quand même que tu y arrives seul "il vaut mieux apprendre à pêcher que donner du poisson" ;-)

Je regardes ton blog et je reviens ;-)

By Parazine Blog, at vendredi 1 décembre 2006 20 h 54 GMT
Ok, merci !

By WEIDER, at vendredi 1 décembre 2006 21 h 00 GMT
Yo ;-)
essaye en modifiant la valeur de padding dans:
.sidebar .widget {
margin: 12px 0 13px 0;
padding: 20px;
}

elle est initialisé à zéro normalement, essaie avec 20px et plus si ça ne suffit pas ;-)

++

By Parazine Blog, at vendredi 1 décembre 2006 21 h 16 GMT
Ok, j'ai trouvé la 'plage' que tu m'as indiqué, et j'ai modifié à 20px.

Resultat, le bandeau de droite est ok, textes et images !!!

Reste celui de gauche, c'est à dire, textes sur la largeur total du bandeau, et possibilité de mettre 3 photos à la suite...

Merci déja !

By WEIDER, at vendredi 1 décembre 2006 21 h 31 GMT
Bon, ben je verrai demain hein ;-)

Je vais rajouter cette modif au tuto.

Pour les images, je ne pense pas que le nombre influ. Je testerai ça, mais je te donnerai aussi une idée pour faire des vignettes qui renverront vers l'image en grand (un autre tuto :-p ).

++ ;-)

By Parazine Blog, at vendredi 1 décembre 2006 21 h 58 GMT
Bonjour Richard !

J'éspère que tu as passé une bonne fin de soirée hier, moi meme j'étais un peu naz, ayant pas mal courru dans la journée...

Oui, j'attends avec impatience ton tuto concernant les vignettes photos. Je ne sais pas de quoi il en retourne exactement, mais je pense que si tu me le propose soit doit etre du tout bon ;-)

Bon début de week end à toi Richard !

Pascal.

By WEIDER, at samedi 2 décembre 2006 07 h 19 GMT
Bein M.... alors, ce matin j'essai de modifier le texte de mon tout premier billet, et ce dernier apparait uniquement en HTML comme ,et non en texte simple, de plus je n'ai plus de barre d'outils au dessus (mode centré, couleur police, incruster une image....)

Bein, qu'est ce qu'il ce passe t'il donc ! ;-)

By WEIDER, at samedi 2 décembre 2006 07 h 52 GMT
Lut' ;-)

Ouep c'est pareil chez moi :-/

ça va revenir, ils ont quelques soucis sur la plateforme...
Voir ici: http://status.blogger.com/

Ils doivent être au boulot :-D
++

By Parazine Blog, at samedi 2 décembre 2006 08 h 02 GMT
Oui, ça doit etre ça...
Courageux les ti gars, boss meme un samedi ! ;-)

Dis moi, tes connaissances en HTML, tu les tiens d'ou, car tu m'a l'air de maitriser ce language parfaitement bien ! Ton job peut etre ?

By WEIDER, at samedi 2 décembre 2006 08 h 54 GMT
Salut pascal,

Pour le html (je ferai un petit article aussi).

J'ai acheté "html4 pour les nuls".

celui là est vraiment excellent je le recommande vivement.
Il y a aussi "php/mysql pour les nuls" (il peut servir pour avoir des notions de varible, mais il est loin d'être indispensable et surtout il est un peu moins bon.

C'est pas mon boulot, mais je me suis quelques site à la main et t'es bien obligé de comprendre. :-D

++

By Parazine Blog, at samedi 2 décembre 2006 22 h 26 GMT
Hello

moi j'ai un petit problème tout bête mais qui me rend dingue. Je veux poster de nouveaux commentaires sur mon blog:

mais depuis ce matin à chaque fois que je veux publier il s'affiche "url contains illegal characters". Et ce alors que l'aperçu correspond parfaitement à ce que je veux. Une idée , merci d'avance

By Arturo, at mardi 5 décembre 2006 12 h 06 GMT
oups désolé:
http://2007underground.blogspot.com/

By Arturo, at mardi 5 décembre 2006 12 h 09 GMT
Salut ;-)

J'ai posté un comment sur l'url ci dessus no soucis :-)

Dans ton commentaire tu essaies de mettre du code (html, javascript, autre ..) ??

++

By Parazine Blog, at mardi 5 décembre 2006 13 h 01 GMT
Bonjour Richard,

Toujours pas de solution sur ...

..."Pour les images, je ne pense pas que le nombre influ. Je testerai ça, mais je te donnerai aussi une idée pour faire des vignettes qui renverront vers l'image en grand (un autre tuto :-p )."...

Et également pour recentrer le texte de mes messages sur la largeur totale colonne de gauche ?

Bonne fin de journée à toi !

Amicalement

Pascal.

By WEIDER, at mardi 5 décembre 2006 14 h 00 GMT
Salut pascl,

Je vais regarder d'un peu plus près pour le texte.
et aussi pour les images.

Je suis un peu occupé par ailleurs mais avant la fin de la semaine je devrai pouvoir me pencher sur ces difficultés ;-)

++

By Parazine Blog, at mardi 5 décembre 2006 14 h 31 GMT
Merci d'avance Richard,

Tu sais que 3 de mes collegues de boulot, suivent attentivement tes tutoriels et conseils !

Eux aussi ont commencés un blog perso chez BLOGGER !!! ;-)

Pascal

By WEIDER, at mardi 5 décembre 2006 14 h 36 GMT
Re'

Ben c'est super ça :-)
salut à eux aussi alors ;-)

Qu'ils n'hésitent pas à poster des commentaires ou questions ?

petits à petit chacun pourra aider les nouveaux, si je n'ai pas eu le temps de voir les commentaires.

Je vous conseille aussi un petit tour dans la rubrique réf. pour améliorer le positionnement de votre blog, si vous le souhaitez.

ça va bloger :-D

By Parazine Blog, at mardi 5 décembre 2006 14 h 44 GMT
Bonjour,
Une petite question:
est-il possible de répondre aux messages?Et si oui, comment?
Merci

By nini, at mardi 23 janvier 2007 09 h 06 GMT
Salut, merci pour le site.
J'ai un petit problème sur le mien.
Je voudrais élargir les éléments de droite mais quand j'applique ton tutoriel, ça élargit effectivement les colonnes mais pas le texte.
Je voudrais mettre une serie de 5 petites photos mais je ne peux en mettre que 3 !
Comment puis je élargir ma colonne de droite et ainsi "etaler" le texte ( et aussi les images).
Je ne connais rien en html mais je peux fouiller dans le code du blog.
Merci

By Macbrain, at samedi 17 mars 2007 08 h 54 GMT
Bonjour,

Merci d'avoir créé ce site, qui est vraiment utile pour tous les débutants que nous sommes !
J'ai moi aussi un blog sur blogger, et j'essaie de diminuer la taille de la colonne de droite, que je trouve vraiment énorme.
J'ai essayé d'appliquer la méthode que tu expliques, mais le code du modèle n'est pas ressemblant.
Peux-tu m'aider ?

Voici le code :
#outer-wrapper {
font:$bodyfont;
}

a {
color:$linkcolor;
}

a:hover {
color:$titlecolor;
}

a img {
border-width: 0;
}

#content-wrapper {
padding: 0 1em 0 1em;
}

@media all {
div#main {
float:right;
width:66%;
padding:30px 0 10px 1em;
border-left:dotted 1px $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
div#sidebar {
margin:20px 0px 0px 0;
padding:0px;
text-align:left;
float: left;
width: 31%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
}

@media handheld {
div#main {
float:none;
width:90%;
}

div#sidebar {
padding:30px 7% 10px 3%;
}
}

By Jane Proust, at mardi 17 juillet 2007 23 h 15 BST
Bonjour Jane Proust ;-)

Dans ton code le width de div#sidebar est donné en pourcentage (width 31%), il te faut surement mettre quelque chose comme :
width: 25%;

Si ça ne marche pas bien (ça peut arriver si un autre élément est défini plus large (et surtout avec internet explorer)) il faudra rajouter dans la section:
div#sidebar {...
...
width:25%;
max-width: 25%;
...}

en donnant une valeur : max-width on contraint tous les navigateurs à prendre cette valeur (enfin, en théorie :-D )

++

By Parazine Blog, at jeudi 19 juillet 2007 20 h 34 BST
merci pour votre aide!

By nini, at mardi 25 septembre 2007 06 h 56 BST
De rien ;-)

++

By Anyze, at mercredi 26 septembre 2007 15 h 34 BST
Bonjour.

Etant à la recherche d'astuces permettant de personnaliser mes pages blogger, je suis tombé sur ton tuto...Alors tout d'abord merci pour ton aide, j'ai d'ors et déjà placé ton blog in my favorites! ;)

Bon en l'occurrence, concernant la modif. de largeur de page, en effet ça marche nickel avec le model "Son of Moto"...ça fournit donc des pistes à étudier...car pour ma part avec un model "Tic Tac" ça merde pour une histoire de centrage, point d'ancrage de la page...je m'y remettrai...mais je post ici dans un but plus précis.

Agrandir sa page c'est bien!...mais moi ce que je voulais en faire c'était de pouvoir y rajouter une sidebar: ds le modèle "Tic Tac" les "Gadgets"-modèle qu'on peut rajouter sont à droite...ce que j'aimerai bien faire c'est d'en placer à droite ET à gauche (le tout dans une page élargie). Chez Notepad, je suis déjà tombé sur ce genre de page...mais chez Blogger il ne me semble pas possible de trouver un modèle avec ce genre de mise en page! :( .... Penses-tu que cela est possible? Et si oui, ça serait super d'indiquer comment. :D

Encore merci et bonne continuation.

By Mick, at lundi 29 octobre 2007 15 h 52 GMT
Re,

oups!!! re désolé mais je reviens sur ma question précédente...en fournissant un peu plus d'explication: en fait, j'ai une quinzaine de page...avec des thèmes différents, et certaines sont juste des portails (ex page passion mène à une page jeux, une sur les voyages, une sur le ciné...),et une sur mon actualité en général. Ce que j'aimerai bien faire ce serait d'informer, sensibiliser sur mon actu les amis qui viennent sur mes pages et ce sur n'importe quelle page où ils se rendent......

Il faudrait donc qu'en parallèle d'une page principale (en sidebar), une autre soit affichée...une vrai page avec possibilité de réaction (commentaires) et autre...C'est chaud, non?!....

Désolé, on ne se connait même pas et je vous assaille de mes questions toutes les plus ardues, tordues(??!!!) les unes que les autres! (En vérité, il n'y pas pas 36 questions non plus!)

Bon en fait, c'est pour voir si vous êtes vraiment balèzes! :P

By Mick, at lundi 29 octobre 2007 16 h 21 GMT
Salut ;-)

"Bon en fait, c'est pour voir si vous êtes vraiment balèzes! "

Mouarf, saligaud. C'est vraiment pas un truc simple à faire.
Je crois que j'avais déjà essayé et ça marchait moyen :-(

Bon je réfléchis à comment présenter un petit tuto pour personnaliser complètement son blog, mais là aussi c'est pas très simple....

à suivre en page d'accueil dans quelques jours (ou dans un mois).

++

By Anyze, at mardi 30 octobre 2007 16 h 40 GMT
Hello,

Quand tu dis: "Je crois que j'avais déjà essayé et ça marchait moyen :-("

Qu'avais tu essayé? 2 sidebars dans une page élargie, ou l'affichage de deux blogs au sein d'une seule page?

La première solution, même si elle n'est pas aussi dynamique, et facilement applicable (copie d'un gadget?!!) doit être à mon humble avis bien plus réalisable!...

Ca c'est amélioré blogger ou devrais-je dire blogspot, mais ce n'est pas encore ça, hein!

Bon merci tt de même, je surveille ce qui se passe...et puis: "à suivre en page d'accueil dans quelques jours (ou dans un mois)." ça au moins c'est un bon moyen de fidèlisation! ;)

May the force be with You!

By Mick, at mardi 30 octobre 2007 17 h 17 GMT
:-D

Bon du coup je vais être obligé de m'y mettre dans quelques jours ;-)

En fait j'ai un petit voyage de prévu, donc un mois d'absence, pas sans le net, mais pas le temps de faire un tuto un minimu construit non plus :-D (allez j'essaierai de mettre un photo, peut être).

Sinon pour afficher 2 blogs sur une page d'accueil je peux trouver un moyen avec une balise [frame], mais bon je sais pas si ça va être terrible :-( (et il y aura de grosse modif sur les largeurs à faire).

++

By Anyze, at mardi 30 octobre 2007 19 h 30 GMT
Hello,

"j'ai un petit voyage de prévu .../... 1 mois!" et tu appelles ça un petit voyage! Chanceux va!

+ "grosse modif sur les largeurs" Ouais! Ca ça m'intéresse! Big largeur + 1 sidebar de chaque coté!...Enfin je crois que tu l'avais compris. :)

Allez, profites bien de ton voyage....on verra ça tantôt.

Bye

By Mick, at mercredi 31 octobre 2007 09 h 09 GMT
Ah enfin des tutos pour personnaliser son blog! Merci c'est bien cool!
J'aurais une question à te poser; j'ai réussi à customiser l'apparence générale de mon blog comme je le voulais mais impossible de modifier l'apparence (couleurs) de la partie "commentaire". Mon blog est à dominante bleu et noir et qd les gens postent un commentaire la fenetre qui s'ouvre est aux couleurs de base du template (beige, blanc) donc pas du tout en harmonie avec mon blog.
Donc sais tu comment changer les couleurs de la partie "Commentaire" stp?
Merci d'avance.
A+
Davy

By Davy, at lundi 12 novembre 2007 11 h 37 GMT
Salut davy ;-)

Si tu veux modifier la couleur de fond d'apparition de tes comments pas de soucis, mais la page où l'on poste n'est pas accessible aux modifs,

Désolé (j'avais cherché une soluce aussi mais pas possible ;-)

++

By Anyze, at mercredi 5 décembre 2007 12 h 00 GMT
Bonjour!
Merci beaucoup de cette initiative de donner de l'aide pour blogger, j'utilise beaucoup tes tutos et je ne sais pas comment j'aurais fait sans!...
Je voudrais mettre mes articles dans des cadres... est-ce possible?...
Merci d'avance!
V.

By Vastriel, at mercredi 10 septembre 2008 18 h 06 BST
Bonjour,
je m'appelle Amélie et j'ai un problème que je n'arrive pas à régler et qui est en train de me rendre folle, malgré les différents tutoriaux que j'ai lu et essayé d'utiliser pour le résoudre.
Voilà je tiens un blog d'illustrations (enfin j'aimerais !) (http://ameliebonnin.blogspot.com/) et je trouve que les images que je poste sont trop petites. Je choisis bien GRANDE lorsque je charge l'image, mais rien à faire. ET autant si mon image est proche d'un format carré j'arrive à la faire apparaitre avec une taille respectable, autant si elle est allongé (en hauteur) elle devient toute petite.
j'ai réussi à agrandir la largeur de ma colonne de gauche, je pensais donc que mes fichiers s'y adapteraient mais ils restent petits et laissent une marge blanche à leur doite alors que j'aimerais qu'ils occupent cet espace ! (ex. la première image du blog)
la seconde image qui est la taille que j'aimerais obtenir (voire un peu +) est un fait deux images l'une au-dessus de l'autre. C'est tout ce que j'ai trouvé pour gagner en largeur mais ça ne me satisfait pas car je ne pourrais pas toujours "couper" mes images. heeeelp

By Amélie, at vendredi 19 décembre 2008 02 h 00 GMT
Au secours ! j'ai un problème avec mon blog http://poussincri.blogspot.com . En fait sur Mozilla Firefox il s'affiche correctement mais sur Internet Explorer c'est la castasptrophe: la colonne de droite est en bas droite au lieu d'être à 'hauteur normal'... J'ai changé de modèle, viré des trucs de la colonne etc, rien y fait! S'il vous plait aidez moi j'ai besoin de vous, Merci

By POUSSINCRI, at lundi 22 décembre 2008 09 h 47 GMT
Merci c'était très utile ! Cela évite d'avoir une colonne anorexique dans des écrans de résolutions astronomique aujourd'hui.

By Pix, at samedi 28 mars 2009 13 h 51 GMT