Comment utiliser des images pour naviguer entre les billets ? @ acKorea

mercredi 16 juillet 2008

Comment utiliser des images pour naviguer entre les billets ?

Un hack blogger très connu. Le but étant simplement d'avoir une navigation en image entre les billets. C'est plus agréable pour les yeux :)

Cette astuce est pour tout les niveaux car il n'y a aucune connaissance particulière à avoir.

Allez dans votre Tableau de bord > Mise en paage > Modifier le code HTML > cocher Développer des modèles de gadget.

Cherchez (CTRL-F) dans le code:

<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>
<div class='clear'/>
</b:includable>

Copiez et remplacez le bloc par:

<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 expr:alt='data:newerPageTitle' src='http://i33.tinypic.com/24gku93.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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img expr:alt='data:olderPageTitle' src='http://i36.tinypic.com/mrzad3.png'/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:title='data:homeMsg' expr:href='data:blog.homepageUrl'><img expr:alt='data:homeMsg' src='http://i34.tinypic.com/15mzpkx.png'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:title='data:homeMsg' expr:href='data:blog.homepageUrl'><img expr:alt='data:homeMsg' src='http://i34.tinypic.com/15mzpkx.png'/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

On obtient ceci:

Pour personnaliser les images, remplacez les liens suivants par vos liens dans le code à insérer.
- Message plus récent: http://i33.tinypic.com/24gku93.png
- Message plus ancien: http://i36.tinypic.com/mrzad3.png
- Accueil, home: http://i34.tinypic.com/15mzpkx.png

Voilà, simple n'est-ce-pas ? :)

EDIT: Suite au commentaire de Sophie, ajout de expr:title='data:homeMsg' :)

18 Commentaires

16 juillet 2008 15:51 Basto a dit…: Merci, merci toinou :)
16 juillet 2008 17:34 tOiN0U a dit…: De rien :)
16 juillet 2008 22:09 sophie la marmotte a dit…: Super toutes tes astuces pour Blogger ! Merci !
16 juillet 2008 22:15 tOiN0U a dit…: De rien Sophie ;)
Une astuce simple et pratique :)
16 juillet 2008 22:20 sophie la marmotte a dit…: Je viens d'appliquer !

Je vais regarder tes autres astuces.
17 juillet 2008 00:02 tOiN0U a dit…: Je viens de voir ;) Je suis ravi d'avoir pu t'aider :). Yep, n'hésites pas, il y a d'autres astuces et je vais en poster d'autres bientôt :)

Pour les regrouper, nuages de tag > blogger
2 août 2008 20:16 sophie la marmotte a dit…: J'ai rajouté expr:title='data:homeMsg' après expr:href='data:blog.homepageUrl' (ça apparaît deux fois) pour avoir au survol de la souris le mot "Accueil".
3 août 2008 02:02 tOiN0U a dit…: Oui, c'est une bonne idée :) Je l'ai sur le blog mais j'ai oublié de faire la modif. Je rajoute :)
3 août 2008 10:51 sophie la marmotte a dit…: Va jeter un coup d'oeil sur mon blog et tu me diras ce que tu en penses.
3 août 2008 16:26 tOiN0U a dit…: Ok je vais un tour :) Et je te tiens au courant ;)
4 août 2008 17:59 baba a dit…: Hop, ça marche pour le survol de la souris 'Accueil'. Thx ;)
4 août 2008 21:00 tOiN0U a dit…: Il faut dire merci à Sophie ;)
7 août 2008 00:01 ian a dit…: Appliqué aussi, c'est pas mal.
En même temps qui ne sait pas que la petite maison c'est l'accueil ?
Par contre tu n'as pas parlé de la css ici (comme j'ai recommencé mon template de zéro, je n'avais pas de style par défaut pour cette navigation)
7 août 2008 00:08 tOiN0U a dit…: Oui Ian, c'est sûr, tout le monde comprend le symbole de la petite maison mais c'est surtout dans l'optique d'homogénéiser les balises title :)

Je n'ai pas parlé de CSS car je souhaite rester simple :) En parlant de CSS, tu es plutôt doué et j'aime bien ta template aussi :)
6 mai 2009 14:21 Beldarak a dit…: Et hop appliqué aussi (même s'il faut encore que je revoit les couleurs des boutons quand j'aurai plus la flemme... un jour...).

Je suis passé par le blog de Ian qui parlais de ton astuce pour aboutir ici, le monde est petit :)
7 mai 2009 17:57 tOiN0U a dit…: Lol oui, le www est petit :D
13 mai 2009 05:51 Julien Castanié a dit…: Nickel ce hack !
Je l'ai mis sur mon Blogger, merci pour l'info.

bonne continuation,

julien
14 mai 2009 02:47 tOiN0U a dit…: De rien et merci Julien ! :D