Web-Design - Igor Laszlo: Blog pager : changer ou supprimer les liens de navigation entre deux billets (message plus récent, message plus ancien et accueil)

Quand vous rentrez dans un article dans Blogger, vous pouvez constater qu'il y a des liens à pied de votre message/article (post-footer) : "Message plus récent", "Accueil" et "Message plus ancien". Ça s'appelle blog-pager en anglais qui serrent à la navigation entre deux articles sans retourner à la page d'accueil. Certaines personnes, comme moi, n'aiment pas la présentation de ces liens. Moi, personnellement je ne les aime pas parce que je trouve qu'il y a trop de liens autour et ça trouble le regard d'ensemble, esthétiquement n'est pas beau et ça dérange l'attention du visiteur.

Vous pouvez :

1) changer le texte des liens,

2) ajouter une image à coté du texte des liens,

3) remplacer le texte avec une image des liens,

4) repositionner les liens,

5) faire disparaître ces liens.

Quand vous planifiez à changer de codes de la présentation de vos pages, ayez habituer à commencer toujours avec les pas suivants :

Allez à l'onglet Présentation > Modifier le code HTML et cliquez sur "Télécharger le modèle dans son intégralité". Ça vous permet de télécharger votre version actuel, dans le cas d'une erreur, vous pouvez la recopier et la réinstaller.

Après le téléchargement veuillez cocher la rubrique Développer des modèles de gadgets. Cet acte va montrer la page entière de codes, plus précisément la partie <body> qui est cachée. Nous allons changer des codes qui se trouvent dans cette partie (voir l'image ci-dessous).

Trouvez le code ressemblant à celui-ci :

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Messages du blog' type='Blog'>

<b:includable id='nextprev'>

<b:if cond='data:newerPageUrl'>

</b:if>

<b:if cond='data:olderPageUrl'>

</b:if>

La zone bleu représente le lien "Message plus récent", la zone verte est le code du "Message plus ancien" et le texte ocre est la partie du lien "Accueil".

Pour changer le texte des liens, vous devez remplacer les parties suivantes avec votre texte :
► remplacer <data:newerPageTitle/> par exemple avec PROCHAIN ARTICLE
► remplacer <data:olderPageTitle/> par exemple avec ARTICLE PRECEDANT
► remplacer <data:homeMsg/> (si le code se représente deux fois, vous devez changer seulement au premier, souvent c'est le cas) par exemple avec TOUS ARTICLES

Résultat :

<b:if cond='data:newerPageUrl'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>PROCHAIN ARTICLE</a>

</b:if>

Pour ajouter une image à coté du texte des liens, vous devez insérer les codes de liens de vos images comme c'est indiqué dans les suivants :

<img src='http://www.igorlaszlo.com/webdesign/blogpager-newer3.png'/> - remplacé la partie rouge avec le lien vers votre image hébergé !

Résultat :

<b:if cond='data:newerPageUrl'>

</b:if>

Pour remplacer les textes avec vos images, vous devez remplacer les parties suivantes avec les liens vers vos images :

► remplacer <data:newerPageTitle/> par exemple avec <img src='http://www.igorlaszlo.com/webdesign/blogpager-newer3.png'/>
► remplacer <data:olderPageTitle/> par exemple avec <img src='http://www.igorlaszlo.com/webdesign/blogpager-older3.png'/>
► remplacer <data:homeMsg/> (si le code se représente deux fois, vous devez changer seulement le premier, voir " autre cas " à la fin de cet article) par exemple avec <img src='http://www.igorlaszlo.com/webdesign/blogpager-home3.png'/>

Pensez à remplacer la partie rouge avec le lien vers votre image hébergé !

Résultat :

<b:if cond='data:newerPageUrl'>

</b:if>

Peut-être vous avez constaté qu'on peut "tourner les pages" à l'envers, c'est que les messages les plus récents qui sont vers la gauche et les plus anciens sont vers le droit. Personnellement je suis gêné par cette méthode, donc j'ai renverser les deux boutons.

cherchez les codes suivants dans la parti CSS entre <head></head> et insérez float: $startSide; et float : $endSide; comme c'est indiqué ci-dessous :

/* Comments
----------------------------------------------- */
#…
#…
#…

#blog-pager-newer-link {
float: $startSide; > il faut supprimer !

float: $endSide;
}

#blog-pager-older-link {
float: $endSide; > il faut supprimer !

float: $startSide;
}

#blog-pager {
text-align: center;
}

Pour faire disparaître ces liens, cherchez les codes suivants dans la parti CSS entre <head></head> et insérez display:none; comme c'est indiqué ci-dessous :

/* Comments
----------------------------------------------- */
#…
#…
#…

#blog-pager-newer-link {
float: $endSide;
display: none;
}

#blog-pager-older-link {
float: $startSide;
display: none;
}

#blog-pager {
text-align: center;
display: none;
}

Si vous voulez changer vos liens aux images, je peux vous offrir quelques unes, voir ci-dessous. Ce que je voudrais vous demander, si vous pouvez lier les images avec un lien direct et pas sauvegarder et les héberger chez vous. Pour vous ça libère de l'espace, pour moi il y aura plus de liens vers mon site. Merci !