Petit tuto : Lien pour "Lire la suite"

01 février 2007

Petit tuto : Lien pour "Lire la suite"

Après moults tatonnements et rageages divers, j'ai ENFIN réussi à vaincre le CSS et le HTML réunis en coalition pour me faire perdre mon sang froid :

J'ai fait un lien pour LIRE LA SUITE!

Merci à cepamoi pour son tuto qui m'a permis de comprendre 2/3 trucs par ci par là, mais quelques détails manquaient dans son billet pour des novices comme moi...

Voilà donc le tuto pour lire la suite, spécial cyberquiche pas encore bilingue en html...
NB : il faut être en mode avancé, sinon ça marche pas of course!

- Première étape : il faut ajouter à la feuille de style générale un code CSS.
Allez dans apparence>editer modèle>feuille de style et ajoutez ceci tout en bas : #hidden {display:none} C'est un code qui vous dit que l'élément auquel on attribue l'identité "hidden" sera caché. - Deuxième étape : vous tapez votre message normalement et vous repérez l'endroit où vous voulez couper votre message.
Puis vous passez en mode HTML dans l'édition du message en cliquant sur les <> sur la barre de mise en page - Troisième étape :
Tout en haut de votre message en mode html, vous copiez-collez le code ci-dessous : <script ="type/css">
#hidden {display:none}
</script> A l'endroit où vous voulez que 'lire la suite' apparaisse, vous copiez/collez ce code <p><a href="#nogo" onclick="document.getElementById('hidden').style.display = 'block';
this.style.display = 'none';">Lire la suite...</a></p> Puis vous mettez ce code <p id="hidden"> avant la première lettre du premier mot de la suite de votre message et vous retirez tous les </p> et <p>contenus dans la suite de votre message SAUF à la fin -fin et vous mettez un </p> à la fin-fin du message. En résumé, voilà les codes dont vous avez besoin pour votre lire la suite : - Feuille de style : #hidden {display:none} -En haut du message : <script ="type/css">
#hidden {display:none}
</script> -A l'endroit où vous voulez que Lire la suite apparaisse : <p><a href="#nogo" onclick="document.getElementById('hidden').style.display = 'block';
this.style.display = 'none';">Lire la suite...</a></p> -Avant la suite de votre message <p id="hidden"> -A la toute fin de votre message </p> En clair ça donne ça : p><script>
#hidden {display:none}
</script>
</p> <p>Test de message</p> <p><a onclick="document.getElementById('hidden').style.display = 'block';
this.style.display = 'none';" href="#nogo">Lire la suite...</a></p> <p id="hidden">Ou est la suite???</p> Elle est pas belle la vie? Astuce 1:Si vous avez plusieurs "messages à suite" sur une même page, utilisez un #hidden différent par message, c'est à dire #hidden, #hidden1, #hidden2, etc...'que vous rajoutez de la même façon dans feuille de style
Astuce 2:Ce n'est pas le mot hidden qui cache le message, mais la propriété CSS display:none. A la place de #hidden, vous pouvez utiliser #caché ça fonctionne aussi bien.
Astuce 3 : Vous pouvez mettre ce que vous voulez à la place de 'lire la suite', en remplacant simplement les mots dans votre message en html.

Merci à Delphine pour ce tuto

Posté par damouredo à 10:09 - 5- Mode avancé - Commentaires [9] - Rétroliens [0] - Permalien [#]

Commentaires

han trop bien!!justement je cherchais comment faire ça sous canablog!!merci beaucoup

Posté par Northern_Star, 06 février 2007 à 18:31

Wow, bravo ! Ça faisait des années-lumières que je me cassais la tête à savoir comment faire ça sur CanalBlog ! Vous pouvez pas savoir à quel point je suis contente là LOL C'en est ridicule... XD

Posté par p o i s o n e d*, 18 février 2007 à 23:27

on dirait que l'astice de hidden1, hidden2 ne fonctionne pas... j'essaie depuis quelques minutes et rien ne fait, pourtant, j'ai ajouter les hidden1,hidden2 de la même manière que pour hidden..

Posté par p o i s o n e d*, 14 mars 2007 à 18:57

laissez faire, j'ai réussit à me débrouiller pour que ça fonctionne sauf que c'est très mal expliquer votre astuce..voire même carrément pas expliquer!

Pour que ça fonctionne, j'ai remit le script à mettre en haut de la note où je voulais la deuxième suite de mon message, ensuite j'ai continuer avec le code (et donc le message en lien) où je le voulais mais il a fallu que je rajoute hidden1 ici:
"document.getElementById('hidden1')", et puis le reste c'est comme pour hidden..! ^^

Posté par p o i s o n e d*, 14 mars 2007 à 19:05

Eh ben...

On dirait que vouloir aider les gens apparement ça leur plaît pas...
En tout cas, merci pour cette astuce, j'ai été sur Live jounal, ou il y avait le "read more", et j'ai été bien triste de le quitter ce truc... heureusement, tu es arrivé!!! j'ai pas encore essayé, mais je sens que je vais m'amuser...

Posté par Berlingotte, 18 mars 2007 à 18:25

donc je suis la seule avec qui ça ne marche pas?
lorsqu'on clique sur mon "lire la suite" ça envoie vers la page de mon compte canalblog..
si quelqu'un peut m'expliquer pourquoi!

Posté par fraisalo, 26 juillet 2007 à 14:56

MERCI!!!

Merci merci et encore merci!!!!!! Des lustres que je me galérais de tutos à moitié expliqués en tutos pour pros ou pire des tutos où les codes sont mauvais!! Merci beaucoup à vous, pour m'avoir répondu pour me donner le lien, c'est très gentil!! Puisque c'est comme ça, mon premier lire la suite dans le blog, ce sera un long article sur votre super blog !! =) Mici mici !!!

Flo

Posté par Flo, 22 octobre 2007 à 20:10

Comment refermer le message

Salut,

C'est super comme css, simple et efficace.
Par contre j'ai juste une question, y a t'il un moyen de refermer le texte que l'on affiche avec lire la suite et revenir ainsi au texte initial.

Merci encore.

Posté par nini, 23 novembre 2007 à 10:06

voui

en fait c'est faisable en mode normal
(grace au css- d'ailleurs[Clin d oeil])
me suis permis de "l'adapter" pour le mode normal ici http://alerionexemple.canalblog.com/archives/2008/07/04/9816118.html bonne journée

Posté par Alérion, 04 juillet 2008 à 21:17