Magazine Blog

Comment utiliser des images pour naviguer entre les billets ?

Publié le 16 juillet 2008 par Antoine Toin0u
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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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: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: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:
Comment utiliser des images pour naviguer entre les billets ?
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 ? :)


Retour à La Une de Logo Paperblog

LES COMMENTAIRES (1)

Par 
posté le 19 juillet à 10:09
Signaler un abus

Heu oui... mais pour certaines, c'est plus lent à comprendre ;o) merci pour toutes ces astuces!

A propos de l’auteur


Antoine Toin0u 142 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Magazines