Jérom avait voulu savoir comment mettre des icônes à la place des mots "messages anciens" et "messages récents". Voici un petit tuto sur le sujet inspiré d'un l'article de Jim.
1. Changer le texte du lien
Si vous voulez changer les mots "message ancien", "accueil" et "message récent" par d'autres mots, allez sur "Mise en page", "Modifier le code HTML" et cochez sur "développer des modèles de gadget". Trouvez le bloc de code 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 </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 </span> </b:if> <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> </div> |
Changez les lignes de code en couleur par le mot à votre guise (Celui en vert est pour "messages récent"s, celui en rouge pour "messages anciens" et ceux en bleu pour "Accueil").
<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 </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 </span> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'>Présent</a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'>Présent</a> </b:if> </b:if> </div> |
2. Remplacer les liens par des images
Comme Jérom, vous aurez peut être envie de remplacer les mots "messages anciens", "accueil" et "messages récents" par des images. Pour cela, il vous faut d'abord héberger vos images sur un site donnée (Google pagecreator ou Photobucket). Prenez les liens pour vos images et insérez chacun d'eux dans une balise suivante :
<img src="URL DE L'IMAGE" /> |
Remplacez les codes en rouge, bleu et vert par le code ci-dessus où vous aurez inséré le lien vers votre image.
Cela va ressembler à quelque chose comme ceci :
<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 </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 </span> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><img src="http://www.blogpulp.com <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><img src="http://www.blogpulp.com </b:if> </b:if> </div> |
3. Positionner à "messages anciens" et "messages récents"
Pour que les liens ou les icones pour les "messages anciens" et "messages récents", trouvez cette portion dans le code et changez ou ajoutez le code en rouge.
float: right;
}
#blog-pager-older-link {
float: left;
}
P.S. : Vous pourriez être intéressé par certains articles publiés par Le BloGGers.
Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.
Merci pour l'astuce Rodney, c'est très clair!
RépondreSupprimerBonjour Rodney,
RépondreSupprimerJ'ai bien suivi ton astuce mais quand je clique sur "passé" (par exemple), il ne se passe rien. Je vois bien dans la barre des tâches que l'adresse vers la page précédente est bonne mais rien ne se passe.
Qu'en penses-tu ?
Merci
@ jane-air : Je viens de passer sur ton blog et on dirait que ça marche en cliquant sur "Billet précedent" comme sur "billet suivant".
RépondreSupprimerAu fait, il est vraiment beau ton modèle.
Ah oui, désolée, j'étais partie manger. En fait, c'était simplement blogger qui a eu des ratés (ça lui arrive parfois :) )
RépondreSupprimerMerci pour cette astuce, je l'avais cherché en vain. Heureusement Rodney de Blogger au bout du doigt est là ! :)
Et merci pour le compliment, à plus ;)
Salut Rodney je vois que tu as mis un lien vers mon blog c'est cool pour ton astuce sur "messages anciens/messages récents"" c'est excellente bonne continuation au faite si tu as le temps fait un tour sur mon autre blog Ajouter un gadget
RépondreSupprimeret dit moi ce que tu en pense !!!
Bonjour!
RépondreSupprimerje voulais seulement te dire que j'ai bcp aimé le design de ton blog!le contenu aussi!
bonne continuation !
http://vaoox.blogspot.com/
Bonjour Rodney,
RépondreSupprimerMerci pour l'astuce. Mais j'aimerais aller plus loin en intégrant des numéros de pages (Ex : "<< < 1 2 3 4 5 > >>" ) à la place de "Plus récents - Plus anciens".
Merci d'avance pour ton aide
Personne ne peut m'aider ? :-(
RépondreSupprimerbonjour à tous,
RépondreSupprimermerci Rodney, ce blog est une caverne d'ali baba
pour ceux qui veulent radicalement supprimer ces inscriptions : il suffit de ne rien marquer à la place du code à remplacer.
Merci pour ces informations.
RépondreSupprimerHello Rodney,
RépondreSupprimerIl y a quelques temps, j'avais carrément supprimé les "messages plus anciens" et "messages plus récents". Aujourd'hui, je me suis rendue compte que je n'aurais pas dû car une fois la liste des messages des pages libellés affichéé, le lecteur ne peut plus remonter dans le temps au-delà des 20 messages affichés sur la page. (c'était une belle connerie de faire ça, surtout ne le faites pas !)
J'ai donc fait la manipulation inverse mais malheureuseument Blogger m'affiche systématiquement le même message d'erreur qui me dit qu'une balise span n'est pas ferméé. Hors, tout est parfaitement fermé.
Pour palier momentanément à mon problème j'ai modifié le nombre de messages à afficher par page (je l'ai passé de 20 à 40), mais cette solution n'aura qu'un temps...
Je ne sais plus quoi faire là... au secours ! Merci d'avance à quiconque pourra me donner un peu d'aide.
Juste pour vous dire que c'est réparé. C'était un problème de slashs en trop ; je ne comprends toujours pas pourquoi d'ailleurs, mais bon ça marche, c'est l'essentiel. :)
RépondreSupprimerSlt all , moi j'utilise blogger bcp et je connais bcp dastuce template et de modification , , et pour cette astuce de centré limage et les texte je lis allé la http://telechargementdz.blogspot.com/ tu va me trouver et je te guide pour faire tous ce que tu veut ..............
RépondreSupprimeret pour des bon theme blogger allé ici http://www.bloggertricks.com
pour ce qui veulent ce theme http://3.bp.blogspot.com/_Toi-rh0Nm00/Sc4ixSQ17fI/AAAAAAAAC-k/YhPj7a1Vrmg/s400/turnout+mag+screenshot.jpg
RépondreSupprimertelechargemenr le par la http://myblogtalk.com/bloggertemplates/turnoutmag/turnoutmag.zip
Merci a vous
J'ai voulu mettre des petites flèches à la places de messages plus anciens "→" sauf que après avoir fais ça, je n'ai plus messages plus anciens, ni ma flèche.
RépondreSupprimerComment faire ?
Merci beaucoup si tu m'aides.
Ce commentaire a été supprimé par l'auteur.
RépondreSupprimer