Modifier liens de navigations Blogger avec FontAwesome

remplacer-messages-anciens-récents-blogger-navigation-fontawesome

Modifier liens de navigations Blogger avec FontAwesome

Toujours en quête de personnalisation de votre design sous blogger? Aujourd’hui je vous propose de changer l’apparence de votre navigation ! vous voyez les liens « articles plus récents« , « accueil » et « articles plus anciens » tout en bas de votre page et de vos articles ? et bien c’est sur ça que nous allons travailler. En effet, ces liens sont peu pertinents, puisqu’ils sont peu visibles, et pas du tout intuitif, il est donc nécessaire de retravailler le système de navigation blogger afin de procurer une « expérience utilisateur » (ce qui se traduit par le résultat et le ressenti de vos utilisateurs sur votre blog) bien meilleure à vos lecteurs en proposant une navigation plus intuitive avec des images / icones (boutons de flèches precedent / suivant par exemple.)

Dans ce tutoriel, je vous proposerais deux systèmes de navigation différents, dans un premier temps nous allons voir comment remplacer ces liens par les titres de vos articles, puis, nous verrons comment les remplacer par une une icône issue de la bibliothèque FONTAWESOME (qui s’installe comme une typographie) afin de rendre la navigation plus intuitive (attention, ce sont deux tutoriels distincts, vous pouvez choisir entre les deux systèmes de navigation)

 

 

 OPTION 1 :

Remplacer le texte des liens « articles récents » et « articles anciens »

personnalisation-blogger-articles-recents-anciens

 

→ Rendez vous dans votre administration Blogger puis cliquez sur « modèle« 
→ Cliquez sur « Modifier le code HTML » (pensez à faire une sauvegarde de votre blog avant modification)
→ Cliquez dans la zone de texte puis ctrl / cmd + f, un petit champ de recherche s’affiche en haut à droite de votre cadre, recherchez la balise </head>

Collez le script suivant juste avant la balise </head> et enregistrez.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

→ A présent, rendez vous dans « mise en page » puis ajoutez un gadget « HTML/JAVASCRIPT« 

Collez y ce morceau de code :

<style type="text/css"> #blog-pager-newer-link {font-size:100%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:100%;width:200px;text-align:right;}
</style>





<script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle); }); var olderLink = $("a.blog-pager-older-link").attr("href"); $("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { var olderLinkTitle = $("a.blog-pager-older-link").text(); $("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});
</script>

Enregistrez votre gadget puis « Enregistrer la disposition » du blog.

Pour réduire la taille des liens vous pouvez régler la propriété « font-size:100%« , en la baissant à 95 ou 85% par exemple dans les deux premières lignes (#blog-pager-newer-link et #blog-pager-older-link)

A présent, à la place de « articles plus anciens » et « articles plus récents » vous aurez directement le titre d’un de vos article qui sera sur la page précédente ou la page suivante.

 

OPTION 2 :

Une navigation sous forme d’icônes avec FontAwesome

Maintenant nous allons voir comment remplacer par des icônes les liens « accueil », « articles récents » et « articles anciens » inclus nativement sur Blogger, le résultat sera similaire à cela :

personnalisation-blogger-articles-navigation

 

ou encore voir les liens à la fin de la page sur : http://pretty-woods.blogspot.fr

1. Lier la bibliothèque FontAwesome :

Dans modèle > modifier le code HTML, rechercher la balise <head> et collez y le lien suivant

					<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

 

 

2. Remplacer « articles plus anciens » par une icône

→ Rendez vous dans votre administration Blogger puis « modèle » puis  « modifier le code HTML« 

à l’aide d’un ctrl / cmd + f recherchez la ligne 

<data:olderPageTitle/>
Remplacez là par la ligne de code suivante :
<i class="fa fa-chevron-right"></i>

 

3. Remplacer « articles plus récents » par une icône

→ Même manipulation qu’au dessus, mais à la place recherchez la ligne 

<data:newerPageTitle/>
Remplacez là par la ligne de code suivante :
<i class="fa fa-chevron-left"></i>

 

4. Remplacer « accueil » par une icône

Recherchez la ligne de code 

<data:homeMsg/>
Remplacez là par la ligne suivante :
<i class="fa fa-home"></i>

 

Pour adapter les icônes à la couleur de votre blog, rendez vous dans modèle > personnaliser > avancé > ajouter le fichier CSS et collez y les lignes suivantes :

.fa {
    -moz-osx-font-smoothing: grayscale;
    color: #000;
    display: inline-block;
    font-family: FontAwesome;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-size: inherit;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-synthesis: weight style;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-rendering: auto;
}

 

Adaptez la ligne « color » qui est actuellement en noir #000 avec la couleur de votre choix !

De plus , vous pouvez utiliser n’importe quelle icône de la bibliothèque font awesome.

 J’espère que ce tutoriel vous aura été utile, et que vous l’avez apprécié! n’hésitez pas à partager vos avis dans les commentaires ou à me demander si vous avez un soucis avec l’installation :-)

 


 

