Nouveau Blogger : Changer les textes "Messages plus récents, plus anciens et Accueil" par des images

Aujourd'hui je vais vous expliquer comment changer les textes :messages plus anciens, nouveaux messages et accueil par des images,  sur les nouveaux modèles de Blogger. Comme j'ai eu quelques problèmes lorsque j'ai voulu faire des modifications sur mon blog, j'ai décidé de faire ce tutoriel. Je vous préviens, la procédure est un peu longue.

Normalement sur Blogger : nous avons ceci  :



Nous souhaitons obtenir le résulat final que montre cette image ci-dessous.


 Tout d'abord vous avez besoin d'avoir des images de navigation, vous pouvez en trouver sur ces sites suivants :
http://openclipart.citizen-web.com/
http://www.freeiconsweb.com/

Bien entendu, vous devez les héberger sur les quelques sites que j'ai pris en exemple : 
http://imageshack.us/
http://photobucket.com/

Pour faire ce tutoriel, je me suis inspiré de celui de de Blogbulk "Customizing "Newer + Older Posts" Link in Footer"

1. Aller sur votre tableau de bord
2. Présentation
3. Modifier le code Html
4. Sauvegardez votre modèle (au cas où )
5. Développer des modèles de gadgets

Bon nous y sommes... cherchons ensuite les suivants suivant et remplacer les avec l'url des images. Exemple :

Code de ma flèche droite, pour le message le plus récent :


<img src='http://i252.photobucket.com/albums/hh2/shehrazad/arrow-right-grey.png'/>


  1. Remplacer le code <data:newerPageTitle/> avec le code de l'image de votre icône de  "Messages plus récents
  2. Remplacer le code <data:olderPageTitle/> avec le code de l'image de l'icône "Messages plus anciens"
  3. Remplacer le premier <data:homeMsg/>  avec le code de l'image de l'icône icône "Accueil"

Nous allons donc remédiez à ce problème, c'est pourquoi allons inverser cette présentation.

1. Aller sur votre tableau de bord
2. Présentation
3. Modifier le code Html
4. Sauvegardez votre modèle (au cas où )
5. Développer des modèles de gadgets

Chercher le code suivant :

 
<b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Vous sauvegardez votre travail, et vous obtenez ensuite ceci :

Et remplacer ce code par celui ci :
 
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'> <img src='http://i252.photobucket.com/albums/hh2/shehrazad/arrow-left-grey.png'/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src='http://i252.photobucket.com/albums/hh2/shehrazad/arrow-right-grey.png'/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://i252.photobucket.com/albums/hh2/shehrazad/home.png'/></a>

Commentaires

  1. Hello, bonne semaine à toi, merci pour ce tuto même si je croit avoir vu une autre solution quelque part, mais bon je ne sais plus ou j'ai foutu ce sacré article, je garde le tient qui est fort bien fait, merci et a bientôt

    RépondreSupprimer
  2. Hello Thierry :)

    J'ai fait ce tutoriel car j'avais du mal à trouver la solution en arrangeant ce modèle. J'avais cherché le tutoriel en français corrigeant le bug, mais je ne l'ai pas trouvé (sinon je ne l'aurai pas fait). Je vais en faire un autre sur la description de facebook et Blogger.. J'apprends beaucoup en arrangeant mon modèle mais je pense que celui ci est le final (car cela prend trop de temps):D

    envoie moi à l'occasion le tutoriel dont tu me parles...

    A bientôt et bonne journée

    RépondreSupprimer

Enregistrer un commentaire

Voici quelques consignes pour laisser un commentaire :

- Rédigez votre commentaire dans la zone prévue ci-dessous.
- Vous pouvez choisir de commenter en utilisant votre compte Google, un pseudonyme (Nom/Url) ou de manière anonyme.
- Si vous souhaitez partager une vidéo YouTube, il vous suffit d'insérer l'URL de la vidéo.
- Pour être informé des réponses, cochez la case "M'informer".
- Cliquez sur "Publier" pour envoyer votre commentaire ou sur "Aperçu" pour le prévisualiser avant de le publier.

Form for Contact Page (Do not remove)