Créer un lien "Lire la suite..."

Publié le par PêUR

Mise à jour le 21/01/2006 00:21

Comment puis-je faire un lien "Lire la suite..." afin de ne pas afficher tout mon article qui es très long?

Cette question a souvent été posée sur le forum, avec des solutions peu convainquantes: Créer 2 articles, créer 2 blog, etc...

Depuis la v1.91, Over-blog propose aux blogs Premiums cette possibilité.

Voici une solution en CSS avec une pointe de javascript accessible même en confiance!

ATTENTION: contrairement aux Premiums, cette méthode ne permet pas d'afficher un thumbnail et n'allège pas, en terme de poids, la page d'accueil (L'article est bien là en entier mais caché).

Merci à Fabrice  qui a débloqué mon code pour Firefox ;-)

 

 >>Lire la suite...

1 / Ce qu'il faut faire

Au préalable, et une fois pour toute, renseignez cette ligne tout à la fin de votre CSS:

 

CSS

#cache {display:none}


 

Ensuite écrivez entièrement votre article. Une fois mis en forme, il suffit d'ajouter ces quelques lignes de code en mode source (HTML) juste à l'endroit où l'on veut le lien "Lire la suite..."

 

HTML

<a href="#nogo" onclick="document.getElementById('cache').style.display = 'block';
this.style.display = 'none';">Lire la suite...</a>

 

Sous ce lien, Il ne vous reste plus qu'à encadrer le texte à afficher lors du clique par des balises <div> comme ci-dessous

 

HTML

<div id="cache">... le texte à cacher ... </div>

 

2 / Explications

On crée un lien "Lire la suite..." qui ne pointe nul part (href=#nogo). Par l'evenement onclick (au clique) on impose au pavé de texte compris dans le block <div id=cache> d'apparaître en forçant son affichage (document.getElementById('cache').style.display = 'block') ce dernier étant non affiché par défaut via le CSS (#cache {display:none}). Enfin, toujours par l'evenement onclick (au clique) on impose au lien de ne pas s'afficher (this.style.display = 'none')

 

3 / Attention

Cette méthode ne fonctionne qu'avec l'affichage d'un article à la fois, en effet, si, sur une même page contenant plusieurs articles, vous utilisez la méthode sans modification, quand vous allez cliquer sur un lien "Lire la suite..." le navigateur ne va pas savoir quel identifiant "cache" il doit faire apparaître (car plus d'un identifiant "cache" par page).

Pour contourner ce problème il suffit pour chaque article de changer le nom de l'identifiant, par exemple cache1, cache2, cache3, toto, titi, tata... dans :

  • #cache1 {display:none}
  • document.getElementById('cache1').style.display = 'block'
  • et <div id=cache1>

 

Liens utiles

 

Publié dans Faq

Commenter cet article

MagieTV 07/12/2015 17:27

Comment faire pour "réduire l'article" ?

brendufat (rose de confusion) 09/04/2007 23:37

Ohhhh ... je n'en espérais pas tant ! :-D

PêUR 10/04/2007 00:02

:)

brendufat 09/04/2007 01:09

En partant de ton idée, j'ai un peu développé et perfectionné. J'en ai même fait un article (qui rend à César ...) http://brendufat.over-blog.com/article-6161349.html
Trouveras-tu le temps de me dire si je n'ai pas écrit trop de bourdes ? (je tremble...)

PêUR 09/04/2007 22:39

Maginfique!Je rajoute ton article en lien dans mon mien :)

Peter 06/03/2007 16:36

Nouveau depuis fin février sur le net, je n'ai pas trouvé de réponse à ma question : comment faire un lien (ascenseur)Haut de page? J'ai construit mon blog avec tes indications qui ont bien aidé le néophite que je suis.Si tu as le temps donne moi ton avis.Merci

PêUR 07/03/2007 00:17

Naviguer dans une page grâce aux ancres

Loop 24/01/2007 22:23

Bonjour PEUR,
Merci pour ton site plein de ressources!
J'ai un souci avec ce 'lire la suite' : sur canalblog ça ne fonctionne pas, j'ai pourtant suivi scrupuleusement les indications, mais rien à faire...
Si tu pouvais m'aider, ce serait super !

Merci!

PêUR 24/01/2007 22:35

Peut être que le javascript en ligne n'est pas permis en ligne.Sinon as-tu une url a me donner où tu as fait ce test pour que je regarde?