Tutofaf

Un blog d'aide fait par les femmes au foyer pour les cyberquiches !

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!

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

Posté par damouredo à 10:09 - 5- Mode avancé - Commentaires [13] - Permalien [#]

Commentaires

    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
  • 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

    Posté par handbags, 18 mars 2010 à 08:15
  • coach outlet

    I'd like to share it with my friend, we will discuss it together. Thank you for your insight.

    Posté par coach outlet, 03 mars 2011 à 04:48
  • Each time a new surprise,I like it!

    Each time a new surprise,I like it!

    Posté par Microsoft Office, 27 août 2012 à 14:10
  • Pas facil tout ça

    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é.

    Posté par Totomi, 08 janvier 2013 à 21:15
  • 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

Poster un commentaire







Haut de Page