Personnalisation blogger : supprimer la navbar

supprimer-navbar-blogger-tutoriell

Personnalisation blogger : supprimer la navbar

Aujourd’hui je vais vous présentez un petit tuto pour enlever la « navbar » sous blogger, auquel j’ai pensé car lorsque je modifie un modèle Blogger, c’est la première chose que je fais, car il faut dire que c’est assez vilain!

La navbar c’est quoi ? c’est cette barre aux couleurs peu esthétiques que vous trouverez souvent sur les blog hébergés sous blogger, comme vous pouvez le voir sur la photo suivante :

Capture d’écran 2014-06-29 à 19.49.37

Il est possible de la retirer facilement, et c’est ce que nous allons voir :)

Pour commencer, connectez vous à l’interface de votre blog, et avant toute modification, je vous conseille vivement de toujours enregistrer une sauvegarde de votre blog, pour cela rendez vous dans > Modèle > Sauvegarder/restaurer puis cliquez sur  « télécharger le modèle complet ».

1

 

 

A présent, cliquez sur l’onglet mise en page du menu blogger et sur modifier dans le gadget navbar.

navbar

La fenêtre de gestion de la navbar s’ouvrira, cochez la case désactivé et enregistrer

désactiver

Comme vous pourrez le voir en cliquant sur « afficher le blog » , la sidebar n’est plus là! 

Capture d’écran 2014-06-30 à 08.23.33

> Ici on ne le voit pas car le fond du blog est blanc mais si vous  avez un arrière plan vous aurez surement un décalage entre le haut de votre page et le header (bannière),  pour la suite du tuto, je vais vous montrer comment enlever ce décalage.

A présent, rendez vous sur Modèle > Modifier le code HTML

modifcode

Repérez la ligne de code suivante : (cmd+f sur mac / ctrl+f sur pc, vous aurez une petite barre de recherche qui apparaitra en haut de la fenêtre de la feuille HTML)

 <b:skin>… 

Une fois cette ligne trouvée cliquez sur le petit triangle noir à sa gauche pour en dérouler son contenu

(ici, la ligne en question est surlignée en jaune)

Capture d’écran 2014-06-30 à 08.31.43

Nous allons chercher le code CSS, c’est à dire le code qui donne l’apparence à votre page,

Même procédé que pour la recherche de la ligne précédente, on clique n’importe où dans la feuille HTML puis CTRL ou CMD + F, puis dans le champs de recherche tapez ou collez cette ligne de code et entrer pour la rechercher:

content-outer

Capture d’écran 2014-06-30 à 08.36.11

Une fois la zone trouvée, nous allons changer quelques valeurs afin de faire en sorte qu’il n’y ai plus l’écart entre le haut de votre page et votre bannière.

Pour cela juste en dessous de la ligne margin-bottom: 1px;,  et avant l’accolade }

ajouter cette ligne en faisant un petit copier/coller ::

margin-top: -30px;

Pour vérifier si la manipulation à fonctionnée cloquez sur prévisualiser le modèle et surtout, n’oubliez pas de sauvegarder!

Voila, à présent plus de navbar blogger et un blog tout propre!

Alors  ce tuto vous a t il aidé?
Si vous avez une question ou un petit problème par rapport au tuto n’hésitez pas à m’en faire part dans les commentaires!
7 Commentaires
  • Capucine

    1 juillet 2014 at 13 h 49 min Répondre

    Super astuce, merci :)

    • graphicart

      1 juillet 2014 at 13 h 52 min Répondre

      Derien, cela fonctionne sur canalblog? :)

  • Au Fil d'Isa

    31 juillet 2014 at 11 h 10 min Répondre

    Merci beaucoup pour cette astuce. Je suis tentée mais je ne m’y connais pas très bien… Si tu supprimes la navbar, est-ce que toi tu vois encore l’endroit où tu cliques pour t’identifier et accéder à l’interface « interne » du blog ? Je ne sais pas comment je ferai sans le « nouvel article » et le « conception »…

    • graphicart

      31 juillet 2014 at 14 h 25 min Répondre

      Avec plaisir :) non justement le fait de supprimer la navbar permet de ne plus avoir les liens blogger du haut, par contre pour y accéder après tu peux toujours tapper blogger sur google et tomber sur ta page blogger, sinon tu ouvres toujours ton site (quand tu as besoin de le voir) dans un autre onglet afin de garder l’accès à ton interface :) en soit ce n’est pas réellement un problème ^^

  • Bigoudenblues

    2 septembre 2014 at 12 h 23 min Répondre

    Encore une fois (lol) : MERCI ! :)

  • Majdoubi

    26 mars 2015 at 21 h 56 min Répondre

    Merci, il y a des différence; mais j’ai arrivé par ajouter le code juste après:
    html body .content-outer {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    margin-top: -60px;
    et changer pour -60px
    Grand merci encore une fois

  • Sichilde

    11 juin 2016 at 17 h 43 min Répondre

    Merci merci !Depuis que je recherche sur le net, je trouve des « modèles » de tuto qui ne correspondent pas à mes codes HTLM, je commençais à desesprée, vu que j’y connais absolument rien en codage ^^
    Merci encore et bonne continuation !

Poster un commentaire