Vous avez tout comme moi fait la découverte de Blogger, vous voulez créer votre propre blog, et marquer votre présence dans la blogosphère ! Blogger offre des thèmes simples auxquels on peut ajouter des améliorations, dans ce précieux tutoriel je vous montre comment ajouter une barre de navigation à votre blog?

1. 11 février2016
[COMMENT AJOUTER UNE BARRE DE MENU A MON BLOG
BLOGGER?]
PAR HUGO TUTO Page 1
« Blogger »
Comment ajouter
une barre de
navigation à mon
blog ?
BLOGGER

2. 11 février2016
[COMMENT AJOUTER UNE BARRE DE MENU A MON BLOG
BLOGGER?]
PAR HUGO TUTO Page 2
« Ça y est ! Enfin vous avez pris la décision de créer un blog et marquer votre présence dans la
blogosphère. Vous avez tout comme moi fait la connaissance de Blogger, et vous voulez sans doute
maîtriser cet outil gratuit ! Dans ce tutoriel vous allez découvrir comment ajouter une barre de
navigation à votre Blog »
Avant de se lancer dans la création d’une barre de navigation pour votre blog, on commence par
donner une définition à celle-ci.
 Qu’est ce qu’une barre de navigation « Menu » ?
C'est cette partie qui se situe souvent sous le titre ou le header qui contient les liens vers les
différentes parties de votre blog.
La barre de navigation peut contenir les catégories de vos articles, des liens vers d’autres sources
externes à votre blog, des liens vers des articles, des liens vers les pages de votre blog « la page de
contact » par exemple.
Dans ce tutoriel, je vais vous montrer comment créer une barre de menu simple avec deux
types de liens:
 Un lien vers la page d'accueil du blog
 Un lienversunarticle dublog
 Un lien vers une catégorie
Règle importante :
Avant de commencer quoique ce soit, dans ce tutoriel ou dans les prochains ayez le bon reflex
de sauvegardez votre blog comme expliqué aux images suivantes :

3. 11 février2016
[COMMENT AJOUTER UNE BARRE DE MENU A MON BLOG
BLOGGER?]
PAR HUGO TUTO Page 3
Enregistrez le modèle de votre blog dans un lieu sûr dans vôtre ordinateur.
Dirigez-vous au tableau de bord et cliquez sur Mise en Page dans le menu à gauche, puis cliquez
sur Ajouter un Gadget, c’est juste en dessous du titre principal du Blog :

4. 11 février2016
[COMMENT AJOUTER UNE BARRE DE MENU A MON BLOG
BLOGGER?]
PAR HUGO TUTO Page 4
Une fois c’est fait, une fenêtre s'ouvre vous proposant toute une liste de gadgets, sélectionnez
HTML Javascript en cliquant sur le signe + :

5. 11 février2016
[COMMENT AJOUTER UNE BARRE DE MENU A MON BLOG
BLOGGER?]
PAR HUGO TUTO Page 5
Vous obtenez ensuite cette fenêtre :
Vous pouvez laisser la partie titre vide, ce qui nous importe le plus c’est la partie contenu à
laquelle on va ajouter le code HTML, n’ayez pas peur ce n’est pas si compliqué 
Commencez par copier ce code :
<!-- début du menu -->
<div id="barre_nav">
<ul>
<li><a title="Titre" href="Lien">Texte du Lien</a></li>
</ul>
</div>
<!-- fin du menu -->

6. 11 février2016
[COMMENT AJOUTER UNE BARRE DE MENU A MON BLOG
BLOGGER?]
PAR HUGO TUTO Page 6
Ensuite collez- le dans la partie « contenu » comme dans l’image :
On va décortiquer un peu cette ligne:
<li><a title="Titre" href="Lien">Texte du Lien</a></li>
Vous pouvez considérer ce lien comme la base de votre barre de navigation, à chaque fois que
vous souhaitez ajouter un lien supplémentaire ;
Il faut maintenant préciser le Titre, le Lien et le Texte du lien :
le Titre correspond généralement au texte du lien mais il n'est pas affiché.
Le Lien est l'adresse sur laquelle vous vous rendez quand vous cliquez sur le lien.
Le Texte du lien est le texte qui sera affiché sur la barre de navigation.

