![Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger . Lady Bird Red || http://ladybirdr.blogspot.fr/ Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger](https://4.bp.blogspot.com/-JLciRJE6h-A/V7GsmrJyHMI/AAAAAAAAH00/JYbJysK5sLk5t_IdfYV79XMIuMg7ccVCwCLcB/s1600/Afficher-aper%25C3%25A7u-d%2527article-ajouter-et-modifier-lien-lire-la-suite.png)
Aujourd’hui on se retrouve avec une petit tutoriel facile et pratique : comment créer des aperçus d'articles en ajoutant le lien "Lire la suite", et comment modifier l'apparence du lien.
![Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger . Lady Bird Red || http://ladybirdr.blogspot.fr/ Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger](https://4.bp.blogspot.com/-pFt2KodjmL0/VM-KnlwXYkI/AAAAAAAADEA/uxiGpdjuoAM/s1600/Ajouter-et-modifier-lire-la-suite-apr%C3%A8st.png)
C'est parti pour les explications ;)
Créer un aperçu d'article en ajoutant le lien Lire la suite
Pour changer on commence le tutoriel directement sur la page de l'article. Si vous voulez ajouter le lien à un article déjà créé, cliquez sur Articles dans le menu à gauche du tableau de bord, survolez l'article de votre choix, et cliquez sur Modifier qui apparaît sous le nom de l'article :![Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger . Lady Bird Red || http://ladybirdr.blogspot.fr/ Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger](https://1.bp.blogspot.com/-46INfmMbDTY/VM-KglNXRPI/AAAAAAAADC8/G-jZfYjlEKg/s1600/Ajouter-et-modifier-lire-la-suite-01.png)
Vous serez redirigé vers la page de création/modification de l'article.
Il suffit maintenant de choisir l'endroit où vous voulez ajouter le lien.
Par exemple, je souhaite séparer le paragraphe ci-dessous en 2 parties. La première partie (en vert) s'affichera sur la page d'accueil au-dessus du lien "Lire la suite". La 2e partie (en bleu) ne sera pas affiché sur la page d'accueil mais seulement sur la page de l'article.
![Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger . Lady Bird Red || http://ladybirdr.blogspot.fr/ Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger](https://3.bp.blogspot.com/-yD5Xj57o_e0/VM-KjhMolnI/AAAAAAAADDI/VEz-1Dgohzg/s1600/Ajouter-et-modifier-lire-la-suite-02.png)
Pour cela il faut cliquer juste devant le 2e paragraphe, puis sélectionner l'outil marqueur d'expansion dans la barre d'outils en haut :
![Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger . Lady Bird Red || http://ladybirdr.blogspot.fr/ Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger](https://3.bp.blogspot.com/-vIKR1oRo4Tg/VM-KjvsZGdI/AAAAAAAADDE/gNMEuaR8DMQ/s1600/Ajouter-et-modifier-lire-la-suite-03.png)
Ce trait gris représente la séparation de l'article. Le contenu au-dessus de cette ligne sera affiché sur la page d'accueil avant le lien "Lire la suite". Le contenu en-dessous ne sera affiché que sur la page de l'article.
Visuellement on obtient :
![Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger . Lady Bird Red || http://ladybirdr.blogspot.fr/ Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger](https://2.bp.blogspot.com/-6yfOteko__M/VM-KmeVYeXI/AAAAAAAADD0/nT1DoNj6Gac/s1600/Ajouter-et-modifier-lire-la-suite-apr%C3%A8s.png)
Et sur la page de l'article :
![Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger . Lady Bird Red || http://ladybirdr.blogspot.fr/ Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger](https://3.bp.blogspot.com/-ML66NjIbBtA/VM-NMfTEZQI/AAAAAAAADEY/A-yxG4JELzo/s1600/Ajouter-et-modifier-lire-la-suite-03-2.png)
Si vous voulez supprimer l'espace entre les 2 paragraphes alors supprimez la ligne vide au-dessus du trait gris sur la page de modification de l'article :
![Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger . Lady Bird Red || http://ladybirdr.blogspot.fr/ Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger](https://1.bp.blogspot.com/-I4LmvGs8nAs/VM-Kj2SsVOI/AAAAAAAADDM/DdgSMRL0Rak/s1600/Ajouter-et-modifier-lire-la-suite-04.png)
Personnaliser le lien vers la suite de l'article
Maintenant que vous avez ajouté votre lien et créé votre aperçu, on passe à la personnalisation du lien.Changer le texte du lien
Pour changer le texte du lien aller sur Mise en Page à partir de votre tableau de bord. Cliquez ensuite sur Modifier sur le widget des Articles du blog :![Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger . Lady Bird Red || http://ladybirdr.blogspot.fr/ Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger](https://2.bp.blogspot.com/--o6X06fqVhg/VM-KkIMzLtI/AAAAAAAADDU/hAttA-PKlJU/s1600/Ajouter-et-modifier-lire-la-suite-05.png)
A la ligne Texte du lien de la page d'articles vous pouvez définir le texte du lien qui sera affiché. Vous pouvez écrire ce que vous voulez :). Quand vous avez fini cliquez sur Enregistrer tout en bas de la fenêtre :
![Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger . Lady Bird Red || http://ladybirdr.blogspot.fr/ Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger](https://1.bp.blogspot.com/-nSZGadu2gEI/VM-KkfY9HvI/AAAAAAAADDQ/7Af77pq_ol4/s1600/Ajouter-et-modifier-lire-la-suite-06.png)
Modifier l'apparence du lien
Allez dans Modèle à partir du tableau de bord et cliquez sur Modifier le code HTML.Cliquez sur la flèche noir à gauche de <b:skin>...</b:skin> :
![Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger . Lady Bird Red || http://ladybirdr.blogspot.fr/ Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger](https://4.bp.blogspot.com/-jtBnhCw4jAY/VMEZywd9WYI/AAAAAAAADAo/smEQegyYKUY/s1600/Modifier-l'apparence-des-textes-de-la-partie-commentaires-02.png)
Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F en même temps (ou Cmd et F si vous êtes sur Mac). Dans la boîte de recherche qui s'affiche en haut à droite de la boîte de code collez :
/* Content
Juste au-dessus de cette ligne collez les codes suivant :/* Apparence des liens vers la suite des articles */
/* Apparence du lien */
.jump-link a {
font-family: Arial; /* Police */
font-size: 14px; /* Taille de la police */
color: #FFFFFF; /* Couleur du lien */
background-color: #87DADD; /* Couleur de fond */
padding-top: 5px; /* Espace au-dessus */
padding-bottom: 5px; /* Espace en-dessous */
padding-left: 10px; /* Espace à gauche */
padding-right: 10px; /* Espace à droite */
border-width: 1px; /* Epaisseur de la bordure */
border-style: solid; /* Style de la bordure */
border-color: #5DC3DB; /* Couleur de la bordure */
}
/* Apparence du lien quand survolé par la souris */
.jump-link a:hover {
color: #5DC3DB; /* Couleur du lien quand survolé par la souris */
background: #ffffff; /* Couleur de fond du lien quand survolé par la souris */
text-decoration: none; /* Supprime le trait sous le lien quand on le survol */
}
/* Alignement du lien dans l'article */
.jump-link {
text-align: right; /* Alignement du lien : left = à gauche ; center = au centre ; right = à droite */
}
Visuellement on obtient :![Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger . Lady Bird Red || http://ladybirdr.blogspot.fr/ Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger](https://2.bp.blogspot.com/-ld9FbhP7i5A/VM-Kkr9QZTI/AAAAAAAADDc/gwNI-JorKJs/s1600/Ajouter-et-modifier-lire-la-suite-07.png)
A vous de jouer avec ces paramètres pour obtenir ce que vous voulez.
Pour trouver le code hexadécimal de la couleur souhaitée je vous conseil le site code-couleur.
Si vous voulez supprimer le fond du lien supprimez la ligne :
background-color: #87DADD;
Et les lignes :padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
Car il n'y a plus besoin d'ajouter une espace autour du texte ;)Si vous voulez supprimer la bordure supprimez les lignes :
border-width: 1px;
border-style: solid;
border-color: #5DC3DB;
Si vous voulez une bordure seulement à :- gauche, remplacez border par border-left
- droite, remplacez border par border-right
- au-dessus, remplacez border par border-top
- en-dessous, remplacez border par border-bottom
border-left-size: 1px;
border-left-style: solid;
border-left-color: #5DC3DB;
Vous voulez remplacer le lien Lire la suite par une image ? Voici le tutoriel qui explique comment faire ;)A vous de jouer ;)