Séparer votre barre de navigation en deux parties

Voici le tant attendu tutoriel pour séparer son menu en 2 parties : une partie à gauche et une partie à droite.

Vous pouvez mettre ce que vous voulez dans chaque partie. Les liens du menu à gauche et des icônes vers les réseaux sociaux à droite ? C'est possible.
Des liens à gauche et des liens à droite ? C'est également possible !

Allez, c'est parti pour les explications ;)

Texte
Images
Icônes CSS vers les réseaux sociaux

Installer Font Awesome
Les codes HTML pour les icônes

Modifier l'apparence des menus

Aligner les 2 menus sur une même ligne
Aligner le contenu des menus à gauche et à droite
Modifier l'apparence des liens du 2e menu

Faire une sauvegarde de son thème

Comme d'habitude, faites une sauvegarde de votre thème avant toute modification de celui-ci ! Si vous faites une erreur vous pourrez facilement revenir en arrière ;)

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.

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.

Plus d'informations sur la sauvegarde, et comment charger votre sauvegarde en cas d'erreur ;)

Créer son menu

Pour pouvoir séparer le menu en 2 parties il faut créer un menu en HTML. Cala ne marchera pas avec le gadget Pages.

Si vous n'avez pas encore créé votre menu HTML, vous pouvez suivre les tutoriels suivants :

La barre de navigation partie 1 : Créer son menu en HTML
La barre de navigation partie 2 : Modifier l'apparence du menu avec du CSS
Créer un menu déroulant : Pour créer des menus déroulants

Séparer le menu en 2 parties

Vous allez voir, c'est très simple.

Tout d'abord il faut comprendre comment ça marche.
Un menu en HTML est simplement une liste de liens dont on a modifié l'apparence pour qu'elle apparaisse comme un menu.

Pour l'instant votre menu se compose donc d'une liste de lien. On va simplement créer une 2e liste de lien dans le même gadget HTML. Cette 2e liste sera la 2e partie de notre menu. On pourra alors, avec du CSS, définir la position des liens de chaque liste dans notre menu : A gauche et à droite.

Si vous avez créé votre menu avec mon tutoriel, alors le code de ce menu, dans son gadget HTML/JavaScript, doit ressembler à ceci :

<!-- début du menu -->

<div id="barre_nav">
<ul>
<li><a href="http://nomdublog.blogspot.fr/" title="Accueil">Accueil</a></li>
<li><a href="http://nomdublog.blogspot.fr/search/label/Lifestyle" title="Lifestyle">Lifestyle</a></li>
<li><a href="http://nomdublog.blogspot.fr/p/a-propos.html" title="A propos">A propos</a></li>
<li><a href="http://nomdublog.blogspot.fr/p/contact.html" title="Contact">Contact</a></li>
</ul>
</div>

<!-- fin du menu -->

Avant de créer la 2e partie de notre menu, il faut remplacer une petite ligne de code.

Ajoutez ceci :

class="first-nav"

juste avant le signe > de <ul> comme ceci :

<ul class="first-nav">

Maintenant il faut rajouter la ligne suivante :

<div>

Juste après :

<div id="barre_nav">

Comme ceci :

<!-- début du menu -->

<div id="barre_nav">
<div>

<ul class="first-nav">
<li><a href="http://nomdublog.blogspot.fr/" title="Accueil">Accueil</a></li>
<li><a href="http://nomdublog.blogspot.fr/search/label/Lifestyle" title="Lifestyle">Lifestyle</a></li>
<li><a href="http://nomdublog.blogspot.fr/p/a-propos.html" title="A propos">A propos</a></li>
<li><a href="http://nomdublog.blogspot.fr/p/contact.html" title="Contact">Contact</a></li>
</ul>

</div>

<!-- fin du menu -->

On peut maintenant créer une 2e liste de liens. Voici le code que nous allons utiliser :

<!-- début de la 2e partie du menu -->
<ul class="second-nav">

