Insérer 'Lire la suite...' sur mon site. [Fermé]

Signaler
-
 f60lebaladinverni -
Bonjour,

Je souhaiterai insérer plusieurs bouton 'Lire la suite..' pour masquer les articles trop long.
Exactement comme sur ce site http://www.phototo-tbenezeth.com/2013_08_01_archive.html
Mon site n'est pas encore publier (pas d'hébergeur).
Je le signale parce que j'ai trouvé des code HTML mais fallait avoir l'adresse du site URL...
Je le construis avec webacappella et je n'y est pas trouver de bouton spécial comme surWordPress...
Merci.

6 réponses


Peut être en précisant une hauteur définie a ton article => "height: 100px;" dans le css
Ensuite toujours dans le css, préciser de faire défiler ton article car en affichant la suite, la hauteur étant limitée, la fin ne va pas s'afficher :

tonArticle
{
height: 100px;
overflow: auto;
}
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 85404 internautes nous ont dit merci ce mois-ci

Messages postés
2853
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
550
Salut ce que tu cherche a faire ne se fais pas avec html mais avec javascript

voila un pluging jquery qui te fait le truc

https://jedfoster.com/Readmore.js/
Salut Animostab,
Il faut que je télécharge javascript et jquery? Et j'installe sur mon site ou mon ordi?
Ça ne marchera pas alors si je colle les codes (si ça marche avec des codes?!) dans une fenêtre HTML de mon site. Je fais comment pour implanter les blocs sur mes pages de site?
Y' a pas des codes ou des boutons tout fais, pour faire très très simple.
Merci;
Messages postés
2853
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
550
Déjà non il n'y a pas de bouton tout fait tu clic et ca marche sur ton site

Deja tu dois être en mode edition de code

la marche a suivre pour integrer ce pluging

tu copie readmore.js et tu le colle dans ton blocnote et tu l'enregistre sous readmore.js
et tu le met à la racine de ton site
https://github.com/jedfoster/Readmore.js/blob/master/readmore.js

ensuite tu colle le code qui suit avant la balise </body> de ta page (normalement c'est la fin de la page)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="readmore.js"></script>

<script type = "text/javascript">
$('article').readmore();
</script>

si ton texte est dans une balise <article> c'est bon
si ton texte est dans une div avec une class
ex <div class="texte">

tu devra mettre à la place
<script type = "text/javascript">
$('.texte').readmore();
</script>

tu peux dans readmore.js modifier les options
https://github.com/jedfoster/Readmore.js/blob/master/README.md#the-options
Messages postés
174
Date d'inscription
mercredi 29 janvier 2014
Statut
Membre
Dernière intervention
24 juin 2014
4
<html>
<!DOCTYPE>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
TEXTE<br>
<a href="www.echecs.asso.fr">Lire la suite</a><br>
</body>
</html>
Messages postés
2853
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
550
Ha mince j'avais pas vu, c'est juste un lien et pas du tout un 'Lire la suite..' pour masquer les articles trop long
Messages postés
174
Date d'inscription
mercredi 29 janvier 2014
Statut
Membre
Dernière intervention
24 juin 2014
4
Oui, un lien en fin de page d'article et son doc.html
Messages postés
174
Date d'inscription
mercredi 29 janvier 2014
Statut
Membre
Dernière intervention
24 juin 2014
4
Mais le 'lire la suite est un lien !
Messages postés
1292
Date d'inscription
mardi 24 janvier 2012
Statut
Membre
Dernière intervention
26 octobre 2014
221
Perso., je l'aurais fait en PHP car visiblement il sagit plus d'une troncature que d'un plugin qui cache une partie du texte (sur le site mentionné dans le premier poste).
Voici un exemple de troncature » http://forum.creer-un-site.fr/creer-un-site-825-creer-lien-quot-lire-suite-quot#p6077
Salut!
Bon J'avance petit à petit...
Sur le site:
http://les-nouvelles-ficelles-d-annak.blogspot.fr/2010/07/ouvrir-et-fermer-un-texte-lire-la-suite.html
Cela ressemble à ce que je veux faire.
Mais... Premier point tout mon texte est tapé à la suite,il y a bien les espaces mais pas le 'à la ligne' et saut de ligne. Ça me fait un gros bloc! Pas terrible niveau visuel.
Deuxième point, je peux afficher le texte cacher, mais impossible de le remettre en cache une fois lu 'ouvert'. Il doit me manquer un petit code html...
Troisième point, peut-on changer la taille, la couleur et la police du texte taper?
Merci, pour vos réponses.
Messages postés
174
Date d'inscription
mercredi 29 janvier 2014
Statut
Membre
Dernière intervention
24 juin 2014
4
Hahaha, oui, je vois ton problème, utilise la balise <br> à la fin de ta ligne puis saute de ligne et écris !
Surtout pas !
Dans toute bonne typographie il faut utiliser la justification. En html cela se fait avec le CSS, les saut de ligne d'un texte global sont à proscrire pour plusieurs raisons et ne donneront pas une visualisation correcte puisqu'un saut de ligne ne tient pas compte de la longueur de la ligne affichée par l'utilisateur qui seront forcément différente(je parle pour un texte de plus de 3 lignes) en focntion de la résolution écran, de la taille de l'écran du navigateur et du zoom ou pas utilisé dans le navigateur...
Bref pour les justifications avec CSS il y a
text-align:left;
text-align-right;
text-align:center;
text-align-justify;

Pour une meilleure justification on peut utiliser aussi l'équivalent des césures typographiques( word-spacing et letter-spacing) même si c'est pas toujours indispensable utile.
Par contre faire des paragraphes et utiliser des titres de chapitres ou différentes autres séparations est efficace et utile, cela se fait avec les balises HTML adéquate et l'utilisation de la bonne structure sémantique.
Bonjour,
J'arrive à faire un texte en html avec 'lire la suite..' et 'réduire'.

Le problème maintenant c'est que lorsque mon texte caché se déroule il se superpose par dessus le texte du dessous (ba oui logique vu que article devient beaucoup plus long....
Donc comment 'pousser' l'article qui suit lorsque j'affiche mon texte en cache?
Merci