Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger

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

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

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

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

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

Et sur la page de l'article :

Afficher un aperçu d'article - Ajouter et modifier le lien Lire la suite sur Blogger

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

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

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

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

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

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
Exemple avec une bordure seulement à gauche :
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 ;)

Autres articles

Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger