Styler le lien "Lire la suite"

Nous allons dans ce tutoriel voir comment transformer le lien "Lire la suite" des billets du blog en un joli bouton stylé. Je vous fournis plusieurs codes détaillés et commentés, de manière à ce que vous puissiez choisir le design qui vous convient le mieux. A la fin du tutoriel, je vous donne toutefois une feuille de style "compilée", prête à l'emploi : un petit copier-coller du code sur votre site Jimdo, quelques modifications de couleurs et... le tour est joué !

Aperçu du résultat

Voici tout de suite en images ce que permet d'obtenir ce tutoriel : la transformation du lien "Lire la suite" en un bouton coloré, positionnable à gauche (fig. 1) ou à droite (fig. 2), et affecté en outre d'un effet au survol du pointeur (le bouton change de couleur) :

 

Fig. 1 : un bouton aligné à gauche
Fig. 1 : un bouton aligné à gauche
Fig. 2 : un bouton aligné à droite
Fig. 2 : un bouton aligné à droite

Vous pouvez aussi consulter la page d'accueil de mon site pour une démonstration "en vrai" du résultat.

Remarque importante

Veuillez noter que si vous appliquez les codes de ce tutoriel à votre site Jimdo, vous devez du même coup renoncer à l'affichage de la mention "X commentaires" à côté du bouton dans le blog quand vous affichez les billets du blog en mode "teaser". En effet, les deux (bouton "Lire la suite" et mention "X commentaires") ne peuvent pas coexister :

Fig. 3 : en mode "teaser", le nombre de commentaires est caché
Fig. 3 : en mode "teaser", le nombre de commentaires est caché

En revanche, si vous affichez les billets du blog en entier (mode "article"), le nombre de commentaires sera conservé et apparaîtra sans changement :

Fig. 4 : en mode "article", le nombre de commentaires reste affiché
Fig. 4 : en mode "article", le nombre de commentaires reste affiché
Flèche vers le haut

Où insérer les codes ?

Tout se passe dans la fenêtre de saisie accessible dans Paramètres > Modifier le head :

 

Capture de Paramètres > Modifier le head
Paramètres > Modifier le head

C'est dans cette fenêtre de saisie que vous allez coller les codes fournis.

Flèche vers le haut

Comment personnaliser les codes ?

Tous les codes donnés sont commentés : vous savez ainsi à quoi correspond chaque ligne. Les commentaires apparaissent en gris et sont balisés de la sorte : /* commentaires */.

En outre, je donne quelques indications supplémentaires sous chaque code.

Un outil pour changer les couleurs

L'essentiel de votre personnalisation consistera à changer les couleurs du bouton pour les accorder au design de votre site ou à votre goût. Les couleurs dans les codes sont aisément repérables, puisqu'elles apparaissent en vert, précédées d'un dièse. En effet, une couleur est écrite en code hexadécimal : ainsi le blanc est-il codé #fff et le noir #000.

 

Pour vous aider à trouver le code hexadécimal de la couleur de votre choix, je vous recommande d'utiliser cet outil :

