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

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 ;-)






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

Lire la suite...



Sous ce lien, Il ne vous reste plus qu'à encadrer le texte à afficher lors du clique par des balises

comme ci-dessous


HTML

... le texte à cacher ...

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

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

Liens utiles

* Une solution altérnative proche de celle-ci en plus réfléchie :) par Brendufat

source:peutetreunereponse.over-blog.com

Rejoindre la communauté de BLOgixtrA

Promouvoir cet article