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!

Lire la suite...

- 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

Comments

[Totomi]

Je suis désolé de vous déranger mais je n'arrive pas à comprendre cette astuce dont j'ai définitivement besoin pour mon design... Je fais j'ai l'impression comme vous l'indiquer mes j'ai juste un lien lire la suite qui se met au milieu de mon message rien ne se cache.

Est-ce qu'il vous serait possible de montrer de par un exemple comment faire en mode avancée s'il vous plait car je ne semble pas être la seule à rencontrer la difficulté.

[handbags]

标签：JZP20100208 Gucci Handbags are the one of the most admired fashion accessories a woman can ever have. Designer Gucci Handbags lines is of the most popular brand of handbags nowadays. There are several different basic styles of Gucci handbags, including Gucci totes, Gucci Boston, Messenger Diaper Bag, Gucci clutches, Gucci wallet/purse and unisex Gucci hobo models. Each style comes in a range of sizes, shapes, and colors to suit any fashion need, and the classic elegance of Gucci is easily paired with both formal styles and casual attire. You are warmly welcomed to our website to choose!
UBB标签：JZP20100208 [url=http://www.prevalentbags.com]Gucci Handbags[/url] are the one of the most admired fashion accessories a woman can ever have. [url=http://www.prevalentbags.com]Designer Gucci Handbags[url] lines is of the most popular brand of handbags nowadays. There are several different basic styles of Gucci handbags, including Gucci totes, Gucci Boston, Messenger Diaper Bag, Gucci clutches, Gucci wallet/purse and unisex Gucci hobo models. Each style comes in a range of sizes, shapes, and colors to suit any fashion need, and the classic elegance of Gucci is easily paired with both formal styles and casual attire. You a

[Alérion]

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

[nini]

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.

[Flo]

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