<!-- les liens du 2e menu vont ici -->

</ul>
<!-- fin de la 2e partie du menu -->

</div>

Ajoutez tout ce code avant la ligne :

</div>

Comme ceci :

<!-- début du menu -->

<div id="barre_nav">
<div>

<ul class="first-nav">
<li><a href="http://nomdublog.blogspot.fr/" title="Accueil">Accueil</a></li>
<li><a href="http://nomdublog.blogspot.fr/search/label/Lifestyle" title="Lifestyle">Lifestyle</a></li>
<li><a href="http://nomdublog.blogspot.fr/p/a-propos.html" title="A propos">A propos</a></li>
<li><a href="http://nomdublog.blogspot.fr/p/contact.html" title="Contact">Contact</a></li>
</ul>

<!-- début de la 2e partie du menu -->
<ul class="second-nav">

<!-- les liens du 2e menu vont ici -->

</ul>
<!-- fin de la 2e partie du menu -->

</div>

</div>

<!-- fin du menu -->

Ajouter des liens à la 2e partie du menu

Maintenant qu'on à créé la 2e partie du menu il faut y ajouter des liens ! Vous pouvez ajouter des liens au format texte, des images et des icônes vers les réseaux sociaux.

Texte

Pour ajouter des liens au format texte, il suffit de rajouter des liens comme vous l'avez fait pour le premier menu.

Voici le code HTML d'un lien à ajouter dans le menu :

<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html">Texte du Lien</a></li>

Collez cette ligne juste après :

<!-- les liens du 2e menu vont ici -->

Remplacez :

Texte du Lien par le texte que vous voulez afficher dans votre menu.
Titre par le même texte que Texte du Lien. Celui-ci ne sera pas affiché dans le menu.
http://nomdublog.blogspot.fr/page.html par l'adresse URL vers lequel vous souhaitez être redirigé en cliquant sur le lien.

Pour trouver l'adresse URL d'une page de votre blog ou d'un libellé, vous pouvez suivre les instructions de ce tutoriel.

Images

Si vous voulez utiliser une image à la place d'un texte, alors il faut remplacer Texte du Lien du code HTML suivant :

<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html">Texte du Lien</a></li>

Par

<img src="http://nomdublog.blogspot.fr/image.jpg" alt="Texte alternatif" />

Ce qui donne :

<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><img src="http://nomdublog.blogspot.fr/image.jpg" alt="Texte alternatif" /></a></li>

Collez cette ligne juste après :

<!-- les liens du 2e menu vont ici -->

Ou après le signe </li> du lien qui doit le précéder, si vous avez déjà ajouté des liens dans votre menu ;)

Par exemple, si j'ai déjà un lien texte et que je souhaites ajouter un lien image j'écris :

<!-- les liens du 2e menu vont ici -->
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html">Texte du Lien</a></li>
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><img src="http://nomdublog.blogspot.fr/image.jpg" alt="Texte alternatif" /></a></li>

Remplacez :

http://nomdublog.blogspot.fr/page.html par l'adresse URL vers lequel vous souhaitez être redirigé en cliquant sur le lien.
http://nomdublog.blogspot.fr/image.jpg par l'adresse URL de votre image.
Texte alternatif par un texte qui ne s'affichera que si l'image n'a pas pu être chargé. C'est comme une roue de secours au cas où ;)
Titre par le même texte que Texte alternatif. Celui-ci ne sera pas affiché dans le menu.

Pour créer une adresse URL pour votre image vous pouvez suivre ces instructions simples sur Blogger ;)

Icônes CSS vers les réseaux sociaux

Si vous voulez ajouter des icônes vers vos pages sur les réseaux sociaux vous pouvez les créer en HTML et CSS au lieu d'utiliser des images. L'avantage ? Vous pourrez modifier leur couleur à tout moment !

Installer Font Awesome

Pour créer des icônes vers les réseaux sociaux il faut d'abord installer la police Font Awesome sur votre blog. Si vous avez créé vos boutons de partage en suivant mon tutoriel, alors c'est déjà fait ! Passez à l'étape suivante ;)

