Mettre des icône à la place de "messages anciens/messages récents"

By
Advertisement

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'>
<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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>
<data:olderPageTitle/></a>
</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'>
Future</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'>
Passé</a>
</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'>
<img src="http://www.blogpulp.com/imagehost/images/733257041.jpg" /></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 src="http://www.blogpulp.com/imagehost/images/180881814.jpg" /></a>
</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/imagehost/images/139275805.jpg" /></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src="http://www.blogpulp.com/imagehost/images/139275805.jpg" /></a>
</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.

#blog-pager-newer-link {
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.


16 commentaires:

  1. Merci pour l'astuce Rodney, c'est très clair!

    RépondreSupprimer
  2. Bonjour Rodney,

    J'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

    RépondreSupprimer
  3. @ 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".

    Au fait, il est vraiment beau ton modèle.

    RépondreSupprimer
  4. 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 :) )
    Merci 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 ;)

    RépondreSupprimer
  5. 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
    et dit moi ce que tu en pense !!!

    RépondreSupprimer
  6. Bonjour!

    je voulais seulement te dire que j'ai bcp aimé le design de ton blog!le contenu aussi!

    bonne continuation !
    http://vaoox.blogspot.com/

    RépondreSupprimer
  7. Bonjour Rodney,
    Merci 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

    RépondreSupprimer
  8. bonjour à tous,
    merci 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.

    RépondreSupprimer
  9. Merci pour ces informations.

    RépondreSupprimer
  10. Hello Rodney,

    Il 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.

    RépondreSupprimer
  11. 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épondreSupprimer
  12. Slt 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 ..............

    et pour des bon theme blogger allé ici http://www.bloggertricks.com

    RépondreSupprimer
  13. pour ce qui veulent ce theme http://3.bp.blogspot.com/_Toi-rh0Nm00/Sc4ixSQ17fI/AAAAAAAAC-k/YhPj7a1Vrmg/s400/turnout+mag+screenshot.jpg

    telechargemenr le par la http://myblogtalk.com/bloggertemplates/turnoutmag/turnoutmag.zip

    Merci a vous

    RépondreSupprimer
  14. 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.
    Comment faire ?
    Merci beaucoup si tu m'aides.

    RépondreSupprimer
  15. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT