Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Modifier la largeur du pied de page à 100% de la page sur Blogger

Vous l'avez tellement attendu, le tutoriel est enfin là ! Après avoir vu comment modifier l'apparence globale du pied de page, voici comment modifier sa largeur à 100% de la page web !

C'est parti pour les explications ;)

Sommaire

  1. Sauvegarder votre thème
  2. Déplacer le pied de page
  3. Définir la largeur du pied de page à 100%

Sauvegarder votre thème

Je ne le répéterai jamais assez, cette étape est très importante au cas où vous feriez une erreur !
Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème. 

Modifier la largeur du pied de page à 100% de la page sur Blogger

Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.

Déplacer le pied de page

Et oui, pour pouvoir modifier la largeur du pied de page à 100% de largeur de la page, il va falloir déplacer son code HTML.

En fait, les éléments du blog sont compris dans des contenants, un peu comme des boîtes. Pour l'instant votre pied de page est à l'intérieur de la boîte qui définit la largeur de votre blog :

Modifier la largeur du pied de page à 100% de la page sur Blogger

Il va falloir le sortir de cette boîte comme ceci :

Modifier la largeur du pied de page à 100% de la page sur Blogger

Une fois la sauvegarde faite, cliquez sur Modifier le code HTML :

Modifier la largeur du pied de page à 100% de la page sur Blogger

Cliquez sur le rectangle noir à gauche de <b:skin>...</b:skin> :

Modifier la largeur du pied de page à 100% de la page sur Blogger

Si vous ne le trouvez pas c'est que cette partie est déjà ouverte, passez à la suite.

Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F en même temps (ou Cmd et F sur Mac). Une fenêtre de recherche apparaît en haut à droite de la boîte de code.
Collez la ligne suivante dans la boîte de recherche :
<footer>
Appuyez sur Entrer.
Vous trouverez le code de votre pied de page :

Modifier la largeur du pied de page à 100% de la page sur Blogger

Cliquez sur le nombre à gauche de cette ligne (elle sera différente pour vous) :

Modifier la largeur du pied de page à 100% de la page sur Blogger

Vous venez de fermer le code de votre pied de page, et obtenez la ligne suivante avec une flèche noir à gauche de la ligne de code :
<footer>...</footer>
Sélectionnez maintenant tout le code de votre pied de page en commençant par la droite et non par la gauche, pour éviter d'ouvrir le code :

Modifier la largeur du pied de page à 100% de la page sur Blogger

Si vous ouvrez le code ce n'est pas grave, cherchez à nouveau le code <footer> et recommencez les étapes précédentes ;)

Maintenant il faut chercher la fin du code du contenant du blog.

Repérerez le groupe de code qui se situe juste après où vous avez coupé votre pied de page, qui commence par <!-- content -->. Nous allons coller le code du pied de page avant la dernière ligne de ce groupe de code :

Modifier la largeur du pied de page à 100% de la page sur Blogger

Comme ceci :

Modifier la largeur du pied de page à 100% de la page sur Blogger

Voilà, nous avons déplacé le pied de page en dehors du contenant du blog !

Mais ce n'est pas fini, il faut maintenant définir la largeur du pied de page à 100%.

Définir la largeur du pied de page à 100%

Pour cela, cherchez le code suivant :
/* Mobile
Au-dessus de cette ligne, collez le code suivant :
footer {
  width: 100%;
}
Visuellement on passe de :

Modifier la largeur du pied de page à 100% de la page sur Blogger

A ceci :

Modifier la largeur du pied de page à 100% de la page sur Blogger

Vous l'aurez remarqué, le pied de page fait maintenant 100% de la largeur de la page ! Mais son contenu s'étend également sur toute la largeur, ce qui n'est pas très esthétique. Pour régler le problème, on va définir une largeur maximale du contenant à l'intérieur du pied de page qui s'appelle footer-outer. Cherchez donc le code :
.footer-outer {
Sous cette ligne collez :
  max-width: 1060px;  /* Largeur maximale du contenant à l'intérieur du pied de page */
  margin: 0 auto;
Remplacez 1060px par la largeur du contenant de votre blog.
Pour trouver cette largeur vous pouvez chercher le code suivant :
content.width
Vous devrez tomber sur un code qui ressemble à ceci :

Modifier la largeur du pied de page à 100% de la page sur Blogger

La largeur de votre contenant est indiqué sur cette ligne de code. Dans cet exemple, la largeur est de 1060px.

Visuellement on obtient :

Modifier la largeur du pied de page à 100% de la page sur Blogger

Sauvegardez, et voilà ! Votre pied de page fait 100% de la largeur de votre page ;)

Si vous voulez savoir comment modifier l'apparence du pied de page, je vous laisse découvrir mon tutoriel sur le sujet :)

Autres articles