Sinon, il faut rajouter un petit code HTML dans votre thème.
Ne fermez pas la fenêtre du gadget HTML/JavaScript de votre menu !

A partir de votre tableau de bord, cliquez sur Modèle puis Modifier le code HTML :

Cliquez dans la boîte de code puis appuyez sur Ctrl et F en même temps (Cmd et F sur Mac). Dans la boîte de recherche qui apparaît collez :

<head>

Et appuyez sur Entrer.

Juste après cette ligne collez :

<!-- Font Awesome -->
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>

Comme ceci :

Retournez sur le gadget HTML/JavaScript de votre menu.

Les codes HTML pour les icônes

Pour utiliser les icônes Font Awesome dans vos liens, remplacez Texte du Lien du code HTML suivant :

<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html">Texte du Lien</a></li>

Par un des codes suivants :

Facebook

Instagram

Vine

Google +

Twitter

Tumblr

Vimeo

Youtube

Vous pouvez aller voir tous les icônes proposés par Font Awesome.

Remarque : Font Awesome ne propose pas d'icône Hellocoton. Mais pas de panique, je vous ai créé une icône !

Hellocoton

<span class="hello-icon"><svg viewBox="0 0 65.333 63.5" xmlns="https://www.w3.org/2000/svg"><path class="hc" d="M31.65,32.519c0,0-12.85-5.253-12.099-19.012C20.301-0.254,31.217,0.4,32.226,0.4 c1.007,0,13.105,0.437,13.105,15.415C45.331,15.815,20.992,14.947,31.65,32.519z" display="inline"></path><path class="hc" d="M33.465,30.971c0,0,1.657-13.78,15.124-16.704c13.466-2.926,15.73,7.773,15.997,8.747 c0.267,0.971,3.11,11.79-11.332,15.76C53.254,38.773,47.581,16.036,33.465,30.971z" display="inline"></path><path class="hc" d="M35.646,32.688c0,0,13.553-3.002,20.771,8.736c7.221,11.738-2.126,17.417-2.953,17.991 c-0.829,0.574-10.693,7.308-19.224-5.005C34.241,54.41,54.414,41.06,35.646,32.688z" display="inline"></path><path class="hc" d="M34.104,34.846c0,0,7.272,11.822-1.454,22.487C23.925,68,15.497,61.028,14.683,60.435 c-0.814-0.596-10.597-7.759-1.756-19.852C12.927,40.583,32.338,55.321,34.104,34.846z" display="inline"></path><path class="hc" d="M31.308,35.39c0,0-9.585,10.039-22.119,4.311c-12.531-5.727-7.933-15.649-7.565-16.588 c0.369-0.938,4.763-11.912,18.704-6.438C20.327,16.674,11.057,38.887,31.308,35.39z" display="inline"></path><path class="hc" d="M64.586,23.014c-0.267-0.974-2.531-11.673-15.997-8.747c-1.181,0.257-2.266,0.601-3.271,1.007 C45.023,0.836,33.22,0.4,32.226,0.4c-1.009,0-11.925-0.654-12.674,13.106c-0.056,1.016-0.029,1.979,0.054,2.904 C6.239,11.596,1.985,22.19,1.623,23.112C1.256,24.051-3.343,33.974,9.188,39.7c1.195,0.546,2.363,0.947,3.498,1.229 c-8.4,11.881,1.189,18.915,1.996,19.505c0.814,0.594,9.242,7.565,17.967-3.102c0.71-0.867,1.304-1.742,1.814-2.618 c8.479,11.881,18.179,5.27,19.001,4.7c0.827-0.574,10.174-6.253,2.953-17.991c-0.681-1.106-1.418-2.082-2.194-2.941 C67.556,34.303,64.847,23.962,64.586,23.014z M34.883,53.959c5.04-9.638-0.779-19.113-0.779-19.113 c-1.549,17.958-16.668,8.831-20.362,6.314c10.229,1.914,17.566-5.771,17.566-5.771C14.133,38.355,18.19,22.834,19.82,18.049 c1.855,10.386,11.83,14.47,11.83,14.47c-9.188-15.147,7.619-16.591,12.436-16.7c-9.351,4.593-10.621,15.152-10.621,15.152 c11.642-12.316,17.536,0.979,19.247,6.023c-7.359-6.454-17.065-4.307-17.065-4.307C52.37,40.148,38.173,51.562,34.883,53.959z"></path></svg></span>