Promenez-vous sur la palette et cliquez sur une couleur pour récupérer son code hexadécimal (#......) Vous pouvez le mémoriser en cliquant sur le bouton Copy.

Flèche vers le haut

Installation du bouton

Pour styler le lien "Lire la suite" du blog, je vous propose 3 codes :

  • code n°1 : on colore juste le bouton
  • code n°2 : on colore le bouton et, en plus, on l'ombre discrètement
  • code n°3 : on colore le bouton et on arrondit ses coins
  • code n°4 : on colore le bouton, on arrondit ses coins et on ajoute une ombre légère
  • code n°5 : ce code ajoute un effet au survol du pointeur : le bouton change de couleur

Code n°1 : un simple bouton coloré

Commençons par donner un peu de couleurs au bouton.

Aperçu du résultat

Bouton aligné à droite

Bouton aligné à gauche

Le code commenté

<style type="text/css">
/*<![CDATA[*/

/* Colorer le bouton "Lire la Suite" du blog */

a.blogreadmore {
cursor: pointer;
display: block !important;
text-decoration: none !important;
text-align: center !important;
padding: 3px 10px !important;
margin-top: 10px !important; /* marge entre le bouton et ce qui se trouve juste au-dessus */
width: 100px !important; /* largeur du bouton en pixels */
background: #6E7E91 !important; /* couleur de fond du bouton */
border: 1px solid #6E7E91 !important; /* couleur de la bordure du bouton */
color: #fff !important; /* couleur du texte du bouton */
float: right !important; /* aligner le bouton à droite ; pour aligner à gauche, supprimer cette ligne */
}

/* Cacher la mention « X commentaires » en mode « sélection » du blog */

span.comment {
display: none;
}

/*]]>*/
</style>

Personnaliser le code

  • Pour personnaliser les couleurs du fond, de la bordure et du texte, modifiez les codes hexadécimaux en utilisant le colorpicker.
  • Vous pouvez changer la largeur du bouton en remplaçant la valeur en pixels (100px) par une valeur plus grande (120px) ou plus petite (90px). La taille du bouton dépend de la taille de la police que vous avez choisie pour le reste du site.
  • Par défaut, le bouton est aligné à droite. Si vous voulez qu'il soit aligné à gauche, effacez la ligne indiquée dans le code.
  • En revanche, je vous conseille de ne pas modifier les lignes du code qui ne sont pas commentées.
Flèche vers le haut

Code n°2 : un bouton coloré et ombré

Non contents de colorer le bouton, nous lui ajoutons une discrète ombre.

Aperçu du résultat

Bouton aligné à droite

Bouton aligné à gauche

Le code commenté

<style type="text/css">
/*<![CDATA[*/

/* Colorer et ombrer le bouton "Lire la Suite" du blog */

a.blogreadmore {
cursor: pointer;
display: block !important;
text-decoration: none !important;
text-align: center !important;
padding: 3px 10px !important;
margin-top: 3px !important; /* marge entre le bouton et ce qui se trouve juste au-dessus */
width: 90px !important; /* largeur du bouton en pixels */
background: #6E7E91 !important; /* couleur de fond du bouton */
border: 1px solid #6E7E91 !important; /* couleur de la bordure du bouton */
color: #fff !important; /* couleur du texte du bouton */
/* les 3 lignes ci-dessous créent l'ombre du bouton */
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow:    0px 0px 4px rgba(0, 0, 0, 0.3);
box-shadow:         0px 0px 4px rgba(0, 0, 0, 0.3);
}

/* Cacher la mention « X commentaires » en mode « sélection » du blog */

span.comment {
display: none;
}

/*]]>*/
</style>

Personnaliser le code

  • Pour personnaliser les couleurs du fond, de la bordure et du texte, modifiez les codes hexadécimaux en utilisant le colorpicker.
  • Vous pouvez changer la largeur du bouton en remplaçant la valeur en pixels (100px) par une valeur plus grande (120px) ou plus petite (90px). La taille du bouton dépend de la taille de la police que vous avez choisie pour le reste du site.
  • Par défaut, le bouton est aligné à droite. Si vous voulez qu'il soit aligné à gauche, effacez la ligne indiquée dans le code.
  • J'ai ajouté 3 lignes qui créent l'ombre du bouton.
  • En revanche, je vous conseille de ne pas modifier les lignes du code qui ne sont pas commentées.
Flèche vers le haut

Code n°3 : un bouton coloré aux coins arrondis

En ajoutant 3 lignes au code n°1, on peut arrondir discrètement les coins du bouton.

Aperçu du résultat

Bouton aligné à droite

Bouton aligné à gauche

Le code commenté

<style type="text/css">
/*<![CDATA[*/

/* Colorer et arrondir le bouton "Lire la Suite" du blog */

a.blogreadmore {
cursor: pointer;
display: block !important;
text-decoration: none !important;
text-align: center !important;
padding: 3px 10px !important;
margin-top: 10px !important; /* marge entre le bouton et ce qui se trouve juste au-dessus */
width: 100px !important; /* largeur du bouton en pixels */
background: #6E7E91 !important; /* couleur de fond du bouton */
border: 1px solid #6E7E91 !important; /* couleur de la bordure du bouton */
color: #fff !important; /* couleur du texte du bouton */
float: right !important; /* aligner le bouton à droite ; pour aligner à gauche, supprimer la ligne */
/* les 3 lignes ci-dessous créent l'arrondi des coins du bouton */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

/* Cacher la mention « X commentaires » en mode « sélection » du blog */

span.comment {
display: none;
}

/*]]>*/
</style>

Personnaliser le code

  • Pour personnaliser les couleurs du fond, de la bordure et du texte, modifiez les codes hexadécimaux en utilisant le colorpicker.
  • Vous pouvez changer la largeur du bouton en remplaçant la valeur en pixels (100px) par une valeur plus grande (120px) ou plus petite (90px). La taille du bouton dépend de la taille de la police que vous avez choisie pour le reste du site.
  • Par défaut, le bouton est aligné à droite. Si vous voulez qu'il soit aligné à gauche, effacez la ligne indiquée dans le code.
  • J'ai ajouté 3 lignes de code : ce sont elles qui arrondissent les coins. J'ai fixé la valeur de l'arrondi à 5px, mais si vous souhaitez obtenir un arrondi plus prononcé, remplacez cette valeur par une autre plus grande : 6px par exemple. (Faites ce changement sur les 3 lignes de code concernées).
  • En revanche, je vous conseille de ne pas modifier les lignes du code qui ne sont pas commentées.
Flèche vers le haut

Code n°4 : un bouton coloré, arrondi et discrètement ombré

En ajoutant 3 lignes de code au code précédent, on peut discrètement ombrer le bouton, en plus d'arrondir ses coins et de le colorer.

Aperçu du résultat

Bouton aligné à droite

Bouton aligné à gauche

Le code commenté

<style type="text/css">
/*<![CDATA[*/

/* Colorer, arrondir et ombrer le bouton "Lire la Suite" du blog */

a.blogreadmore {
cursor: pointer;
display: block !important;
text-decoration: none !important;
text-align: center !important;
padding: 3px 10px !important;
margin-top: 10px !important; /* marge entre le bouton et ce qui se trouve juste au-dessus */
width: 100px !important; /* largeur du bouton en pixels */
background: #6E7E91 !important; /* couleur de fond du bouton */
border: 1px solid #6E7E91 !important; /* couleur de la bordure du bouton */
color: #fff !important; /* couleur du texte du bouton */
float: right !important; /* aligner le bouton à droite ; pour aligner à gauche, supprimer la ligne */
/* les 3 lignes ci-dessous créent l'arrondi des coins du bouton */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* les 3 lignes ci-dessous créent l'ombre du bouton */
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow:    0px 0px 4px rgba(0, 0, 0, 0.3);
box-shadow:         0px 0px 4px rgba(0, 0, 0, 0.3);
}

/* Cacher la mention « X commentaires » en mode « sélection » du blog */

span.comment {
display: none;
}

/*]]>*/
</style>

Personnaliser le code

  • Pour personnaliser les couleurs du fond, de la bordure et du texte, modifiez les codes hexadécimaux en utilisant le colorpicker.
  • Vous pouvez changer la largeur du bouton en remplaçant la valeur en pixels (100px) par une valeur plus grande (120px) ou plus petite (90px). La taille du bouton dépend de la taille de la police que vous avez choisie pour le reste du site.
  • Par défaut, le bouton est aligné à droite. Si vous voulez qu'il soit aligné à gauche, effacez la ligne indiquée dans le code.
  • J'ai ajouté 3 lignes de code : ce sont elles qui arrondissent les coins. J'ai fixé la valeur de l'arrondi à 5px, mais si vous souhaitez obtenir un arrondi plus prononcé, remplacez cette valeur par une autre plus grande : 6px par exemple. (Faites ce changement sur les 3 lignes de code concernées).
  • J'ai ajouté 3 autres lignes de code : ce sont elles qui créent l'ombre du bouton.
  • En revanche, je vous conseille de ne pas modifier les lignes du code qui ne sont pas commentées.
Flèche vers le haut

Code n°5 : le bouton change de couleur sous le pointeur

On peut enfin ajouter au bouton un élégant effet de "hover" : au survol du pointeur, le bouton change de couleur. Ce code doit être ajouté au code n°1, n°2, n°3 ou n°4 ; on ne peut pas l'utiliser seul.

Aperçu du résultat

Boutons alignés à droite

Boutons alignés à gauche

Le code commenté

<style type="text/css">
/*<![CDATA[*/

/* Effet au survol du pointeur sur le bouton "Lire la Suite" du blog */

a.blogreadmore:hover {
background-color: #FF8000 !important; /* couleur de fond du bouton au survol du pointeur */
border: 1px solid #FF8000 !important; /* couleur de la bordure du bouton au survol du pointeur */
color: #fff !important; /* couleur du texte du bouton au survol du pointeur */
text-decoration: none !important;
}

/*]]>*/
</style>

Personnaliser le code

  • Pour personnaliser les couleurs, modifiez les codes hexadécimaux en utilisant le colorpicker.
Flèche vers le haut

Récapitulatif : un code complet

Pour les plus pressés, j'ai compilé les codes n°4 et n°5 dans une seule feuille de style : pour obtenir un bouton coloré, ombré, aux coins arrondis et qui change de couleur sous le pointeur, il vous suffit de copier-coller le bloc de code comme indiqué ici. Vous pouvez, bien sûr, adapter le code - notamment changer les couleurs à l'aide du colorpicker - en suivant les commentaires du code indiqués en /* gris */ :

<style type="text/css">
/*<![CDATA[*/

/* Colorer, arrondir et ombrer le bouton "Lire la Suite" du blog */

a.blogreadmore {
cursor: pointer;
display: block !important;
text-decoration: none !important;
text-align: center !important;
padding: 3px 10px !important;
margin-top: 10px !important; /* marge entre le bouton et ce qui se trouve juste au-dessus */
width: 100px !important; /* largeur du bouton en pixels */
background: #6E7E91 !important; /* couleur de fond du bouton */
border: 1px solid #6E7E91 !important; /* couleur de la bordure du bouton */
color: #fff !important; /* couleur du texte du bouton */
float: right !important; /* aligner le bouton à droite ; pour aligner à gauche, supprimer la ligne */
/* les 3 lignes ci-dessous créent l'arrondi des coins du bouton */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* les 3 lignes ci-dessous créent l'ombre du bouton */
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow:    0px 0px 4px rgba(0, 0, 0, 0.3);
box-shadow:         0px 0px 4px rgba(0, 0, 0, 0.3);
}

/* Cacher la mention « X commentaires » en mode « sélection » du blog */

span.comment {
display: none;
}

/* Effet au survol du pointeur sur le bouton "Lire la Suite" du blog */

a.blogreadmore:hover {
background-color: #FF8000 !important; /* couleur de fond du bouton au survol du pointeur */
border: 1px solid #FF8000 !important; /* couleur de la bordure du bouton au survol du pointeur */
color: #fff !important; /* couleur du texte du bouton au survol du pointeur */
text-decoration: none !important;
}

/*]]>*/
</style>

A vous de jouer ! Si vous utilisez ce tutoriel, n'hésitez pas à l'indiquer dans les commentaires !

Anything to say ?

Écrire commentaire

Commentaires : 16
  • #1

    Dominique BRUYNEEL (mercredi, 05 septembre 2012 21:03)

    Excellent...

    je dois encore ajuster
    selon mes goûts...

    Cordialement

    bDom

  • #2

    blabladefamille (lundi, 24 septembre 2012 19:57)

    Merci, ça fait pro.
    Cordialement;
    chris

  • #3

    3aspie (mardi, 25 septembre 2012 10:19)

    Merci, cela est beaucoup plus esthétique.
    cordialement,
    chris

  • #4

    FilmsdeLover.com (mercredi, 14 novembre 2012 14:44)

    Merci pour tous ces codes ! C'est parfait ! Juste un petit souci sur le "hover" qui ne semble pas fonctionner chez moi... (Exemple ici : http://www.filmsdelover.com/rubriques/1-livre-1-film-de-lover/) Mais en tous cas, c'est cool de voir que tu es de retour avec de supers tutos ! Fais un tour sur le forum quand tu as du temps, tu feras des heureux. ;)

  • #5

    FilmsdeLover.com (mercredi, 14 novembre 2012 14:48)

    Ah si, c'est bon, ça marche. Un code mal fermé, ça marche tout de suite moins bien. ;) Merci encore !

  • #6

    mathtice31 (jeudi, 07 mars 2013 23:47)

    Merciiiiiiiiiiiiiiiiiiiiiii

  • #7

    lebricabracdesfilles (samedi, 30 mars 2013 15:07)

    J'ai une question, comment l'insérer après un article ?

  • #8

    Isa (dimanche, 31 mars 2013 16:47)

    @lebricabracdesfilles : avec le code ci-dessous, tu peux mettre le bouton n'importe où et avec n'importe quel intitulé. Il suffit d'ajouter un élément +Widget/HTML à l'endroit où tu veux voir apparaître le bouton et de copier-coller ce code :

    <a class="blogreadmore" href="http://votre-site.jimdo.com">Texte du bouton</a>
    <div class="clear"></div>

    Bon courage !

  • #9

    lebricabracdesfilles (dimanche, 31 mars 2013 21:27)

    Merci beaucoup !

  • #10

    Marwen (mercredi, 17 avril 2013 20:38)

    slt, est ce qu'on peut l'appliquer sur blogger ? SI OUI , ça sera dans quel endroit ? MERCI

  • #11

    Abdessamade BAYROUNE (dimanche, 21 avril 2013 02:54)

    thank you

  • #12

    EDP (dimanche, 16 juin 2013 08:36)

    Le couleurs ne changent pas meme pour le tuto des formulaire,pourquoi ????

  • #13

    Les assomniacs (samedi, 28 septembre 2013 20:43)

    Bonjour, j'ai beau essayé l'un des 4 codes aucun ne fonctionne. Un message apparaît pour me dire "une erreur est survenue. L'action demandée a été annulée etc etc" . Le code pour ne pas afficher le nombre de commentaires marche effectivement quant à lui.

    Je n'ai pas de "design personnalisé", j'ai choisi un design JimDoFree et utilise le "Modifier le Header". Sauriez-vous d'où le problème pourrait venir ?

  • #14

    Isabelle (vendredi, 04 octobre 2013 21:14)

    Bonjour,
    Je viens moi-même d'utiliser ces codes sur un nouveau site pour mes élèves et je n'ai pas rencontré cette erreur. Deux possibilités donc :
    - une maintenance chez Jimdo (temporaire)
    - une erreur dans le code saisi ou dans le copier-coller
    Même sans "design personnalisé", ces codes doivent fonctionner.
    Tenez-moi au courant !

  • #15

    BAOBAB (jeudi, 06 février 2014 08:27)

    Bonjour,
    Merci pour ces codes HTML tout fait, qui sont pour mon association une réelle aide. J'ai néanmoins une question car j'aimerai combiner un bouton redirigeant vers une page de mon site sur une photo. Voici pour le moment le code HTML que j'utilise:

    <iframe style="position:absolute;top:170px;left:170px;" src="https://dl.dropboxusercontent.com/u/55997970/Banni%C3%A8re%206.png" scrolling="no" width="1100" height="289" frameborder="0"></iframe>
    <a class="blogreadmore" href="http://www.solidarite-baobab.org/nos-missions-solidaires/faire-un-don/">Faire un don</a>
    <div class="clear">
    </div>

    Comme vous pouvez le voir sur mon site (http://www.solidarite-baobab.org) le bouton apparait en bas de l'image et non sur l'image pouvez vous m'aider dans mon code pour obtenir ce résultat.

    Merci d'avance,

    BAOBAB

  • #16

    Isabelle (jeudi, 06 février 2014 09:21)

    Bonjour,
    Voici le code que je vous propose :

    <div style="position: relative; width: 100%;">
    <img src="https://dl.dropboxusercontent.com/u/55997970/Banni%C3%A8re%206.png" alt="Ma bannière" />
    <a class="blogreadmore" href="http://www.solidarite-baobab.org/nos-missions-solidaires/faire-un-don/"
    style="position: absolute; bottom: 40px; right: 130px;">Faire un don</a>
    </div>

    J'ai testé : cela positionne le bouton dans le coin inférieur droit de la bannière. Pour ajuster le positionnement à votre convenance, il faut tâtonner un peu avec les valeurs de "bottom" (bas) et de "right" (droite) exprimées en pixels. Le code que je vous donne positionne le bouton à 40 pixels du bord inférieur de l'image et à 100 pixels du côté droit de l'image. A vous d'ajuster !

    Testez-cela et tenez-moi au courant !

    Isa

Ruban