Remplacer messages précédents - suivants par des flèchesmage

obtenir ces boutons

Remplacer "Messages plus récents -
Messages plus anciens" par des flèches

Pour remplacer "Messages plus récents - Messages plus anciens" par ces flèches, il faut remplacer les mots par des images :





Remplacer les mentions d'origine par les instructions indiquées EN ROUGE. Les 2 premières ajoutent une flèche vers la gauche et la droite ; les 3° et 4° remplacent (facultatif) le mot "Accueil" par l'image d'une petite maison.

Les images peuvent être remplacées par d'autres dont l'adresse (http:// ...) existe ou est obtenue en sauvegardant les images temporairement dans un message.

Pour atteindre la partie concernée, effectuer une recherche de la mention "nextprev" (cliquer sur "Édition", en haut à gauche de l'écran, puis sur "Rechercher" - écrire "nextprev" - cliquer sur "suivant").
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>

<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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>
<img alt='' border='0' id='BLOGGER_PHOTO_ID_5421005467871665602' src='http://2.bp.blogspot.com/_sPwH_KmuNT8/SztHwFXw3cI/AAAAAAAAAjY/ImK66yCGAsQ/s200/fleche_116.gif' style='width: 27px; height: 24px;'/>

</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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>
<img alt='' border='0' id='BLOGGER_PHOTO_ID_5421005396525835730' src='http://2.bp.blogspot.com/_sPwH_KmuNT8/SztHr7ll5dI/AAAAAAAAAjQ/vwB3mXOEL-A/s200/fleche_115.gif' style='width: 27px; height: 24px;'/>
</a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<center>
<img alt='' border='0' id='BLOGGER_PHOTO_ID_5421005567015261202' src='http://1.bp.blogspot.com/_sPwH_KmuNT8/SztH12tcFBI/AAAAAAAAAjg/NiYlVd1HzQc/s200/icones_00304.png' style='width: 32px; height: 32px;'/>
</center>
</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<center>
<img alt='' border='0' id='BLOGGER_PHOTO_ID_5421005567015261202' src='http://1.bp.blogspot.com/_sPwH_KmuNT8/SztH12tcFBI/AAAAAAAAAjg/NiYlVd1HzQc/s200/icones_00304.png' style='width: 32px; height: 32px; '/>
</center>
</a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>
Pour inverser les deux flèches, procéder aux corrections en rouge suivantes dans le template :
#blog-pager-newer-link {
float: right;
}
#blog-pager-older-link {
float: left;
}
* * * * *
On peut aussi vouloir supprimer les mentions "Messages plus anciens - Messages plus récents" qui apparaissent lorsque la souris survole les liens. Pour éviter l'affichage des mentions concernées, il faut supprimer les instructions EN VERT ci-dessus.

8 commentaires:

Yoda a dit…

Bonjour, j'ai pu placer les 2 premiers code, mais pour les 2 autres je ne trouve pas les codes suivant :

b:if cond='data:blog.homepageUrl != data:blog.url'
a class='home-link' expr:href='data:blog.homepageUrl'

merci de m'aider

Yoda a dit…

Bonjour, j'ai trouver "blog-pager" mais il n'y a pas le mot "accueil".
c'est bien dommage, car cela aurait été plus simple.
merci quand même.

Meiser a dit…

Dans un modèle classique, le code pour "accueil" est le suivant :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>


Meiser a dit…

Donc, l'affichage du mot "accueil" est généré par :

<data:homeMsg/>

(2x)


Yoda a dit…

Après 4 jours de recherche je l'ai enfin trouvé ce code.
Mon modèle de blog doit vraiment être classique, car sans ton explication avec le code (data:homeMsg/) je n'aurai jamais trouvé.

voir le code ci-dessous que j'ai dans mon blog : (/b:if)
(a class='home-link' expr:href='data:blog.homepageUrl'></a)

merci maiser (vraiment super c'est tutoriaux

Nicolas Lhomme a dit…

Bonjour !
Ces explications sont parfaites, merci beaucoup !

J'ai juste une petit souci : le centrage ne marche pas pour l'image que j'ai utilisée pour remplacer le mot accueil.
Sur la dernière page, lorsqu'il n'y a qu'une flèche et mon icône "maison", la maison se décale sur la droite, alors que j'aimerai qu'elle reste centrée...
Comment faire, auriez vous une idée ?

Mon blog : www.nicolaslhomme.com

Encore merci!

Meiser a dit…

Essayez :

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


B.N a dit…
Ce commentaire a été supprimé par l'auteur.