Par exemple, si je souhaites ajouter un lien vers ma page Facebook et ma page Pinterest j'écris :

<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><i class="fa fa-facebook"></i></a></li>

<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><i class="fa fa-pinterest-p"></i></a></li>

Il faut remplacer :

http://nomdublog.blogspot.fr/page.html par l'adresse URL de votre page sur le réseau social en question.
Titre par le nom du réseaux social (Pinterest, Facebook, etc.)

Collez ces lignes juste après :

<!-- les liens du 2e menu vont ici -->

Ou après le signe </li> du lien qui doit le précéder, si vous avez déjà ajouté des liens dans votre menu ;)

Par exemple, si je rajoute ces liens après mon lien image et mon lien texte, j'écris :

<!-- les liens du 2e menu vont ici -->
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html">Texte du Lien</a></li>
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><img src="http://nomdublog.blogspot.fr/image.jpg" alt="Texte alternatif" /></a></li>
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><i class="fa fa-facebook"></i></a></li>
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><i class="fa fa-pinterest-p"></i></a></li>

Au final le code HTML de notre gadget HTML/JavaScript ressemble à ceci :

<!-- début du menu -->

<div id="barre_nav">
<div>

<ul class="first-nav">
<li><a href="http://nomdublog.blogspot.fr/" title="Accueil">Accueil</a></li>
<li><a href="http://nomdublog.blogspot.fr/search/label/Lifestyle" title="Lifestyle">Lifestyle</a></li>
<li><a href="http://nomdublog.blogspot.fr/p/a-propos.html" title="A propos">A propos</a></li>
<li><a href="http://nomdublog.blogspot.fr/p/contact.html" title="Contact">Contact</a></li>
</ul>

<!-- début de la 2e partie du menu -->
<ul class="second-nav">

<!-- les liens du 2e menu vont ici -->
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><i class="fa fa-facebook"></i></a></li>
<li><a title="Titre" href="http://nomdublog.blogspot.fr/page.html"><i class="fa fa-pinterest-p"></i></a></li>

</ul>
<!-- fin de la 2e partie du menu -->

</div>

</div>

<!-- fin du menu -->

Une fois que vous avez tous vos liens, sauvegardez votre menu.

Visuellement on obtient :

Pour l'instant on se retrouve avec 2 menus, l'un en-dessous de l'autre. Pour les mettre côte à côte il faut ajouter du code CSS.

Modifier l'apparence des menus

Pour la suite du tutoriel nous allons utiliser des codes CSS. Une fois que vous avez fait une sauvegarde de votre thème allez dans Modèle puis cliquez sur Modifier le code HTML :

Cliquez sur le triangle noir à gauche de :

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

Cliquez dans la boîte de code puis appuyez sur Ctrl et F en même temps (Cmd et F sur Mac). Dans la boîte de recherche qui apparaît collez :

/* Columns

Et appuyez sur Entrer. Nous allons coller les codes CSS pour notre 2e menu juste au-dessus de cette ligne.

Aligner les 2 menus sur une même ligne

Pour aligner les 2 menus sur la même ligne ajoutez le code suivant :

/* Aligner les 2 menus sur une même lige */
#barre_nav ul {
    display: inline-block;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

Juste avant la ligne :

