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


Suite au changement du thème de mon blog, j'ai eu envie de partager avec vous en détail quelques astuces pour customiser ou personnaliser son blog.

Voici donc le tout premier tutoriel d'une série sur comment personnaliser son blog : Tuto Blog #1


Commençons par des choses fondamentales. C'est-à-dire, la première chose que je fais quand je modifie un modèle de blog sous Blogger : enlever cette barre de navigation hideuse en haut de la page !


Commencez par vous connecter sur Blogger pour arriver sur le tableau de bord.

1re étape avant de modifier quoi que ce soit sur votre blog : Faire une sauvegarde en cas d'erreur !
Pour cela cliquez sur l'onglet Modèle dans le menu de gauche, puis sur Sauvegarder/Restaurer :


Une fenêtre pop-up apparait comme ci-dessous.

Cliquez sur Télécharger le modèle complet pour le sauvegarder sur votre ordinateur. Puis cliquez sur Fermer :


On peut maintenant passer aux choses sérieuses ;)

Cliquez sur l'onglet Mise en page du menu sur la gauche de l'écran, puis sur Modifier sur le gadget Navbar :


Une fenêtre pop-up s'ouvrira comprenant les options de la Navbar. Cochez la case Désactivé puis cliquez sur Enregistrer :


En affichant votre blog vous verrez que la barre de navigation blogger en haut de votre blog à maintenant disparu !

Mais ce n'est pas fini ! Car maintenant il y a un espace entre le haut de la page et votre header... C'est pas très classe, alors on va l'enlever.


Cliquez sur l'onglet Modèle dans le menu sur la gauche du tableau de bord, puis sur Modifier le code HTML :


Repérez la ligne de code :
 <b:skin>...</b:skin>
Et cliquez sur le triangle noir à sa gauche :


On va cherche le code CSS, c'est-à-dire le code qui défnit le visuel de notre blog, qui correspond à la page du blog.

Pour ceci on va faire une recherche : cliquez n'importe où dans la boite de code, puis appuyez sur Ctrl et F en même temps. Une fenêtre de recherche apparaît en haut à droite de la boîte comme ceci :


Tapez content-outer et appuyez sur Entrer.
Vous serrez redirigé automatiquement au code que l'on recherche !


En va déplacer notre page vers le haut de 30 pixels, pour cela juste en dessous de la ligne :
margin-bottom: 1px;
Ajoutez le code suivant au même endroit qu'indiqué ci-dessous :
margin-top: -30px;
Pour vérifier si tout à bien fonctionné, cliquez sur Prévisualiser le modèle en haut à droite.
Vous devriez ne plus voir la bande de fond entre la page et le blog.


Pour finir n'oubliez surtout pas de sauvegarder ! Sinon il faudra tout recommencer ;)
Cliquez sur Enregistrer le modèle, et voilà ! Plus de barre de navigation (Navbar) Blogger !


Alors, vous l'avez trouvé comment ce premier numéro de Tuto Blog ?

Si vous avez une question par rapport au tutoriel n'hésitez pas à poster un commentaire ;)

Autres articles

