Blogger : Créer un joli menu en HTML/CSS

Blogger ne propose pas d’office un menu dès la création de son blog, mais je vais vous montrer comment en faire un joli.

Où mettre son menu ?

Pour se faire, rendez-vous dans votre backoffice Blogger, dans la partie « Mise en page« . Vous trouvez ici la maquette de votre blog avec les différents éléments qui composent votre blog.

/!\ Si vous ne connaissez pas ces langages allez voir mon article où je vous explique les bases du code /!\

Le HTML

Votre menu doit se trouver dans la case « Toutes les colonnes ». Pour se faire cliquer sur « Ajouter un gadget ». Une fenêtre pop-up s’ouvre. Cliquez sur le petit plus à côté du gadget « HTML/Javascript ».

Le gadget s’affiche et révèle deux encarts : Titre et Contenu. Dans le titre, on va noter « Menu HTML » et dans Contenu, il y aura le code HTML du menu.

Passons à la partie pratique : le code HTML à coller dans la partie « Contenu ». Je vous donne le code entier, à vous de l’adapter ensuite selon ce que vous désirez y mettre. Cependant, les règles de webmarketing recommandent de mettre entre cinq et sept onglets à un menu. Plus de sept onglets pose un problème de lisibilité, il faut donc simplifier au maximum afin d’avoir une bonne ergonomie web.

<div class="monmenu"><ul class="listeonglets">
<li><a href="#">Accueil</a></li>
<li><a href="#">Truc</a></li>
<li><a href="#">Bidule</a></li>
<li><a href="#">À propos</a></li>
</ul></div>

Le # sera à remplacer par le lien que vous voulez mettre. Voici une autre règle de webmarketing : le premier lien du menu doit absolument être le lien vers la page d’accueil de votre blog et le dernier lien doit être le lien vers votre page À Propos (article à venir). Sauvegardez et affichez votre blog. C’est moche n’est-ce pas ?

Le CSS

Cependant, ne vous en faites pas, on va le customiser un peu… Avec du CSS ! Pour cela, on retourne dans le backoffice Blogger et on va dans la partie « Thèmes » > « Modifier le code HTML ».

Cliquez dans la zone de texte et faites Ctrl+F. Cela va ouvrir une zone de recherche.

Dedans, on va taper le code /* Tabs et appuyer sur Entrée. Ce code est la partie qui concerne le CSS du menu. Vous devriez normalement avoir un code comme celui ci-dessous.

 

On va tout supprimer ce qui se trouve entre
------------------------------------- */ et /* Columns comme ceci :

Ça fait peur n’est-ce pas ? Mais c’est nécessaire pour pouvoir avoir un joli menu. Entre ------------------------------------- */ et /* Columns, on va coller les codes suivants :


.tabs-inner .section:first-child ul {
}
.tabs-inner .widget ul {
}
.tabs-inner .widget li a {
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
}
.tabs .widget li, .tabs .widget li {
}

Le premier code CSS va modifier le premier lien du menu, le second code le fond du menu, le troisième code les liens du menu, le quatrième l’apparence du menu au survol de la souris, et le dernier code va permettre de centrer le texte du menu. C’est parti pour la modification. Dans .tabs-inner .section:first-child ul {, on ne va rien mettre, car on veut que tout le menu soit identique.

Changer le fond du menu

Dans .tabs-inner .widget ul {, par contre, on va mettre une marge au dessus et en dessous du menu de 10px, et pas de bordure, comme ceci :


.tabs-inner .section:first-child ul {
}

.tabs-inner .widget ul {
margin-top: 10px;
margin-bottom: 10px;
border: none
}

.tabs-inner .widget li a {
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
}

.tabs .widget li, .tabs .widget li {
}

Mais cela donne un menu assez sommaire… Qu’on peut heureusement modifier encore un peu !

Changer l’apparence des liens

Pour mettre un écart entre chaque onglet, on va dire à Blogger de nous mettre une marge à droite de 20px à chaque onglet. Pour cela, on va coller sous .tabs-inner .widget li a { la petite partie suivante :


.tabs-inner .widget li a {
margin-right: 20px;
}


C’est déjà mieux mais on peut faire bien mieux encore ! Si vous avez suivi mon tutoriel pour ajouter des polices Google Fonts à votre blog, on peut en rajouter. Il suffit de refaire la manipulation du tutoriel et de coller le CSS de la police d’écriture sous margin-right:20px; comme ceci :


.tabs-inner .widget li a {
margin-right: 20px;
font-family: 'Roboto', sans-serif;
}

Pour changer la taille, on utilisera le code font-size, pour la couleur on mettra color. Admettons que je veuille que ma police soit d’une taille de 15px et en rose, on va rajouter :


.tabs-inner .widget li a {
margin-right: 20px;
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: pink;
}

Voilà ce que ça donne. Vous pouvez bien évidemment changer la taille, la couleur (en utilisant par exemple le site code-couleur.

Changer l’apparence au survol de la souris

On va maintenant passer au code concernant le survol des liens à la souris. On va dire que je veux juste changer la couleur au survol en mettant un rose plus foncé et souligner le texte. On va modifier .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { et coller en dessous le code suivant :

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #C44C51;
text-decoration: underline;
}

Centrer le menu

On se rapproche d’un menu assez joli mais on peut encore faire mieux. Mon menu est aligné à gauche mais j’ai bien envie de le centrer (libre à vous de le faire ou non). Pour centrer le texte, il suffit de rajouter text-align: center; dans .tabs-inner .widget ul { et mettre dans .tabs .widget li, .tabs .widget li { les deux paramètres suivants : display: inline; et float: none;.

Code CSS complet


/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child ul {
}
.tabs-inner .widget ul {
margin-top: 10px;
margin-bottom: 10px;
border: none;
text-align: center;
}
.tabs-inner .widget li a {
margin-right: 20px;
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: pink;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #C44C51;
text-decoration: underline;
}
.tabs .widget li, .tabs .widget li {
display: inline;
float: none;
}

 

Aller plus loin

Par exemple, si vous souhaitez mettre le texte de votre menu en majuscule, rajoutez text-transform: uppercase; à .tabs-inner .widget li a {.

Également, si vous souhaitez mettre un fond de couleur à votre menu, rajoutez background-color: #EFECCA; à .tabs-inner .widget ul { et remplacer margin-top: 10px; et margin-bottom: 10px; par margin: 10px et padding: 5px;. Le code couleur #EFECCA sera à changer selon ce que vous avez choisi comme couleur de lien.

14 commentaires

  1. Oh là là mon angoisse quand on parle de blog, c’est tout ce qui touche au code ce n’est vraiment pas mon truc, du coup c’est mon mari qui s’en occupe pourtant j’aimerais bien apprendre un peu que ce soit pour le blog ou mon travail 🙂

  2. Coucou
    Non mais attend je suis en plein dessus en ce moment, je cherche à modifier la largeur de mon site. C’est à dire en gros la page principale est trop petite et le fond trop imposant 😩 mais j’ai modifié le css additionnel tu connais ?
    Mais ça la à peine décalé sans plus 😭 si tu peux m’aider ma belle 🙏
    Merci pour ton article j’ai noté pleins de petites astuces ❤️

  3. Voilà sur quoi j ai passé tant de temps. L’apparence et aussi quelles catégories mettre en avant et comment le faire. Merci pour tes précieux conseils 💗💗

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.