/* Columns

Comme ceci :

Visuellement on obtient :

Vous remarquerez que la bordure que j'ai appliqué à mon menu s'applique aux 2 menus. Pour régler ce genre de problème, si vous avez créé votre menu avec mon tutoriel, il suffit de couper les codes CSS pour la bordure (ou la couleur de fond, etc.) qui se trouvent dans le code commençant par :

/* Fond et Bordure de la Barre de Navigation */
.tabs-inner .widget ul {

Collez ces codes avant le signe } de ce nouveau code :

/* Apparence globale du menu */
#barre_nav {
}

Pour ma bordure j'obtiens :

/* Apparence globale du menu */
#barre_nav {
    border-top: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
}

Collez ce nouveau code juste avant la ligne :

/* Columns

Comme ceci :

Visuellement ça donne :

Aligner le contenu des menus à gauche et à droite

Pour aligner le 1er menu à gauche ajoutez le code CSS suivant à la suite des 2 précédents :

/* Alignement du 1er menu à gauche */
#barre_nav .first-nav {
    float: none;
    text-align: left;
}

Pour aligner le 2e menu à droite ajoutez le code CSS suivant à la suite des 2 précédents :

/* Alignement du 2e menu à droite */
#barre_nav .second-nav {
    float: right;
}

Si votre menu fait 100% de votre page en largeur, vous remarquerez que le premier menu est collé tout à gauche de l'écran et le 2e menu est collé tout à droite de l'écran :

Ce n'est pas très esthétique.
Nous allons donc définir une margeur maximale pour le contenant de notre menu, pour qu'il soit plus centré sur la page.

Tout d'abord il faut trouver la largeur maximale du contenant de notre blog. Pour cela, cherchez le code suivant :

content.width

Vous devrez tomber sur un code qui ressemble à ceci :

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

Ensuite, ajoutez le code CSS suivant :

/* Définit une largeur maximale pour le contenant du menu */
#barre_nav div {
    max-width: 1060px;   /* Remplacer la valeur en pixels par la largeur de votre contenant */
    margin: 0 auto;
}

Juste avant la ligne :

/* Columns

Remplacez 1060px par la largeur de votre contenant.

Visuellement on obtient :

Par défaut les liens de votre 2e menu auront les mêmes paramètres visuels que les liens de votre premier menu.

Si vous voulez modifier spécifiquement l'apparence des liens du 2e menu, alors vous pouvez utiliser les codes CSS suivants :

/* Apparence des liens du 2e menu */
.second-nav a {
}

/* Apparence des liens du 2e menu quand survolés par la souris */
.second-nav a:hover {
}

/* Apparence des icônes Font Awesome du 2e menu */
.second-nav .fa {
}

/* Apparence des icônes Font Awesome du 2e menu quand survolés par la souris */
.second-nav .fa:hover {
}

/* Apparence des images 2e menu */
.second-nav img {
}

Collez les codes qui vous intéressent avant la ligne :

/* Columns

Remarque pour l'icône Hellocoton : les codes CSS à utiliser pour l'apparence de l'icône Hellocoton sont les suivants

/* --- Contenant de l'icône Hellocoton --- */
.hello-icon {
    display: block;
    position: relative;
    width: 14px;   /* Largeur de l'icône */
    height: 14px;   /* Hauteur de l'icône */
    top: 1px;
}

/* --- Couleur de l'icône Hellocoton --- */
.hello-icon .hc {
    fill: #e8b960;   /* Couleur de l'icône */
}

/* --- Couleur de l'icône Hellocoton au survol --- */
.hello-icon:hover .hc {
    fill: #2a3848;   /* Couleur de l'icône */
}

Pour savoir quels codes CSS il faut utiliser pour modifier les couleurs, les polices, les fonds, les bordures, de ces différents éléments, je vous conseil de jeter un œil au tutoriel sur la barre de navigation partie 2 qui explique tous ces codes en détail. Ajoutez chaque ligne de code CSS (bordure, fond, etc.) avant le signe } du code de votre choix ci-dessus.

Menu

Lady Bird Red