115 commentaires:

  1. Super! Merci pour ce tuto! J'ai réussit à enlever la Navbar, mais par contre, pour remonter la bannière je n'y arrive pas. Je n'ai pas trouvé le code dont tu parles...j'ai pourtant suivi tes instructions à la lettre.
    Tant pis! C'est déjà bien! ^^

    RépondreSupprimer
    Réponses
    1. Je viens de faire une petite découverte. Je suis allée sur ton blog et j'ai remarqué que ton Modèle Blogger n'était pas le même que le mien : tu as un modèle Filigrane et moi un modèle Simple. Du coup le code est légèrement différent mais tu devrais quand même retrouver le .content-outer , la seule chose qui change c'est le code à l'intérieur des { } . Mais c'est pas grave, quelque soit le code entre crochets, il te suffit d'ajouter le code :

      margin-top: -30px;

      juste avant le dernier crochet }


      J'ai regardé sous ton modèle et je trouve ceci :

      .content-outer {
      font-size: 92%;
      }

      il faut donc le changer pour ceci :

      .content-outer {
      font-size: 92%;
      margin-top: -30px;
      }

      Supprimer
    2. Merci , super utile !

      Supprimer
  2. J'adore! j'était en train de galerer et là je suis contente de voir que quelqu'un a eu l'excellente idée de partager cet astuce avec les autres. merci!

    RépondreSupprimer
  3. Bonjour,
    super ces tuto blog ! je débute et c'est parfait pour obtenir ce que je cherche!
    j'aimerais aussi supprimer les contours du titre de mon blog qui est une image, et faire quelque chose de pratique, simple et joli pour ma barre des catégories, pourrais tu me donner un coup de main ?
    Bonne soirée,
    Floriane

    RépondreSupprimer
    Réponses
    1. Bonjour Floriane,
      Je suis contente d'avoir pu t'aider :)

      Pour les contours de ton titre cela vient de ton image, il faut que tu élimines les bords de l'image avec un logiciel de retouche d'image (même paint suffit). Si tu as besoin d'aide pour le faire je peux t'aider.

      Pour ta barre de catégories je pense que tu pourrais la centrer et enlever la bordure de la barre entière, mais sinon je la trouve bien :). Si tu n'as pas d'idée précise tu peux chercher l'inspiration sur d'autres blogs, ou en tapant "inspiration blog design" ou simplement "blog design" sur Pinterest ou Google. Tu peux aussi regarder les modèles sur Etsy. Il y en as de très beaux :)

      Je vais bientôt faire un post sur la customisation de la barre de navigation, j'espère que ça t'aidera :)

      Bonne journée :)

      Supprimer
  4. A quand le deuxième tuto! Super ;-) http://mademoiselle-litterature.blogspot.com

    RépondreSupprimer
  5. ah ben merci pour ça aussi car j'avais du mal avec mon header

    RépondreSupprimer
  6. Un super tutoriel, très bien expliqué et très simple à appliquer.
    Qui plus est, j'aime beaucoup ton blog :)
    Merci encore pour toutes tes explications !

    Alice.

    RépondreSupprimer
  7. Merci pour ces tutos ! tu expliques super bien ! Je vais maintenant m'atteler a essayer de faire une barre de menus...

    RépondreSupprimer
  8. Merci beaucoup pour tous ces tutos

    RépondreSupprimer
  9. Bonjour,

    Etant nouvelle dans l'univers du blog, je tenais à te dire un grand merci pour ce tutoriel car il est juste super. J'ai suivi toutes les étapes et c'est tout bon pour moi. Je vais voir les autres tuto pour poursuivre la customisation de mon blog.

    Merci encore :-)

    RépondreSupprimer
  10. Merci, merci, merci, super pratique

    RépondreSupprimer
  11. Merci beaucoup pour ce tuto ! :)

    RépondreSupprimer
  12. Merci de ce petit tuto ; mon blog est beaucoup plus beau sans cette barre !

    RépondreSupprimer
  13. Merci! Tu as expliqué pas à pas et c'est top!! J'ai même réussi lol

    RépondreSupprimer
  14. merci pour ces explications ....et intéressant mais avant de me lancer ; une question me trotte dans la tête : on se déconnecte comment?
    merci pour la réponse

    RépondreSupprimer
    Réponses
    1. Salut Sampiero, tu peux te déconnecter de Blogger sur le tableau de bord Blogger. Là où tu retrouve la liste de tes blogs. En haut à droite de l'écran il y a ton image de profil. Clique dessus et tu trouveras un bouton Déconnecter :)

      Supprimer
  15. Après avoir avoir parcouru tes nombreuses pages "Modifier votre Blogger", je te remercie et félicite pour ces nombreuses pages très instructives. :)

    RépondreSupprimer
  16. Génial merci. Par contre, cela fait des jours que je cherche comment rendre le fond de mon blog 100% blanc. Aurais-tu une astuce? Mon blog est www.lacuisinecestsimple.com
    Mille mercis.

    RépondreSupprimer
    Réponses
    1. Bonjour Myriam,

      Le fond de ton blog est déjà 100% blanc. On a l'impression qu'il ne l'est pas à cause de la bordure diffuse à gauche et à droite de ton blog.

      Si tu veux les enlever il faut modifier un bout de code.
      Va dans Modèle à partir du tableau de bord, puis dans Modifier le code HTML.
      Clique sur le rectangle noir à gauche de :

      <b:skin>...</b:skin>

      Si tu ne le trouves pas c'est que cette partie est déjà ouverte, passe à l'étape suivante.
      Clique n'importe où dans la boîte de code et appuie sur Ctrl et F en même temps.
      Une boîte de recherche apparaît en haut à droite de la boîte de code. Colle ceci :

      .content-outer {

      Et appuie sur Entrer.

      Tu devrait tomber sur le code suivant :

      .content-outer {
      -moz-box-shadow: 0 0 40px rgba(0, 0, 0, .15);
      -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
      -goog-ms-box-shadow: 0 0 10px #333333;
      box-shadow: 0 0 40px rgba(0, 0, 0, .15);
      margin-bottom: 1px;
      margin-top: -30px;
      }

      Remplace tout ce code par celui-ci :

      .content-outer {
      box-shadow :none;
      margin-bottom: 1px;
      margin-top: -30px;
      }

      Enregistre, et voilà ! :)

      Supprimer
    2. Tout a super bien fonctionné. Mille mercis et je te recontacte en janvier.
      Myriam

      Supprimer
  17. Super Tuto, Ma question se rapproche de ce tuto...
    Comment puis-je remplacer la Navbar par une autre barre de menu? Plus ou moins comme tu as fait sur ton blog maintenant...
    Merci à toi.

    RépondreSupprimer
    Réponses
    1. Salut Marc,
      Je vais faire un tutoriel expliquant comment faire :)

      Supprimer
    2. Merci, c'est super :) j'ai hâte

      Supprimer
  18. Excellent tutos ! J'adore ! Merci beaucoup !!!
    Grâce à tes explications simple et efficace, j'arrive petit à petit à créer mon site :)
    Cependant, est ce que tu sais comment peut - on enlever le nom du blog qui s'affiche en en tete pour le remplacer par mon header ? (merci pour ta réponse)

    RépondreSupprimer
    Réponses
    1. Salut Kelly,
      On peut remplacer le titre et la description du blog par une image en tant que header. Pour ça il faut aller dans Mise en Page, puis clique sur Modifier sur ton en-tête (là où il y a le titre de ton blog).
      Ici tu peux choisir une image en guise de header, et la placer derrière le titre ou la substituer au titre :)

      Supprimer
    2. Génial, merci beaucoup pour ta réponse !

      Supprimer
  19. Juste un grand bravo pour tout ce boulot et un grand merci pour le partage dont tu fais preuve. Je laisse rarement des commentaires mais la vraiment ca mérite d'être dit !! Super !!

    RépondreSupprimer
  20. Bonjour,
    franchement... Merci beaucoup pour tous ces tutoriels, tu m'as tellement aidée !
    Tu expliques vraiment bien les choses.
    Alors merci d'avoir pris le temps avec tous tes tutoriels !

    RépondreSupprimer
  21. très bien fait et très pratique
    MERCI !

    RépondreSupprimer
  22. Hello Lady Bird, je suis super contente d'avoir découvert ton blog et tes tutos pour Blogger ! Yen a que pour Wordpress sur la bloggosphère, ça fait plaisir de voir qu'on peut faire un joli blog avec blogger. Merci ton premier tuto est top !

    RépondreSupprimer
  23. Coucou =)
    Vraiment, merci beaucoup, tes explications sont très clairs et facile à appliquer !
    Je vais de ce pas aller explorer tout tes tutoriels qui vont m'être très utile =)

    RépondreSupprimer
  24. Coucou !
    Tout d'abord, merci beaucoup pour tous tes tutos, ils sont vraiment bien fait, très clairs et bien expliqué :) !
    Je voudrais juste te poser une petite question : quel est ton modèle de blog de base ?

    RépondreSupprimer
    Réponses
    1. Salut Sweet Peacock !
      J'ai utilisé le modèle Simple de Blogger, celui sans fond (tout blanc dans l'aperçu), que j'ai ensuite modifié pour donner ceci :)
      J'utilise toujours ce modèle car c'est une page vierge que l'on peut personnaliser à souhait :)

      Supprimer
  25. Bonjour,
    J'ai tenté de le faire. Pour enlever la Navbar par de souci, c'est ultra simple mais alors la marge, elle, ne veut jamais se réduire.. Comment ça se fait??
    Merci de tes réponses :)

    RépondreSupprimer
    Réponses
    1. Bonjour Gwen,
      D'après ce que je peux voir tu as écris margin-bottom au lieu de margin-top ;)

      Supprimer
  26. Je me lance enfin pour refaire le design de mon blog de A à Z, je n'aurais jamais pensé pouvoir supprimer cette affreuse barre ! Merci :)
    Tes tutos sont tellement bien que je vais partir de la fin, pour revenir au plus récent pour changer tout ça ! :D
    Merci beaucoup ! :)

    RépondreSupprimer
  27. Bonjour,
    Je viens de découvrir ton blog et j'ai envie de tout tester mais je commence par le début et je bloque déjà impossible d'obtenir l'aperçu du modèle avant enregistrement du coup je n'ose pas enregistrer les modifs de peut d'avoir fait une boulette:!!!

    RépondreSupprimer
    Réponses
    1. Tu peux faire une sauvegarde de ton thème avant chaque modification (c'est même fortement conseillé !). Comme ça si tu te plantes alors il suffira de réinstaller la sauvegarde et tout reviendra dans l'ordre :)
      Pour ce faire, avant de faire des modifications cliques sur Modèle puis sur Sauvegarder/Restaurer. Cliques sur Télécharger le thème complet et sauvegardes le fichier de ton thème sur ton ordinateur.
      Tu peux ensuite commencer les modifications.
      Pour restaurer ton thème en cas d'erreur, cliques à nouveau sur Sauvegarder/Restaurer puis sur Choisissez un fichier. Sélectionnes le fichier de ton thème, cliques sur Ouvrir puis Transférer. Et voilà ! :)

      Supprimer
    2. Merci beaucoup pour ta réponse, j'ai enfin réussis à supprimer la navbar mais je n'ai pas pu supprimer l'espace au dessus de la bannière, je me demande si ça ne vient pas de ma bannière et de sa dimension en fait !!!

      Supprimer
    3. Vas dans Modèle puis Modifier le code HTML. Cliques sur le triangle noir à gauche de <b:skin>...</b:skin> puis appuies sur Ctrl et F en même temps. Dans la boîte de recherche colles :

      /* Content

      Juste au-dessus de cette ligne colle le code suivant :

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

      Ça devrait régler le problème :)

      Supprimer
  28. Merciiiiii beaucouuuup ça a fonctionné, je suis trop contente il faut dire que je galère depuis 2 jours sur tout t tutos (qui sont d'ailleurs super bien fait c'est moi que patauge!) alors je saute au plafond dès que je réussi une manip!
    Je pense à très vite pour d'autres questions, merci pour ta disponibilité je m'attaque au Favicon ce n'est pas gagné!

    RépondreSupprimer
  29. Coucou

    J'ai eu beau lire et relire, je ne trouve pas ou je dois mettre le "margin-top: -30px;"

    j'ai même vu la réponse que tu as mis à un commentaire au sujet d'un modèle filligrane....

    si tu peux m'aider merci d'avance

    pareil la navbar j'ai pas eu de soucis....

    www.lecan-ddressing.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Can-D,
      Il me semble que tu as réglé le problème :)

      Supprimer
  30. Très bon tutoriel surtout pour la partie CSS que peut de personnes connaissent!

    RépondreSupprimer
  31. Merci pour ce super tuto ! :D
    Je viens de créer mon blog sous blogger et grâce à tes tuto je me suis amusée à faire quelques petites modifs pour l'améliorer

    RépondreSupprimer
  32. Merciiiiii ! ton blog est tellement bien :) c'est cool de pouvoir customiser son blog même en ne sachant pas coder.... et c'est euphorisant d'aller triturer dans le code html grâce à tes explications super claires ! Merci de prendre le temps de nous expliquer toutes tes astuces.
    Bonne continuation :) j'ai hâte de voir la suite

    RépondreSupprimer
  33. Yess, !!
    je découvre aussi et ça faisait un moment que je voulais réduire cet espace vide en haut du titre (ben tout simplement pour que la page s'affiche plus haut pardi !)
    Et, petite bidouille en plus, je voulais réduire l'espace en bas aussi tant qu'à faire alors avec le peu neurones qui me reste j'ai pensé à ajouter juste en dessous de
    margin-top: -30px;
    et bien tout simplement :
    margin-bottom: -30px;
    Et Ça Marche !!!
    Génial je suis le maître de mon blog .... même pas peur de trifouiller dans le html !!

    Merci pour ce tuto très bien coaché ! (surtout pour les images qui situent bien les zones de code à changer !)

    RépondreSupprimer
  34. ohlala merci cette Navgar affreuse je n'avais même pas fait attention que l'on pouvait la désactivée ^^ Merci !

    RépondreSupprimer
  35. Super top!!!! Merci! Cest tellement plus esthetique ! 💕

    RépondreSupprimer
  36. Merci pour ce tuto. C'est clair mais je n'ai pas trouvé le code pour remonter la barre. Mais c'est déjà bien d'avoir pu enlever la navbar.

    RépondreSupprimer
    Réponses
    1. Bonjour, si tu ne trouves pas le code tu peux rajouter le code suivant :

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

      Avant la ligne suivante :

      /* Content

      Supprimer
  37. Bonjour merci bcp pour ce conseil ! Par contre moi j'ai un autre pb, j'aimerai savoir comment faire pour centrer mes titres d'articles, mes libellés mais aussi mon titre de blog car tout est sur le côté gauche et je trouve ça pas très beau ... Merci pour ta réponse :)
    Lien de mon blog mode http://enjoyintheworld.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour, tu trouveras les explications pour modifier l'apparence (et donc centrer) les titres de tes articles ici : http://ladybirdr.blogspot.fr/2014/11/personnaliser-et-ajouter-une-image-aux.html

      Pour centrer le titre de ton blog bases-toi de ce même tutoriel mais en utilisant le code CSS suivant :

      header {
      text-align: center;
      }

      Quand tu dis "libellés" parles-tu des libellés en bas des articles, ou veux-tu parler de ton menu ?

      Supprimer
  38. Bonjour ! J'ai créé un blog très récemment et je te remercie énooormément pour tous les conseils que tu partages ici, c'est vraiment très généreux de ta part !
    Tous tes articles sont parfaitement clairs, je n'ai pas eu de fausse note en modifiant, les mains tremblantes, le code html de mon bébé blog !
    Encore merci ! Bonne continuation !

    RépondreSupprimer
  39. Super, j'ai réussi du premier coup. Je vais lire les autres tuto pour améliorer le blog des Crokeuses. Merci

    RépondreSupprimer
  40. Bonjour, un GRAND merci de nous faire partager tes astuces très précieuses, on sent que tu te mets à notre place, novice que je suis, grâce à toi je m'accroche et ne baisse pas les bras car j'ai parfois l'impression d'être dans Matrix avec tous ces codes qui me donnent des suées!
    Bonne continuation.

    RépondreSupprimer
  41. Super article, très bien expliqué, super utile :)

    RépondreSupprimer
  42. j'ai correctement enlevé la navbar, mais comment modifier mon blog maintenant ? Je n'ai plus "conception", ce que j'avais dans ma navbar. Tu sais ou je peux modifier mon blog ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux accéder à l'outil Personnalisation en allant dans Modèle à partir de ton tableau de bord, puis en cliquant sur Personnaliser.
      Si tu souhaites modifier le code HTML ou CSS de ton blog, alors cliques sur Modifier le code HTML ;)

      Supprimer
  43. Hello!
    J'ai utilisé plusieurs de tes tutoriels pour mettre en page mon blog. Merci beaucoup! Je voulais juste savoir si le fait d'avoir supprimé l'attribution et les libellés avait une incidence sur le bouton " ajouter des commentaires" .Je viens de me rendre compte qu'il avait disparut.Saurais tu comment je peux le retrouver?Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Effectivement Blogger à quelques problèmes d'éléments qui disparaissent sans raison, ou qui ne veulent pas disparaître dans le pied d'article.
      Pour régler le problème il faut rajouter manuellement le code HTML du lien des commentaires. Je peux régler le problème pour toi si tu le souhaites, par prestation. Il suffit de m'envoyer un message avec le formulaire de contact accessible par la page Design ;)

      Supprimer
  44. Bonjour !
    Encore une fois c'est un tutoriel tout à fait génial ! Et grâce à toi j'ai réussi à enlever cette Navbar qui m'énervée !
    Par contre je rencontre énormément de problèmes pour pleins de trucs, mais je pense parce que mon modèle c'est Etherée et pas Simple comme toi...
    Voilà,
    Bisous

    RépondreSupprimer
    Réponses
    1. Effectivement, je me base sur le modèle simple. Les autres modèles sont légèrement différents, mais ça ne devrait pas poser trop de problèmes.

      Supprimer
    2. J'ai réussi à m'y retrouver après un travail acharné donc ça va.
      Mais merci beaucoup pour tous ces tutos merveilleusement bien expliqués !

      Supprimer
  45. Merci pour tous tes tutos !
    J'ai un soucis... J'ai beau mettre le code et jouer sur le nombre de px, impossible de retirer la marge en haut ...
    Mon texte se remonte ça aucun soucis, mais la barre reste là...
    Besoin de ton aide d'experte ! :)

    http://red-vine.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      La barre que tu vois sur ton blog vient de l'image de fond de ton blog. Pour supprimer cette barre il faut changer le fond de ton blog.

      Supprimer
  46. Merci pour ces tutos!
    j'avais peur de m'aventurer dans les codes HTML mais expliqués comme tu le fais ca va mieux! :-D

    RépondreSupprimer
  47. Bonjour, super article mais je bloque total.. Je n'arrive pas à l'enlever, enfin la première étape si, mais pas la deuxième je ne trouve pas le code.. Serait-il possible d'avoir un coup de pouce ?

    RépondreSupprimer
    Réponses
    1. Bonjour Mary,
      Peux-tu me donner le lien de ton blog pour que je puisse voir le problème ?

      Supprimer
  48. Merci! C'est effectivement bien plus joli sans cet espace blanc. Tuto très facile à suivre! Bravo

    RépondreSupprimer
  49. Salut!
    Merci pour les tutos, je vais éculer ton blog!

    RépondreSupprimer
  50. Bonjour, je viens de decouvrir ton blog magnifique et si pratique dans les conseils et explications. Tu fais du beau travail, bravo. Cependant je suis novice en matiere de html etc d ou l etat un peu brut de mon blog. J y travail lá dessus dés que j ai le temps, j ai reussi uniquement a enlever cette barre affreuse donc merci 1000 fois. Quant à l espace j ai tt essayé rien n'y fait. Le tuto sur la bordure je n y suis pas arriver nn plus pourtant j ai introduit le code donné rien n'y fait. Donc dommage pour moi tes tuto ont l air de marcher chez tt le monde je doit avoir des codes vraimt differents. Tout de meme je tiens a te feliciter pour ta bonté de partage.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Effectivement, cela vient de ton thème.
      Essaye d'ajouter le code suivant :

      .content {
      margin-top: -62px; /* Espace au-dessus du contenant du blog */
      }

      Au-dessus de la ligne :

      /* Content

      Comme ceci :

      .content {
      margin-top: -62px; /* Espace au-dessus du contenant du blog */
      }
      /* Content

      La valeur négative de ce code permet de déplace le contenant vers le haut de la page ;)

      Supprimer
  51. Superrrrrrr ca a marché!!!!! Merci infiniment t'es geniale.

    RépondreSupprimer
  52. bonjour Catherine,

    si on supprime cette barre java, que devienne les boutons conception, nouvel article et déconnexion ?
    si je supprime cette barre comment vais-je faire pour modifier mon blog(conception).

    merci beaucoup
    stephane

    http://cgtplateformechimietavaux.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Stéphane,
      Tu peux accéder à tous les paramètres et options de ton blog sur le tableau de bord Blogger (blogger.com).
      De là tu as accès aux Articles, aux Pages, aux gadgets sur l'onglet Mise en Page, et tu peux accéder au système Personnalisation sur l'onglet Modèle :)

      Supprimer
  53. J'ai galérer pour le code html parce que j'ai pas le même modèle je pense, mais j'ai enfin réussi ^^

    RépondreSupprimer
  54. Je désespère , plus de Navbar depuis 4 mois et comme par magie elle est de nouveau sur mon blog, j'ai tout essayé je désespère ! HELP ME

    RépondreSupprimer
    Réponses
    1. Bonjour Chloe,
      Essaye d'ajouter le code CSS suivant :

      #navbar {
      position: fixed !important;
      top: -30px !important;
      }

      Supprimer
  55. Coucou!
    Je commence tout juste mon blog (il est encore en construction...). J'avais moi aussi réussi à enlever la navbar tout était nickel et je ne sais pas pourquoi elle a réapparu... :( qu'est-ce que je peux faire??
    Merciiii

    RépondreSupprimer
    Réponses
    1. Bonjour Maurine,
      Je ne trouve pas le code CSS de ce tutoriel sur ton blog.
      As-tu essayé de faire le tutoriel une nouvelle fois ?

      Supprimer
  56. (et j'ai une autre question aussi, rien à voir avec la précédente)
    J'aimerai que tout le fond de mon blog soit blanc et qu'il n'y ait pas cette ligne grise "ombrée" de démarcation, entre le fond et mes articles/widgets... comment je peux faire? Cela vient de mon thème non?

    RépondreSupprimer
    Réponses
    1. Oui, ça vient de ton thème. Trouve le code CSS donné dans ce tutoriel :

      content-outer {

      Et remplace tout le code jusqu'au signe } par :

      .content-outer {
      margin-bottom: 1px;
      }

      Tu peux ensuite suivre le tutoriel en utilisant ce nouveau code ;)

      Supprimer
  57. Hello ! Je voulais savoir si on pouvait supprimer la bordure qui est autour du header ? merci d'avance pour ta réponse :)

    RépondreSupprimer
    Réponses
    1. Bonjour Alissia,
      En fait ce n'est pas une bordure mais un marge autour du contentant de la zone de ton blog. Tu peux supprimer cette marge mais elle affectera toute la zone de ton blog, y compris les articles et ta barre latérale. En gros, tu perdras 10 pixels de marge entre la bordure et tes articles, et 10 pixels de marge entre ta barre latérale et le bord de cette zone.

      Retrouve le code suivant :

      .content-inner {

      Tu devrais trouver cette ligne 2 fois dans ton code, comme ceci :

      .content-inner {
      padding: 10px 10px;
      }
      .content-inner {
      background-color: #edffe7;
      }

      Dans le premier code, tu as peut-être un code qui ressemble à ceci : $(blabla) à la place de 10px 10px (avec blabla remplacé par du texte).

      Remplace ces 2 codes par :

      .content-inner {
      padding: 0;
      background-color: #edffe7;
      }

      Et voilà ;)

      Supprimer
  58. Bonjour, merci pour les explications mais je ne trouve pas le code... Je ne pensais pas que cette marge affectait autant de choses donc si on peut l'enlever qu'avec ce code, ce n'est pas grave si elle reste là.

    RépondreSupprimer
    Réponses
    1. As-tu cliqué dans la boîte de code avant d'appuyer sur Ctrl et F (ou Cmd et F sur mac) pour ouvrir la boîte de recherche ? Si non, alors une autre boîte de recherche s'ouvre mais en haut de la page et non dans la boîte de code, et elle ne marche pas. Il faut coller :

      .content-inner {

      Dans le champ de recherche qui apparaît en haut de la boîte de code. Ensuite appuie sur Entrer et tu devrais tomber sur le code ;)

      Supprimer
  59. Je viens tout juste de me créer un Blog sur Blogger et franchement, la barre me dérangeait beaucoup !! Mais en 2 min tout est parti :D Merci beaucoup :)

    RépondreSupprimer
  60. Bonjour, je ne sais pas ce que j'ai fais mais tout d'un coup la navbar que j'avais enlevée grâce à votre tuto est réaparrue. Pouvez-vous m'aider s'il vous plaît ?

    RépondreSupprimer
    Réponses
    1. Bonjour Aliss,
      Vérifies que les paramètres de ta Navbar n'ont pas bougés. Va dans Mise en Page, clique sur Modifier sur le gadget Navbar. Vérifies que la ligne Désactivée est bien cochée.

      Supprimer
    2. J'ai le même souci mais dans Mise en Page, le gadget Navbar n'apparaît plus !!!!

      Supprimer
    3. Bonjour Claude,
      Pour faire apparaître le gadget Navbar dans Mise en Page (sans modifier son affichage sur le blog) ajoute le code CSS suivant :

      #layout #Navbar1 {
      display: block !important;
      }

      Pour être sûr que le gadget ne s'affiche pas sur le blog rajoute :

      #Navbar1 {
      display: none !important;
      }

      Ajoute ces 2 codes CSS avant la ligne suivante de ton code HTML :

      ]]></b:skin>

      Supprimer
  61. Bonjour, ça avait effectivement bougé... merci beaucoup

    RépondreSupprimer
  62. Merci pour ce Tuto facile et sympa :)
    Jeanne

    RépondreSupprimer
  63. Merci pour ces petits tuto très bien expliqué grâce auquel tout doucement mon blog commence à prendre forme :)

    RépondreSupprimer
  64. je n'aime pas trop modifier le code HTML de mon blog de peur de faire une erreur que je regretterai !
    mais grâce à votre tuto simple et bien illustré, j'arrive à manipuler ce langage qui est un peu du chinois pour moi !!!

    merci pour le partage bonne continuation
    http://bettinaelcreation.com/

    RépondreSupprimer
  65. Bonjour,
    merci pour ces explications. Je voulais vous envoyer ce message sous l'article de la barre déroulante mais il n'y avait pas l'espace pour. j'ai donc un problème avec ça car ma barre s'affiche à gauche et est donc inaccessible.
    Merci d'avance pour votre réponse.

    RépondreSupprimer
    Réponses
    1. Bonjour Léanne,
      Peux-tu me donner le lien de ton blog pour que je puisse voir le problème ?

      Supprimer
  66. Merci beaucoup pour tes tuto ! Super bien fait pour les neophytes :)

    RépondreSupprimer
  67. Merci, j'ai réussi :D Ton tuto est très explicite :)

    RépondreSupprimer
  68. J'avais réussi à enlever la Navbar mais je ne savais même pas que l'on pouvais supprimer l'espace, c'est beaucoup mieux comme ca, merci !

    RépondreSupprimer
  69. Super article !
    J'ai enlevé la barre sans souci, mais comme pour beaucoup d'autres blogs pas moyen d'enlever l'espace en haut. Mais c'est quand même déjà mieux comme ça ! Maintenant je vais lire attentivement tes articles pour installer une newsletter :p

    RépondreSupprimer
  70. Après de nombreux essais et la lecture de tous les commentaires qui, comme moi, n'arrivaient pas a enlever l'espace blanc en haut de la page, j'ai réussi ! Je tiens à te remercier pour tous tes tutos, ils sont simples et claires, c'est super !

    RépondreSupprimer
  71. Bonjour, j'adore tes tutos, j'aimerai tout refaire, je suis entrain de faire petit à petit. Par contre je ne sais pas comment enlever les marges de chaque cotés du blog peux tu m'aider? Merci, c'est vraiment génial!!!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      En fait tu n'as pas de marge sur les bords de ton blog. Le contenu de ton blog est limité à une certaine largeur.
      Pour ton image d'en-tête, c'est un peu différent. Il y a un contenant sur ton blog qui lui donne une largeur limite. Pour la supprimer colle les codes suivants :

      .region-inner.header-inner {
      min-width: 100%;
      max-width: 100%;
      text-align: center;
      width: 100%;
      }

      #header {
      margin: 0;
      text-align: center;
      }

      #Header1_headerimg {
      margin: 0 auto;
      }

      Avant la ligne suivante de ton thème :

      ]]></b:skin>

      De plus, tu peux forcer ton image d'en-tête à prendre 100% de largeur de la page, mais elle sera pixelisée sur grand écran. Si tu souhaites quand même le faire, ajoute :

      width: 100%;
      height: auto;

      Au code ci-dessus commençant par :

      #Header1_headerimg {

      Comme ceci:

      #Header1_headerimg {
      margin: 0 auto;
      width: 100%;
      height: auto;
      }

      Supprimer
    2. Merci pour tes bons conseils, j'ai résolu le problème pour mon image et mes marges, mais par contre j'ai du faire une bêtise dans les codes car ma navbar et de nouveau là et je ne peux plus y avoir accès en allant dans l'onglet "mise en page". Bref je crains mdr. Je vais tout reprendre pour voir ce que j'ai pu faire.

      Supprimer
    3. Tu peux essayer d'ajouter le code CSS suivant pour cacher la navbar :

      #navbar {
      visibility: hidden !important;
      }

      Ajoute ce code avant la ligne suivante de ton thème :

      ]]></b:skin>

      Supprimer
  72. Bonjour Catherine
    J'ai suivi le tuto depuis le début avec succès, mais je cale au moment de retirer l'espace en haut. J'ai bien suivi les étapes pour accéder au code et trouver la ligne "content-outer", malheureusement je ne trouve nulle part la mention "margin-bottom: 1px;" pourriez-vous m'aider?
    http://devousamoi-dominique.blogspot.fr/

    RépondreSupprimer
  73. Finalement Catherine, j'ai réessayé (je ne m'avoue jamais vaincue)et je me suis rendue compte que j'avais oublié de cliquer sur le triangle noir pour développer le code... opération réussie!!! A très bientôt pour de nouveaux essais de tutos (je remets en "beauté" mon blog que j'avais délaissé depuis 1 an...) http://devousamoi-dominique.blogspot.fr/

    RépondreSupprimer

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