93 commentaires:

  1. Merci pour ce tutoriel je l'attendais depuis un moment.
    Merci

    RépondreSupprimer
  2. Merci beaucoup pour cet article, sauf que malheureusement, ça ne fonctionne pas sur mon blog. au début ça fonctionne mais dès que j'ai fais l'étape max-width ça redevient comme avant et ne prend pas toute la largeur. http://blogtestmiss.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour, ça a bien fonctionné. Il suffit de définir le fond et la bordure du haut de ton pied de page au code :

      footer {
      }

      Au lieu de :

      .footer-outer {
      }

      Remplaces donc le code suivant :

      .footer-outer {
      max-width: 1220px;
      margin: 0 auto;
      background: #EFEFEF;
      border-top: solid;
      border-top-color: #FF0082;
      }

      par :

      .footer-outer {
      max-width: 1220px;
      margin: 0 auto;
      }

      Et le code suivant :

      footer {
      width: 100%;
      }

      par :

      footer {
      width: 100%;
      background: #EFEFEF;
      border-top: solid;
      border-top-color: #FF0082;
      }

      Supprimer
  3. Bonjour!
    J'aurai aimé savoir si tu savais comment je pourrai faire pour placer mes boutons de réseaux sociaux au dessus de ma bannière?
    Bisous :)

    RépondreSupprimer
  4. Bonjour, comment faire la même chose avec l'entête?

    RépondreSupprimer
    Réponses
    1. Bonjour Mélanie, c'est noté sur ma liste de tutoriels à faire ;)

      Supprimer
    2. Ah super ^^ Parce que j'ai essayé de faire la même chose avec l'entête mais maintenant mon entête se retrouve à la place du pied de page :/

      Supprimer
    3. Effectivement, c'est normal car il faut le déplacer à un autre endroit au début du blog ^^

      Supprimer
    4. J'attends impatiemment la même chose pour l'en-tête :)

      Supprimer
    5. Hello ! Tu en es où du tuto pour l'en-tête ? C'est la seule chose qui me manque pour vraiment me mettre à fond dans mon design :)
      Au passage, c'est vraiment génial tout ce que tu nous proposes ! Mon blog serait à un stade bieeeen moins avancé sans toi. Hâte de voir la suite :*

      Supprimer
  5. Oh je suis contente de ce tutoriel car je recherchais comment faire depuis longtemps. Malheureusement ça ne fonctionne pas du tout chez moi.

    RépondreSupprimer
    Réponses
    1. Bonjour Béné,
      Sur quel blog ça ne fonctionne pas ?

      Supprimer
  6. Bonjour,j'ai suivi toutes les indications mais je n'y arrive pas :(

    Quand j'essaye de coller le code : ...
    Ce n'est pas le même code qui apparait,c'est celui-là qui apparait :

    Et je n'arrive pas à prévisualiser,un message s'affiche : Impossible de charger l'aperçu du modèle : More than one section was found with id: footer-3. Section IDs should be unique.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Va dans Modèle > Modifier le code HTML. Sélectionne Blog1. Tu devrais trouver un code comme ceci :

      lt;b:widget id='Blog1' locked='false' title='Articles du blog' type='Blog'>

      Remplaces Blog1 par Blog2 comme ceci :

      lt;b:widget id='Blog2' locked='false' title='Articles du blog' type='Blog'>

      Sauvegarde. Change à nouveau Blog2 en Blog1, et sauvegarde à nouveau.
      Ça devrait fonctionner.

      Supprimer
  7. Bonjour, merci pour ces explications!
    J'aimerais savoir à présent s'il était possible de faire de la sorte pour le header car je voudrais le mettre à 100% également. Merci :) Bonne journée!

    RépondreSupprimer
    Réponses
    1. C'est sur ma (longue) liste de tutoriels à faire ;)

      Supprimer
  8. bonnjour j'aimerai faire la meme chose mais avec mon header est ce que c'est possible ^^

    RépondreSupprimer
    Réponses
    1. C'est sur ma (longue) liste de tutoriels à faire ;)

      Supprimer
  9. Coucou, je t'avais déjà demandé conseil auparavant donc je reviens vers toi car j'ai changé de plateforme. Je suis allée sur weebly mais je pense que les codes html sont à peu près pareils. Enfaite je voudrais agrandir la largeur de la sidebar pour pouvoir mettre de plus grandes images. Voilà, en espérant que tu puisses m'aider :) et merci d'avance ! (je t'ai seulement mis le code html du blog)

    /* Blog */
    #blogTable .blog-post h2.blog-title {
    margin-bottom: 10px !important;
    font-size: 32px;
    line-height: 1.2em !important;
    text-align: center;
    }
    #blogTable .blog-post h2.blog-title a {
    color: #3e3e3e;
    }
    #blogTable .blog-post h2 {
    font-size: 20px;
    margin: 10px 0;
    color: #888888;
    }
    #blogTable .blog-post .blog-header {
    text-align: center;
    }
    #blogTable .blog-post .blog-date {
    display: inline;
    float: none;
    text-align: center;
    }
    #blogTable .blog-post .blog-date .date-text {
    float: none;
    }
    #blogTable .blog-post .blog-comments {
    display: inline;
    float: none;
    text-align: center;
    }
    #blogTable .blog-post .blog-separator {
    margin: 20px 0 25px;
    }
    #blogTable .blog-sidebar h2 {
    margin-bottom: 10px;
    }
    #blogTable .blog-sidebar p {
    margin-bottom: 20px;
    }
    #commentPostDiv .field input[type=text],
    #commentPostDiv .field textarea {
    padding: 8px 12px;
    background: transparent;
    }
    #commentSubmit {
    height: auto;
    padding: 8px 12px;
    background: #333333;
    color: #ffffff;
    border: 2px solid #333333;
    border-radius: 1px;
    text-transform: uppercase;
    white-space: normal;
    font-family: 'Quattrocento Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    }
    #commentSubmit span {
    background: none;
    }
    #commentSubmit:hover {
    background: #ffffff;
    color: #333333;
    border: 2px solid #333333;
    }
    .blogCommentReplyWrapper iframe {
    height: 500px;
    }

    RépondreSupprimer
    Réponses
    1. Bonjour Romane,
      Je ne connais pas la plateforme weebly. Peux-tu m'envoyer le lien vers ton blog pour que je puisse voir ?

      Supprimer
    2. Oui, voilà : http://myparisiandiary.weebly.com
      merci !

      Supprimer
    3. Ajoute les codes CSS suivants à la suite de tes code CSS :

      .blog-sidebar, .column-blog {
      width: 245px; /* Largeur de la barre latérale */
      }

      .blog-sidebar {
      padding-left: 20px !important; /* Espace entre les articles et la barre latérale */
      }

      Colle-les, par exemple, avant la ligne :

      /* Blog */

      Et voilà ;)

      Supprimer
    4. merci beaucoup encore une fois pour vos précieux conseils !
      je me demandais également comment je pouvais étirer mon blog pour qu'il prenne plus de place sur la page (essayer d'éliminer les bandes blanches de chaque côté)
      en espérant que vous pourrez m'aider :)
      Romane

      Supprimer
    5. Bonjour Romane,
      Le lien vers ton blog ne marche plus, ça me dit que le blog a été supprimé :/

      Supprimer
    6. Ah oui mince, pardon j'avais oublié de le republier après les modifications :/
      toutes mes excuses http://myparisiandiary.weebly.com

      Supprimer
    7. Bonjour Romane,
      Je ne suis pas experte en Weebly mais essaye de rajouter le code suivant :

      .container {
      width: 100%;
      max-width: 1000px !important;
      }

      Modifie la valeur de max-width pour la largeur que tu souhaites. Par contre, j'ai remarqué qu'en augment la largeur du blog cela ajoute de l'espace entre la colonne des articles et celle de ta barre latérale. Pour rectifier ça tu peux rectifier la largeur de la zone d'articles et de la barre latérale avec ces codes :

      /* Barre latérale */
      .blog-sidebar {
      width: 266px !important;
      }

      /* Zone d'article */
      #wsite-content {
      width: 700px;
      }

      Supprimer
  10. Bonjour,
    Quand je passe à l'étape "Remplacez 1060px par la largeur du contenant de votre blog.
    Pour trouver cette largeur vous pouvez chercher le code suivant :
    content.width " , je ne trouve pas ce code ..

    RépondreSupprimer
    Réponses
    1. Bonjour, peux-tu me donner le lien vers ton blog pour que je puisse voir la largeur du contenant de ton blog ?

      Supprimer
  11. Bonjour merci beaucoup pour vos nombreux tuyaux qui m'ont déjà beaucoup servi.
    J'aurais aimer savoir s'il il est possible de fixer le pied de page en bas pour qu'il soit toujours visible.
    Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour Guillame,
      Oui tu peux ajouter les lignes CSS suivantes :

      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;

      Avant le signe } du code suivant :

      footer {
      width: 100%;
      }

      Comme ceci :

      footer {
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      margin-bottom: 0 !important;
      }

      Tu peux ajuster la marge sous le pied de page si besoin en modifiant la valeur de 0 de la ligne margin-bottom, sachant qu'une valeur négative déplacera le pied de page vers le bas et qu'une valeur positive le déplacera vers le haut.

      Supprimer
  12. Bonjour je vous remercie beaucoup, vous etes au top. j'ai cependant un soucis car du coup tout mes articles des pages ainsi que la bannière passe derrière les images de fond du blog.
    Voici l'adresse si vous pouvez y jeter un oeil et me dire les modifications à faire.
    Je vous en remercie d'avance.
    http://fredericsimonin.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Guillaume, restaure ton blog avec le fichier de sauvegarde que tu as du effectuer avant de faire les modifications car tu as supprimé le contenu de ton blog par erreur en faisant la manipulation :/

      Supprimer
  13. Bonjour, j'ai fais ce tutoriel qui a marché avec succès mais le problème c'est que j'ai du faire une petite faute de frappe, ou je ne sais pas et du coup mon pied de page s'intercale avec certaines de mes photos. La longueur du blog assez courte une fois qu'on vois mon article en entier.

    On voit aussi le bloc des commentaire sur mes photos comme si les photos était trop longue par rapport à la longueur du blog.

    RépondreSupprimer
    Réponses
    1. Bonjour Elie,
      De mon ordinateur, les photos de tes articles, et les articles s'affichent correctement :)

      Supprimer
  14. Bonjour, j'ai un problème.
    Je ne trouve pas .footer-outer {
    quand je le met a rechercher.

    RépondreSupprimer
    Réponses
    1. Bonjour Awea Pullip,
      As-tu bien cliqué dans la boîte de code avant d'appuyer sur Ctrl et F ? Car si tu ne le fais pas, c'est une autre boîte de recherche qui apparaît (en haut à droite de la page web) mais elle ne fonctionne pas correctement. La barre de recherche doit apparaître dans la boîte de code.

      Supprimer
    2. Bonjour.
      Oui, j'ai bien appuyer dans la boite de code, la barre de recherche est dans la boîte de code, je pense qu'il doit y'avais un problème, tout a l'heure ou il voulait pas me trouver /* Tabs, j'ai fini par le chercher, en descendant car je savais ou il était a peu près . x'(

      Supprimer
    3. C'est bizarre. Vérifies qu'il n'y a pas d'espaces avant ou après le texte que tu mets dans la boîte de recherche.

      Supprimer
  15. Oui, j'ai bien verifier, je ne trouve que ca < div class='footer-outer' > quand je met footer-outer car
    quand je met sa .footer-outer { , il ne trouve rien

    RépondreSupprimer
    Réponses
    1. Essaye de rajouter le code après le code :

      footer {
      }

      Que tu as dû ajouter dans le tutoriel.

      Supprimer
  16. Bonjour,
    j'ai suivi le tutoriel à la lettre e plus de celui permettant de customiser l'apparence du pied de page, mais je ne parviens pas à le mettre à 100% de la largeur de la page... ça donne ça : http://lecturesvesperales.blogspot.com
    Du coup je n'ose pas m'atteler à la suite (modifier la largeur de l'en-tête à 100%!) est-ce que tu aurais un conseil?
    Dans tous les cas merci pour tes tutos ; )

    RépondreSupprimer
    Réponses
    1. Bonjour Victoria,
      As-tu supprimé tes modifications ? Car ton pied de pas n'a pas été déplacé dans le code HTML :/

      Supprimer
  17. Bonjour Catherine,

    J'ai suivi tout ton tuto qui est super et le pied de page se mets bien à 100% de la page par contre il y a un gros souci c'est que malgré le fait de l'avoir limité à 960px en largeur, le pied de page continue à faire ce qu'il veut et s'étire beaucoup, à tel point que sur grand écran mon blog est tout à gauche avec un énorme espace vide à droite. As tu une idée d'ou cela pourrait venir ?

    www.birdymarlowe.com

    Merci mille fois pour ton aide.
    Bises

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le fait de modifier la largeur du pied de page ne devrait pas affecter le reste du blog.
      J'ai regardé ton code et j'ai trouvé ceci :

      .content-outer {
      -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
      -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
      -goog-ms-box-shadow: 0 0 0 #333333;
      box-shadow: 0 0 0 rgba(0, 0, 0, .15);
      margin-bottom: 1px;
      margin-top: -20px;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      }

      Le problème vient de ces 2 lignes :

      margin-left: 0 !important;
      margin-right: 0 !important;

      Remplace leur valeur 0 par auto et voilà ;)

      Supprimer
  18. Bonjour :)

    J'ai suivi le tutoriel mais je n'arrive pas à copier : ...
    quand j'essaye de le recopier, il apparait comme ceci :

    Merci beaucoup ! :)

    RépondreSupprimer
    Réponses
    1. Oui ce n'est pas facile de copier le code. Il faut aller un peu vite pour éviter que le code s'ouvre quand on le sélectionne :/

      Supprimer
  19. Bonjour !
    J'ai un soucis avec mon blog. Ca concerne le pied de page mais je pense à la base à mon contenu. Je voudrais avoir un espace entre le menu en haut et le footer en bas. Pour le haut j'ai réussi mais ça mange mon footer... Aurais tu une solution ?
    Merci :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour ajouter un espace au-dessus du pied de page il faut ajouter :

      margin-top: 50px; /* Espace au-dessus du pied de page */

      Avant le signe } du code :

      footer {
      width: 100%;
      height: 300px;
      bottom: 0px;
      }

      Comme ceci :

      footer {
      width: 100%;
      height: 300px;
      bottom: 0px;
      margin-top: 50px; /* Espace au-dessus du pied de page */
      }

      Modifie la valeur de 50px pour augmenter ou diminuer cet espace.

      Si tu veux ajouter un espace entre le menu et ton contenu, il faut le déplacer en dehors du contenant, comme tu as fait pour ton en-tête. Au lieu de définir la largeur du menu à 100%, on peut limiter sa largeur à celle de ton contenu : 1200px

      Une fois que tu à déplacé ton menu sous ton en-tête, ajoute le code CSS suivant :

      .tabs-outer {
      max-width: 1200px;
      width: 100%;
      margin: 0 auto;
      }

      Juste au-dessus de la ligne :

      /* Content

      Supprimer
  20. Bonjour :) ! Finalement,j'ai réussi à faire tout le tutoriel mais je ne penses pas mon pied de page est à 100% ? Je dois peut-être attendre ? Ou mettre 1060px au lieu de 960px ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      En regardant ton blog je remarque tu tu n'as pas déplacé ton pied de page. Au lieu de couper et coller le code en dehors du contenant de ton blog, tu l'as copié. Du coup ton pied de page n'as pas bougé et tu en as un 2e, vide, en dehors du contenant du blog.
      Essaye à nouveau mais en coupant ton pied de page actuel et en le collant à sa nouvelle position ;)

      Supprimer
  21. Bonjour,

    J'ai essayé de suivre tes instructions mais là, je bug un peu. Rien à changé pour le pied de page. Pourrais tu voir ce qui cloche stp ? J'ai du coup restauré. Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Retrouve ton code :

      .footer-outer {
      max-width: 1450px; /* Largeur maximale du contenant à l'intérieur du pied de page */
      margin: 0 auto;
      margin: -0 0 -1px;
      padding: 0 0 0;
      color: #666666;
      overflow: hidden;
      }

      Supprime la ligne :

      margin: -0 0 -1px;

      Cette ligne entre en conflit avec la ligne qui la précédait.
      Ceci permettra de centrer le contenant dans ton pied de page.

      Ensuite il faudra changer la couleur de fond de ton pied de page pour la même que le contenant. Rajoute ceci :

      background: #d2cee5;

      Avant le signe } de ton code :

      footer {
      width: 100%;
      }

      Comme ceci :

      footer {
      width: 100%;
      background: #d2cee5;
      }

      Supprimer
  22. Merci, mais j'abandonne. Y a rien à faire. J'ai encore suivi ce que tu viens de mettre. Retirer la ligne margin: -0 0 -1px;
    mais le pied de page ne s'étire pas à 100%
    Je reviendrai dessus un autre jour :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      En regardant ton code je vois toujours la ligne suivante :

      margin: -0 0 -1px;

      Dans ce code CSS :

      .footer-outer {
      max-width: 1450px; /* Largeur maximale du contenant à l'intérieur du pied de page */
      margin: 0 auto;
      margin: -0 0 -1px;
      padding: 0 0 0;
      color: #666666;
      overflow: hidden;
      }

      Es-tu sûre d'avoir bien sauvegardé après la modification ?
      Et d'avoir changé la couleur de fond du pied de page ? Car en regardant ton blog ce n'est actuellement pas le cas ;)

      Supprimer
  23. Bonjour, j'essaye depuis quelques heures en vain de faire mon footer à 100% de ma page mais sans succès ... c'est la catastrophe sur mon blog, entre ma barre de navigation qui se sépare mal en deux, et mon pied de page, je ne m'en sors pas du tout concernant ce nouveau design ... pourrais-tu me venir en aide s'il te plait ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Effectivement ton pied de page est complètement décalé par rapport à la partie contenu de ton blog. Du coup on ne voit plus les liens de navigation (Accueil, Articles plus anciens, etc.).

      Tout d'abord retrouve le code commençant par :

      .content-outer {

      Avant le signe } de ce code tu trouveras une ligne commençant par :

      margin-bottom:

      Modifie sa valeur par 0 comme ceci :

      margin-bottom: 0;


      Ensuite si tu souhaites que ton gadget Instagram prenne toute la largeur de ton blog, retrouve ce code CSS :

      .footer-outer {
      max-width: 1060px; /* Largeur maximale du contenant à l'intérieur du pied de page */
      margin: 0 auto;
      }

      Supprime la ligne :

      max-width: 1060px; /* Largeur maximale du contenant à l'intérieur du pied de page */

      Comme ceci :

      .footer-outer {
      margin: 0 auto;
      }

      Maintenant vas dans le gadget HTML/JavaScript de ton gadget Instagram.
      Tu devrais avoir ceci :

      <!-- SnapWidget -->
      <iframe src="http://snapwidget.com/in/?u=amVhbm5lX21yZHxpbnwyNTB8OHwxfHxub3w1fGZhZGVPdXR8b25TdGFydHx5ZXN8bm8=&amp;ve=111215" title="Instagram Widget" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:2040px; height:255px"></iframe>

      Remplace ce code par :

      <!-- SnapWidget -->
      <iframe src="http://snapwidget.com/in/?u=amVhbm5lX21yZHxpbnwyNTB8OHwxfHxub3w1fGZhZGVPdXR8b25TdGFydHx5ZXN8bm8=&amp;ve=111215" title="Instagram Widget" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; height:255px"></iframe>

      Et voilà ;)

      Supprimer
    2. Merciiiiiii beaucoup ça a super bien fonctionné ! Je n'aurais jamais trouvé tous ces problèmes toute seule ! :)

      Supprimer
  24. Bonjour! :)

    J'ai beau changer la valeur de 1060px par celle correspondant à mon blog (1020px), ça ne veut pas bouger d'un pouce... Même en mettant !important, ça refuse de s'ajuster par rapport à la page. (A tel point que lorsque je dézoome la page au niveau du navigateur, ça ne cesse pas de s'étirer... ><)
    Aurais-tu une idée du pourquoi?

    http://anskarad.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      En regardant ton blog le contenant à l'intérieur de ton footer est bien à 1020px de large. Les gadgets ne dépassent pas la largeur de ton blog. Et le pied de page est bien à 100% car le fond de couleur prend la largeur de la page. As-tu réglé le problème ? :)

      Supprimer
  25. Bonjour, oui j'ai pu régler le problème, finalement! :)
    Il me semble que c'était un problème d'actualisation qui refusait de passer, tout bêtement. ^^

    RépondreSupprimer
  26. Bonjour, j'ai essayé de faire ceci sur mon blog test (http://blogtestmiss.blogspot.fr/), mais je crois que cela n'a pas fonctionné. Car j'ai mis un gadget code html, pour mettre design by.. et le fond de ce gadget ne prend pas toute la largeur alors que j'aimerai bien que ça le fasse. Et j'aimerai bien réduire l'espace entre ce gadget et le bas de l'écran est-possible, car je trouve l'espace blanc trop grand. Et est-ce possible que mon gadget instagram prenne toute la largeur aussi ? Car j'ai essayé et je n'ai pas trouvé de solutions. J'espère que tu va trouver une solution & merci d'avance ! ;)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ton pied de page ne semble pas être à 100% de la page à cause de différentes marges.

      Ajoutes ces codes CSS :

      body {
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-bottom: 0 !important;
      }

      .footer-inner {
      padding: 0 !important;
      }

      .foot.section {
      margin: 0 !important;
      }

      Avant la ligne :

      ]]></b:skin>

      Supprimer
    2. Merci beaucoup ça a fonctionné !
      Et merci beaucoup pour tous tes tutoriels, car grâce à eux, à tes conseils & astuces, j'ai pu me créer un nouveau design digne de ce nom, et cela n'aurait pas été possible sans ton blog ! Alors t'inquiete pas tu sera dans un de mes prochains articles quand je parlerai de mon nouveau design, car tu effectue un travail extraordinaire ! Bravo ! ;)

      Supprimer
  27. Bonsoir! ^^

    J'aimerais savoir s'il est possible de "sortir" la colonne de droite (où j'ai tous mes gadgets), un peu comme le footer et le header, pour que les gadgets puissent "flotter" dans le background de la page/ blog et qu'au passage, ça augmente la distance entre ma colonne d'articles (posts) et la colonne de droite? Histoire qu'ils se mangent pas entre eux comme c'est le cas actuellement. (Je suis toujours obligée de caler mes images à gauche dans mes articles, sans quoi ça s'empiète sur les widgets.. :/)

    J'ai essayé de bidouiller un peu, en utilisant ce tuto sur mon blog test mais j'obtiens pas tout à fait ce que je veux. (J'ai le bord blanc sur le côté droit de ma colonne, et le côté gauche mange la colonne centrale de mes articles... )
    Aurais-tu une solution? :/
    http://anskaradtest.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Seuls les lecteurs sont autorisés à voir ton blog test, peux-tu m'envoyer une invitation pour que je puisse regarder ça ?

      Supprimer
    2. J'ai changé les paramètres du blog test, je ne sais pas comment envoyer une invitation à être lecteur. ^^'

      http://anskaradtest.blogspot.fr/

      Supprimer
    3. Malheureusement il n'y a pas de solution simple à ton problème. Il faudrait modifier directement la structure HTML du blog :/

      Par contre pour éviter que tes images dépassent des articles il suffit d'ajouter le code CSS suivant :

      .post-body img {
      max-width: 100%;
      height: auto;
      }

      Avant la ligne :

      ]]></b:skin>

      Comme ça, même si tu met tes images en mode Taille Originale, les photos ne dépasseront pas sur le blog.

      Supprimer
    4. D'accord... Je vais essayer ce code, merci! :)

      La structure HTML d'un blog, c'est pas le code HTML que l'on utilise pour le template? (avec ]]> , etc...? :/

      Supprimer
    5. Le thème des blogs comportent les codes HTML qui définissent la structure du blog et les codes CSS qui définissent le visuel, l'apparence et un peu de mise en page, de tous les éléments HTML.
      Comme il y a des lecteurs de tous niveaux en codage, j'explique généralement comment modifier l'apparence des éléments avec le CSS pour éviter de trop toucher à la structure HTML du blog ;)

      Supprimer
  28. Bonjour (:
    Cela fait plusieurs jours que j'avance sur mon design grâce à tes super tutoriels, dont je te remercie énormément, et je suis un peu en galère depuis 3j sur mon footer. J'avais réussi à le mettre à 100% puis un espace disgracieux est apparu sur le côté et ça m'a ajouté un overflow en bas de la page, j'ai passé 2j à essayer tout et n'importe quoi sans succès, là j'ai réussi à virer l'overflow du bas grâce à un code que tu as donné en commentaire mais le footer ne fait toujours pas 100% de la page chez moi.
    J'espère que tu pourras m'aider à résoudre ce problème (:
    Mon blog est bloqué aux visiteurs donc je vais t'envoyer une invitation.
    Merci d'avance (:

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Envoie-moi une invitation au blog pour que je puisse regarder ;)

      Supprimer
  29. Bonjour Catherine,
    Je t'écris un second commentaire sur cet article, car j'ai bien réussi à mettre à 100% de la page, cependant j'ai le même souci que sur mon précédent commentaire concernant l'en-tête, ici avec le pied de page, il reste un "coutour" du fond du blog sur chaque côté. Ce qui fait que ce n'est pas réellement à 100%... Pourrais-tu m'aider? Et j'aimerais aussi pouvoir faire un espace entre le corps de mon blog et le pied de page, comme avec l'en-tête, comment puis-je faire? Merci beaucoup!!

    http://Gwylind.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je viens de répondre à ton commentaire précédent : http://ladybirdr.blogspot.fr/2015/08/modifier-la-largeur-de-len-tete-et-du.html?showComment=1458580631119#c6206292197391345774

      La réponse réglera le problème de l'espace autour de ton pied de page ;)

      Pour ajouter un espace au-dessus de ton pied de page, ajoute la ligne :

      margin-top: 30px;

      Avant le signe } ton code CSS :

      footer {
      width: 100%;
      }

      Supprimer
  30. Merci, tout est réglé! Tes conseils et tutos sont vraiment géniaux :)

    RépondreSupprimer
  31. Bonjour,
    Je ne parviens pas à coller le code qui permet de déplacé le pied de page en dehors du blog, une seule partie du code se colle à l'endroit indiqué.
    Je débute sur blogger et j'ai encore beaucoup de mal avec tout ces codes, de plus dans ma barre de navigation, les onglets reviennent à la ligne. Enfin, j'ai l'impression que mon blog est moi large qu'avant.
    Je ne comprends plus rien, j'espère avoir été assez claire pour obtenir de l'aide.
    Merci d'avance;

    http://em-avie.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Emma,
      Ce n'est pas évident de couper le code. Il faut bien surligner tout le code à partir de <footer> jusqu'à </footer>.
      As-tu réglé le problème des liens de ton menu ? Ils semblent bien sur une même ligne.

      Supprimer
  32. Bonjour Catherine. Déjà merci pour tout ces tutos en or. J'ai un petit soucis avec la partie de mon footer: même en suivant tes instructions les gadgets ne se limitent pas à la largeur du contenant, ils s'étale sur toute la largeur du blog. Si tu pouvais m'aider à déterminer ce qui cloche ça serait adorable.
    Bisous

    > http://plumesandclouds-test.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Le lien de ton blog ne marche pas :/

      Supprimer
  33. Bonjour,

    J'ai tenté de réaliser ce tutoriel et celui de l'en-tête aujourd'hui rien ne change visuellement quand j'applique ces deux tutoriels. Hier encore pour l'entête ça avait marché mais ça annulait tous mes codes précédents (le déplacement de la date, le titre derrière l'image qui apparait alors que d'habitude non, toutes les polices avaient changé etc...) alors j'ai annulé toutes mes modifications. J'ai voulu re essayer aujourd'hui et là rien ne change. Du coup j'ai annulé les codes mais j'aimerais tellement pouvoir les appliquer :( Merci de ta réponse.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il y a une erreur dans tes 2 derniers codes CSS. Retrouve ces codes :

      .post-labels a:hover {
      background-color: #ffffff; /* Couleur du fond */
      color: #484848; /* Couleur des liens au survol de la souris */
      text-decoration: none; /* Supprime le soulignement du texte */
      .content {
      margin-top: -30px;
      }
      }

      Le code suivant :

      .content {
      margin-top: -30px;
      }

      Est à l'intérieur du code précédent : il se trouve avant le signe }
      Remplace ces codes par :

      .post-labels a:hover {
      background-color: #ffffff; /* Couleur du fond */
      color: #484848; /* Couleur des liens au survol de la souris */
      text-decoration: none; /* Supprime le soulignement du texte */
      }

      .content {
      margin-top: -30px;
      }

      Une erreur (oubli de signe ou un signe en trop) peut causer ce genre de problèmes. Tout ce qui suit l'erreur, est mal ou pas pris en compte. Si le problème persiste, vérifie qu'il ne manque pas un signe ou qu'il n'y ai pas de signe en trop, même dans les codes CSS qui précédent ceux que tu vient d'ajouter ;)

      Supprimer
  34. Bonjour Catherine,
    Tout d'abord un IMMENSE merci pour tes tuto et tes astuces, c'est très clair, extrêmement bien présenté et soigné ! Ça m'a été très utile (je dirais même essentiel) pour créer mon blog de voyage ! J'ai combiné 2 de tes tutos pour modifier mon pied de page et y ajouter un widget instagram en forme de bandeau déroulant. Le problème c'est que j'aimerais qu'il fasse toute la largeur du pied de page et qu'il est malheureusement coupé sur les côté. J'ai tenté de modifier les dimensions du widget mais rien n'y fait... Pourrais-tu m'aider ? Voilà mon blog : https://bonjourjosette.blogspot.com
    Merci d'avance, bonne soirée :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu as délimité la largeur de ton pied de page à 1130px. Son contenu ne peut donc aps prendre toute la largeur de la page.
      Retrouve ce code CSS :

      .footer-outer {
      max-width: 1130px; /* Largeur maximale du contenant à l'intérieur du pied de page */
      margin: 0 auto;
      }

      Remplace 1130px par 100%.

      Supprimer
    2. Ensuite rajoute les codes CSS suivants :

      .region-inner.footer-inner {
      padding: 0;
      }

      #footer-1 {
      margin: 0;
      }

      Avant la ligne suivante de ton code :

      ]]></b:skin>

      Supprimer
  35. Bonjour Catherine, j'ai repris plusieurs fois ce tuto mais je n'ai pas réussi, il y a des marges à coté de mon pied de page. Je ne sais pas si le problème vient du déplacement du pied de page, ou si un code bloque quelque chose à un endroit.
    Mon bloc c'est bordelutopique.blogspot.fr
    De mémoire j'avais aussi eu des soucis avec l'en tête pour la mettre à 100%. Et je n'ai pas trouvé le " .footer-outer { " j'ai du moi même l'ajouter du coup je ne comprends pas trop !

    RépondreSupprimer
    Réponses
    1. Bonjour Romane,
      Ton pied de page est bien à 100% de largeur, mais la couleur de fond est différente de celle du contenant des gadgets. Retrouve ce code CSS :

      footer {
      width: 100%;
      }

      Ajoute la ligne :

      background-color: #474254; /* Couleur de fond du pied de page */

      Avant le signe } comme ceci :

      footer {
      width: 100%;
      background-color: #474254; /* Couleur de fond du pied de page */
      }

      Et voilà ;)

      Supprimer
  36. Coucou Catherine, je voulais savoir comment faire ceci sur wordpress stp ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Malheureusement cela dépend complètement de ton thème Wordpress. Il n'y a pas de solution universelle, et c'est plus complexe de modifier un thème Wordpress.
      Tous mes tutoriels sont conçus pour des thèmes basiques sur Blogger ;)

      Supprimer
  37. Oh je n'avais pas vu que tu m'avais répondu ! Merci beaucoup ça a marché du coup ahah je me suis pris la tête là dessus, comme quoi le codage ça s'invente pas ;)

    RépondreSupprimer
  38. Bonsoir,
    Tout d'abord merci beaucoup pour ces tutos très bien expliqués!
    J'ai un petit problème, en fait mon pied de page ne s'étend pas à 100% de la page, alors que j'ai bien tout suivi.
    Est-ce que vous pouvez me dire d'ou vient le problème? Merci.
    https://lespenseesdunelune.blogspot.com/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Ton pied de page est bien à 100% de largeur car si tu changes la couleur de fond du pied de page il s'étend bien aux bords de la page. Ajoutes ce code CSS par exemple :

      footer {
      background: #5a5a5a;
      }

      Avant la ligne :

      ]]></b:skin>

      Pour changer la couleur de fond du pied de page.

      Supprimer

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger