Ajouter une colonne à votre blog

By
Advertisement




Le 29 janvier dernier, nous avions vu de quoi était constitué une partie du code html des modèles Blogger. Le code étudié était celui du modèle "Minima", le premier proposer quand on crée son blog sur Blogger.

Nous allons ici voir comment ajouter une autre colonne à ce modèle en gardant l'architecture proposé sur l'article "Comprendre le modèle Blogger 1" .

Voici à quoi ressemble le modèle minima quand vous allez sur "éléments de la page" :


Dans le style Css du modèle minima, vous trouverez le code suivant :

#outer-wrapper {

width: 660px;

padding: 10px;

....... }

#main-wrapper {

width: 410px;

float: left;

....... }

#sidebar-wrapper {

width: 220px;

float: right;

........ }

L’outer-wrapper a une largeur 660 pixels. L’espacement étant de 10 pixels, tout ce qui se trouve dans l’outer-wrapper reste à 10 pixels de la bordure. Ce qui nous 660 - 20 (pour les deux bordures) = 640 pixels dans lequel seront contenu le main-wrapper (la colonne centrale) et le sidebar-wrapper (la colonne latérale).

Le main-wrapper à une largeur 410 pixels, et est dirigée vers la gauche.

Le sidebar-wrapper a une largeur 220 pixels, et est dirigée vers la droite. Ensemble, le main-wrapper et le sidebar-wrapper ont une largeur de 410 + 220 = 630 pixels. Au milieu, il y a un espace de 640 - 630 = 10 pixels.

Ainsi, pour ajouter une autre colonne latérale, il faut créer de l’espace.

Connectez-vous sur votre compte, aller sur le « modèle » du blog où vous allez ajouter une nouvelle colonne latérale. Cliquer sur « modifier le code html » (ne pas cocher « développer des modèles de gadget)

Etape 1: Garder une copie de votre modèle.

Etape 2: Créer une colonne latérale droite. Pour cela :

Changer les lignes 190 et 200 par celles-ci :

190: <div id='right-sidebar-wrapper'>

200: <b:section class='sidebar' id='right-sidebar' preferred='yes'>

Dans votre style CSS , changer "#sidebar-wrapper" par "#right-sidebar-wrapper".

Enregistrer votre modèle.

Etape 3: Ajouter la nouvelle colonne en insérant ces lignes :

131: <div id="'left-sidebar-wrapper'">

132: <b:section class="'sidebar'" id="'left-sidebar'" preferred="'yes'/">

133: </b:section></div>

Enregistrer votre modèle et aller voir ce que ça donne sur « éléments de la page »:



Vous verrez une nouvelle section, Sous l’entête et avant le bloc pour le message. Pour que cette section se mette à gauche, il faut ajouter le Css suivant dans votre modèle html :

Etape 4: Ajouter le code css pour la colonne latérale gauche

#left-sidebar-wrapper {

width: 220px;

float: left;

word-wrap: break-word;

overflow: hidden;

}

Votre modèle devrait maintenant ressembler à quelque chose comme ceci :



Votre nouvelle colonne latérale est maintenant à gauche, mais votre colonne droite est maintenant passée sous le bloc des messages. C’est parce que la largeur de deux colonnes latérale ajoutée à celle de la colonne centrale 840 pixels, ce qui est plus que la largeur de l’outer-wrapper (660 pixels).

Etape 5. Changer la largeur de l’outer-wrapper et celle de l’header-wrapper.

Dans le style css de votre blog, trouver #header-wrapper et #outer-wrapper , changer la largeur (width ) de 660 à 860.

Etape 6. Ajouter un élément à la page.

Finalement, ajouter un nouvel élément à la colonne que vous avez ajoutée.

Votre blog aura maintenant cette apparence :



Grand merci à BeautifulBeta et Webtalks.

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.