Les astuces Blogger :


 

 

 

32 Commentaires
  • Delphine

    19 août 2014 at 11 h 11 min Répondre

    Si j’ai bien compris il faut choisir entre modifier le nom de nos articles récents/précédents ou alors changer l’image ? J’ai tout appliqué, l’image de l’accueil fonctionne mais les nouvelles flèches non :(

    • graphicart

      19 août 2014 at 12 h 18 min Répondre

      en fait tu as deux options ; soit tu changes les liens articles précédents suivants par le titre des articles suivant precedent, soit tu le remplace par des images, ce sont deux options bien distinctes! je vais le re préciser dans l’article

    • Delphine

      19 août 2014 at 12 h 23 min Répondre

      D’accord, c’est bien ce qu’il me semblait mais j’en étais pas sûre^^’ Merci en tout cas, comme toujours un très bon article 😉

  • Marie

    20 août 2014 at 19 h 48 min Répondre

    Je suis en train de faire le tour de tous tes tutos. Bravo pour celui là aussi, je viens de l’appliquer sur mon blog ! Merci ^^

    • graphicart

      21 août 2014 at 9 h 29 min Répondre

      Hey! je viens d’aller jeter un oeil c’est niquel, je ne sais pas si tu avais déjà ce menu aussi mais il est très sympa 😉

  • Celine

    29 août 2014 at 10 h 28 min Répondre

    merci très utile ! Ton blog est vraiment super !
    Bisous

  • Bigoudenblues

    2 septembre 2014 at 12 h 50 min Répondre

    J’ai essayé de changer pour les images (méthode 2) mais impossible de trouver les et dans mon code HTML…. (même avec ctrl + f)
    As-tu une idée de pourquoi? :/

    • graphicart

      2 septembre 2014 at 20 h 19 min Répondre

      ah ça le fait parfois… essaye de rafraichir la page, ou vérifie que tu as bien coller précisément le code (sans un espace avant ou après par exemple) il faut que ce soit très précis ^^

  • Feariie

    3 septembre 2014 at 18 h 01 min Répondre

    Merci énormément pour ce tutoriel !! Je cherchais en vain le code qui marcherait chez moi et finalement je me retrouve parfaitement dans les petits icones « roses » 😉

    • graphicart

      3 septembre 2014 at 18 h 06 min Répondre

      derien :) super alors je vais aller voir ça!

    • Cécile

      24 février 2015 at 0 h 36 min Répondre

      Oui j’ai exactement le même problème… le refrseh n’y fait rien. :( Sinon merci pour tes tutos. Je crois que c’est la première fois que je vois des explications si efficaces!!
      Bisous ♥
      Cécile.

  • Lady heavenly

    10 septembre 2014 at 15 h 32 min Répondre

    Super tuto !! Merci ♥

    J’ai essayé les 2 outils mais j’ai une préférence pour les images :) Si tu veux voir ce que ça donne : http://ladyheavenly.blogspot.com (par contre lorsqu’on clique sur un article il y a marqué en bas « Lien vers cet article créer un lien » à quoi ça sert ? ai-je rajouté un truc sans le vouloir ?)

    Bisous

    • graphicart

      10 septembre 2014 at 22 h 34 min Répondre

      coucou! alors je viens d’aller voir, c’est très joli et en harmonie avec ton blog :-) par contre je ne vois pas du tout le problème dont tu me parles?

      • Lady heavenly

        11 septembre 2014 at 0 h 59 min

        Merci :) En fait lorsque tu cliques sur un des articles, en bas de page (exemple :http://ladyheavenly.blogspot.fr/2014/09/my-little-box-septembre-2014.html) tu peux voir un intitulé ‘lien vers cet article’ en gros et de couleur grise mais je ne sais pas d’où il vient (c’est juste avant la jolie petite maison qui permet de revenir à l’accueil). Merci encore pour ce tuto !! Bisous

      • graphicart

        11 septembre 2014 at 19 h 46 min

        Je t’ai répondu sur HC, fais ce tuto dans l’autre sens : http://bloggercode-blogconnexion.blogspot.fr/2012/02/lien-vers-liens-vers-ce-message.html#fil00 mais pense bien à sauvegarder ton modèle avant dans modèle > sauvegarder / restaurer. Sinon ce lien n’a aucun rapport avec l’installation des tutos que je propose, tu as dû l’installer à cause d’autre chose ^^

      • graphicart

        11 septembre 2014 at 19 h 48 min

        et encore plus simple, tu peux le désactiver dans Tableau de bord > Mise en page > Modifier Articles du blog > Options de la page d’articles > décocher liens vers cet article

  • Tatjana

    9 février 2015 at 12 h 54 min Répondre

    Merci pour tes indications, que j’ai appliquées à mon blog de décoration. Je trouve que le modèle « menthe » s’adapte particulièrement bien au design et aux colories de mon blog http://lafilledesetoilesfilantes.blogspot.fr

  • Zina

    11 mars 2015 at 11 h 40 min Répondre

    J’ai essayé d’appliquer l’option 1, mais snif ! je n’y arrive pas ! En fait, j’ai déjà un modèle qui ressemble au tien, mais dans le mien il y a juste « previous » et « next » sans mentions des titres des articles, que j’aimerais beaucoup pouvoir ajouter. Le problème c’est que je ne trouve pas comment modifier mon modèle… Est-ce que tu pourrais m’aider ?
    Voici mon script. Merci :)

    //<![CDATA[
    (function($){
    var newerLink = $('a.newer-link');
    var olderLink = $('a.older-link');
    $.get(newerLink.attr('href'), function (data) {
    newerLink.html('Next ‘+$(data).find(‘.post h3.post-title’).text()+ »);
    }, »html »);
    $.get(olderLink.attr(‘href’), function (data2) {
    olderLink.html(‘Previous ‘+$(data2).find(‘.post h3.post-title’).text()+ »);
    }, »html »);
    })(jQuery);
    //]]>

  • Majdoubi

    26 mars 2015 at 19 h 25 min Répondre

    Grand grand merci, j’ai ajouté les images à mon blog. bon courage

  • Ophélie.

    13 avril 2015 at 11 h 41 min Répondre

    Merci beaucoup pour ce tutoriel ! Grâce à toi, je vais pouvoir changer pleins de détails sur mon blog ! ♥♥

  • Virginie Hedenne

    14 avril 2015 at 11 h 08 min Répondre

    J’ai essayer d’appliquer les 2 en meme temps mais bien sur ça n’a pas marcher j’avais pas fait attention, comment je peux faire pour que tout revienne comme avant et que je recommence qu’avec l’option 2 ?
    bisou <3

  • Anne est Vernie

    22 avril 2015 at 15 h 31 min Répondre

    Merci!
    J’ai utilisé l’option 1 et ça fonctionne sans problème.
    Ton blog est une vrai mine d’or 😉
    Biz

  • Un Nuage à Croquer

    4 mai 2015 at 12 h 18 min Répondre

    Vraiment, je te remercie pour ton blog, je viens d’appliquer plusieurs de tes tuto et ça marche toujours à merveille *.*

    C’est super pour une débutante comme moi ^^

  • Meg

    11 mai 2015 at 13 h 33 min Répondre

    Bonjour Graphic’art, voilà j’ai un soucis. J’ai téléchargé il y a peu de temps le modèle ‘nature’ que tu proposais et que je trouve top, j’ai modifié certaines polices etc mais rien de bien poussé.
    Et j’ai remarqué un soucis, depuis que j’ai télécharger ton modèle, je n’ai plus sur la page d’accueil, des pages suivantes pour mes articles ! Et quand je clique sur article, idem, je n’ai ni article suivant ni article précédent …
    Sur ma page d’accueil il y a donc 10 articles et basta, impossible de me rendre sur les pages suivantes … Du coup, je suis très embété, j’aurai apprécié de pouvoir mettre les titre des mes articles à la place, comme tu le proposes avec cet article, mais comme je me retrouve sans la « base » dont je te parle plus haut, je ne sais vraiment pas comment faire … As tu la solution ?

  • PaulineDouceur

    14 juin 2015 at 16 h 50 min Répondre

    Bonjour,

    Je ne sais pas vraiment si tu pourras m’aider.
    Mais j’aimerais enlever les points qui suivent, justement l’accueil et les articles plus anciens. Je ne l’ai aime pas du tout…

    Merci de ton aide.
    Pauline.

  • Peggy

    17 décembre 2015 at 22 h 56 min Répondre

    Merci aussi pour celui-ci, c’est tellement simple et rapide !

  • Laura

    14 février 2016 at 14 h 41 min Répondre

    Merci pour la première astuce que je cherchais depuis longtemps !
    Et j’aime beaucoup ton nouveau design et je suis contente que tu es repris les tutos & articles 😉

    • Laura

      14 février 2016 at 15 h 35 min Répondre

      Par contre, j’aimerai savoir comment personnaliser ? J’aimerai changer la couleur etc.

  • labeauteenblog

    17 avril 2016 at 16 h 45 min Répondre

    Bonjour,
    Merci beaucoup pour ce tuto. Il y a quelques temps tu en avais mis dans le même genre…j’avais installé une petite maison en guise du logo d’accueil (ainsi que 2 flèches) mais ces logos ont disparu de mon blog et des carrés les ont remplacé :-(
    J’ai opté pour la version 1, je voulais installé la 2ème mais je ne trouve pas le code cité …

  • Moondies

    11 mai 2016 at 15 h 53 min Répondre

    Bonjour ! Merci beaucoup pour ton tutoriel, c’est exactement ce que je cherchais depuis un bon moment maintenant ! J’ai une petite question, je ne m’y connais pas du tout en code etc, je voulais savoir comment faire pour agrandir les flèches afin qu’on les remarque plus facilement quand on est en bas de page. Voilà merci beaucoup !

  • Kloé

    30 mai 2016 at 17 h 13 min Répondre

    Hello !

    D’abord merci pour ton blog et tous tes tutos qui sont extrêmement bien faits ! C’est une véritable mine d’or quand on se lance dans la création d’un blog :)
    J’ai appliqué à la lettre près les étapes de ce tuto et tout a bien fonctionné :) (comme tu peux le voir sur : http://a-quatre-mains.blogspot.fr/ ). Seul petit bémol, j’aimerais que le tout soit un peu plus grand/gros et également plus centré si cela est possible. Est-ce que tu aurais une idée de la démarche à suivre ? J’ai essayé via le code « font-size » mais ça n’a évidemment pas marché ^^

    Bref, j’espère que tu pourras m’aider ! Merci d’avance et à très vite :)

    Kloé

Poster un commentaire