7. 11 février2016
[COMMENT AJOUTER UNE BARRE DE MENU A MON BLOG
BLOGGER?]
PAR HUGO TUTO Page 7
Comme je vous ai précisé au tout début de ce tutoriel je vais vous montrer comment créer :
1. Un lien vers la page d'accueil du blog
2. Un lien vers un article
3. Une catégorie
1. Un lien vers la page d'accueil du blog
La page d’accueil se présente comme ça :
Pour un lien vers la page d'accueil de votre blog il faut copier l'adresse qui se trouve dans la barre
de navigation qu’on accède au Blog. Ensuite on colle cette adresse à la place du Lien.
On modifie également le Titre et Texte du Lien. Par exemple :
<li><a title="Accueil"href=" http://teach-meblogger.blogspot.com/ ">Accueil</a></li>

8. 11 février2016
[COMMENT AJOUTER UNE BARRE DE MENU A MON BLOG
BLOGGER?]
PAR HUGO TUTO Page 8
Je récapitule, on a remplacé :
 Texte du lien par Accueil
 Lien par http://teach-meblogger.blogspot.com/
 Titre par Accueil
Ce qui donne :
Affichez votre Blog et actualisez, merveille !! Une barre de menu s’affiche 

9. 11 février2016
[COMMENT AJOUTER UNE BARRE DE MENU A MON BLOG
BLOGGER?]
PAR HUGO TUTO Page 9
2 Un lien vers un article
Comme vous avez remarqué, j’utilise un blog de démonstration, je n’ai pas publié des articles
mais pour vous montrer comment créer un lien vers un article on va en créer un, c’est très simple
dans le tableau de bord Blogger cliquez sur ajouter un article, donnez lui un titre écrivez quelques
mots, ensuite cliquez sur affichez l’article !
Si vous n’avez pas encore rédigé de post pour votre blog le mien est déjà prêt ! 

10. 11 février2016
[COMMENT AJOUTER UNE BARRE DE MENU A MON BLOG
BLOGGER?]
PAR HUGO TUTO Page 10
Vous devez Copier l’adresse de l’article et Collez cette adresse à la place de Lien, puis nommez
votre lien en remplaçant Titre et Texte du lien. Par exemple :
<li><a title="Mon Article" href="http://teach-meblogger.blogspot.com/2016/02/lorem-ipsum.html
">Mon Article</a></li>
On résume, on a donc remplacé :
 Texte du lien par Mon Article
 Lien par http://ladybirdr.blogspot.fr/2013/07/tuto-blog-retirer-la-bordure-des-images.html
 Titre par Mon Article
Ce qui donne :

11. 11 février2016
[COMMENT AJOUTER UNE BARRE DE MENU A MON BLOG
BLOGGER?]
PAR HUGO TUTO Page 11
Si vous avez obtenu le même résultat que moi c’estque vous apprenez vite 
3. Une catégorie
Pour finir on va créer ce qu’on appelle une catégorie dans la barre de navigation, la
catégorie regroupe un certain nombre d’articles, par exemple la catégorie « bien-être »
On reprend le lien dont je vous ai parlé et comme je vous ai dis avant, il va vous servir de
base pour créer votre barre de navigation.
<li><a title="Titre" href="Lien">Texte du Lien</a></li>
Pour créer une catégorie bien-être dans votre blog voici ce que vous devez faire ;
Remplacez :
A Title « titre » par bien-être
Lien par l’adresse du blog à laquelle on ajoute / bien-être ce qui donne http://teach-
meblogger.blogspot.com/bien-être
Texte du lien par bien-être

12. 11 février2016
[COMMENT AJOUTER UNE BARRE DE MENU A MON BLOG
BLOGGER?]
PAR HUGO TUTO Page 12
Ce qui donne ça :
Et ça :

13. 11 février2016
[COMMENT AJOUTER UNE BARRE DE MENU A MON BLOG
BLOGGER?]
PAR HUGO TUTO Page 13
Et voilà c’est tout pour ce tutoriel, Regardez ce tutoriel en vidéo et bien
d’autres Cliquez ici ! >>> HUGO TUTO
A La
prochaine…