29 commentaires:

  1. Bonjour,

    A priori c'est intéressant, mais la méthode avec laquelle tu proposes de changer le code n'est pas très pratique. Je n'ai pas le numéro des lignes, et même si j'insère le code dans un programme qui me donne accès à cette donnée, étant donné tous les changements déjà effectués, les numéros ne seraient plus correct. Peux tu indiqué quel est le code à changer, avant de donner le code final? Merci

    RépondreSupprimer
  2. Oui, elle a raison Sia, je rencontre le même soucis!!! Help!! Son idée, ça serait super sympa de ta part!!! Parce que pfff, c pas pratique un blog avec une seule colonne! ;)

    RépondreSupprimer
  3. @grippine : Va sur cet article pour choisir la version 3 colonnes du modèle que tu veux.

    RépondreSupprimer
  4. Je te remercie mille fois Rodney, mais je n'ose pas faire cette manip, l'histoire de perdre le widgets, là, foulalahhh, ça me fait trop trop peur!! Moi fille échaudée!! ;)))

    RépondreSupprimer
  5. Cette astuce fonctionne parfaitement... le numéro des lignes n'est donné qu'a titre indicatif; ensuite il suffit d'un minimum de bon sens pour savoir où mettre les lignes... RAS de mon côté, dommage que les backgrounds par défaut ne soient pas adaptés...

    RépondreSupprimer
  6. Je manque de bon sens !
    Honnêtement je ne sais pas quelles lignes remplacer : trop débutant sans doute.
    Si quelqu'un peut les copier-coller en commentaire, ou, encore mieux si ce peut être une intervention du maître des lieux !

    Merci pour ce blog en tout cas : c'est un soutien précieux.

    RépondreSupprimer
  7. Je pense que les lignes à remplacer sont :

    Pour 190:
    div id='content-wrapper'

    Pour 200:
    b:section class='sidebar' id='sidebar' preferred='yes'

    (J'ai enlevé les marques de balise < et > pour que ça puisse passer)



    Il me reste à trouver les étapes suivantes : ce qu'il faut changer dans le CSS (c'est aussi dans le html ?), et où ajouter les lignes 131 à 133.

    Je pars de loin... mais je progresse !

    RépondreSupprimer
  8. Je vous ajoutez un colonne à un modèle blogger que j'ai l'installer par B.Templates et il contient plusieurs modifications dans le Code HTML...!!

    RépondreSupprimer
  9. j'ai éssayé mais rien n'y fait, j'ai pris un modele que propose blogspot et je l'ais changé à ma façon, mais je n'arrive pas à insérer une 3e colonne comme tu l'explique. je n'ai pas le même code html que toi. c'est pour sa que sa ne marche pas ?

    RépondreSupprimer
  10. Tout à fait d'accord ! Moi aussi je suis totalement débutante, et je ne retrouve absolument pas ces lignes ... j'utilise Minima Strech, le code est peut-être très différent .. Je vais devoir me résoudre à utiliser le modèle existant à 3 colonnes, mais la largeur ne me convient pas ! En espérant que je puisse utiliser les conseils reçus sur ce post, qui est malgré tout, très intéressant. Merci

    RépondreSupprimer
  11. Je me demandais si on peut ajouter une 3ième colonne à un modèle autre que ceux que Blogger propose?! J'en est vu de très beaux, mais à 2 colonnes seulement et j'aimerais qu'ils soient à 3 colonnes.

    Merci de me répondre Rodney!

    :)

    RépondreSupprimer
  12. @ Isabelle : Possible, il suffit juste d'avoir une certaine maîtrise du codage sur blogger.

    RépondreSupprimer
  13. Je ne connais strictement rien justement, mais je me suis essayé. J'ai réussi la première partie seulement. Dans la 2ième quand venait le temps d'enregistrer, j'ai toujours un message d'erreur. Je vais me réessayer, sinon va falloir que je me trouve quelqu'un qui connait ça.

    Merci de m'avoir répondu.

    RépondreSupprimer
  14. J'ai finalement réussi, mais le message blog n'est pas centré comme ton exemple. Est-ce qu'il y à moyen de remédier à ça?! Pour voir mon blog test et visualiser

    http://choupinetteline.blogspot.com/

    Merci!!

    RépondreSupprimer
  15. Pour trouver lignes à remplacer, utilisez la fonction recherche de votre navigateur en appuyant sur Ctrl+F ;)

    RépondreSupprimer
  16. J'ai downloader un template donc le code est vraiment diférent je ne peux pas ajouter une colonne jaimerais bien remedier a la situation rapidement si posible

    http://quebecnightclub.blogspot.com/
    Merci

    RépondreSupprimer
  17. je suis debutant
    mais j ai réussi à crée mes trois colonnes
    mais je n arrive pas à en mettre une a gauche et a droite :((

    par contre pour ceux qui veulent réussir il faut pas prendre en compte les chiffre 190 200 il faut juste regarder le code html et faire des recherche ctrl+F et chercher et coller par rapport a celui qui existe déjà

    RépondreSupprimer
  18. j ai enfin réussi pour les personne le désirant envoyer moi un mail à dgerald69@gmail.com et je vous renverrai le template minima à trois colonnes

    bien sur merci pour le tuto mais pas facile à trouver ou mettre les lignes car les numéro ne veulent tjs pas dire la même chose et certaines lignes doivent être corrigées comme 131 à132 b:section doit pas y être et effacer les "

    RépondreSupprimer
  19. Bonjour,
    Est-ce que Gérard ou Rodney pourraient me dire après quoi il faut mettre les lignes 131,132,et 133 je n'ai aucun repère de numéro de ligne de code dans blogger ?
    Cordialement,
    Pierre-Olivier

    RépondreSupprimer
  20. @ Pio : Pour comprendre de quoi il est question, il faut se référer à cet article Comprendre le modèle blogger 1" et mettre les lignes 131, 132 et 133 juste après la ligne 130 tel qu'indiqué dans l'article que j'ai cité.

    RépondreSupprimer
  21. Bonjour

    J'ai élargie ma page du blog avec le templete Thisaway. je souhaiterai rajouter une colonne a droite
    j'aurais les même dimension que j'ai actuellement ??

    MZE

    RépondreSupprimer
  22. Bonjour,

    En faite j'ai envie de rajouter une colonne a gauche
    quelle code html dois-je rajouter?
    C'est pas évident avec les numéro devant
    y a pas une explication plus simple avec des recherche ?

    Cordialement.

    MZE

    RépondreSupprimer
  23. faites attention pour cette ligne non seulement il faut retirer les " mais à la fin il faut aussi supprimer le / de yes/>

    RépondreSupprimer
  24. Ce n'est pas 850 la largeur totale au lieu de 840 ? (410+220+220)

    Merci.

    RépondreSupprimer
  25. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  26. Où placer EXACTEMENT l'étape 3 ?

    RépondreSupprimer
  27. Mea culpa, j'ai réussi l'étape 3 mais je bloque sévèrement à l'étape 4.

    Je l'ai placé dans Outer-Wrapper juste avant #right-sidebar-wrapper { mais ça ne marche pas. Le tout reste à l'étape 3 comme si de rien n'était.

    RépondreSupprimer
  28. Bonjour,

    le gadget sur la gauche rend le blog illisible

    RépondreSupprimer
  29. Salutations! Je suis vraiment intéressé par une chose, bien sûr, si je ne suis pas trop demander pourriez-vous s'il vous plaît nous dire où vous avez grandi?

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT