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

Créer des boutons de partage en HTML et CSS pour Blogger

On continue à modifier le pied de nos articles aujourd'hui en remplaçant les horribles boutons de partage Blogger par de jolis boutons en HTML et CSS !

C'est parti pour les explications !

Sommaire

  1. Faire une sauvegarde de son thème
  2. Ajouter Font Awesome à son blog
  3. Les codes HTML des différents boutons
  4. Où coller le code des boutons de partage
  5. Cacher les boutons par défaut de Blogger
  6. Modifier l'apparence des boutons avec du CSS
    1. Modifier le fond des boutons de partage
    2. Modifier la taille des boutons
    3. Modifier la taille des icônes
    4. Centrer les icônes
    5. Modifier la bordure des boutons de partage
    6. Définir des bords arrondis aux boutons
    7. Modifier la couleur des icônes
    8. Modifier les icônes au survol de la souris
    9. Modifier l'espace autour des boutons de partage
    10. Modifier l'espace entre les boutons de partage

Faire une sauvegarde de son thème

Comme d'habitude, faites une sauvegarde de votre thème avant toute modification de celui-ci ! Si vous faites une erreur vous pourrez facilement revenir en arrière ;)

Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème.

Créer des boutons de partage en HTML et CSS pour Blogger

Vous pourrez maintenant facilement revenir en arrière si vous faites une erreur en cliquant sur Choisissez un fichier et en sélectionnant ce fichier.

Plus d'informations sur la sauvegarde, et comment charger votre sauvegarde en cas d'erreur ;)

Ajouter Font Awesome à son blog

Nous allons utiliser Font Awesome pour générer les icônes des différents réseaux sociaux, au lieu d'utiliser des images. On pourra ainsi modifier facilement la couleur des icônes en utilisant simplement du CSS ! ;)

Pour installer Font Awesome sur son blog, rien de plus simple. Commencez par aller dans Modèle > Modifier le code HTML :

Créer des boutons de partage en HTML et CSS pour Blogger

Cliquez sur le triangle noir à gauche de <b:skin>...</b:skin> :

Créer des boutons de partage en HTML et CSS pour Blogger

Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F (ou Cmd et F sur Mac) en même temps. Dans la boîte de recherche qui apparaît en haut à droite de la boîte de code, collez :
</head>
Appuyez sur Entrer.

Juste au-dessus de cette ligne collez :
<!-- Font Awesome -->
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Et voilà ! Rien de plus simple ;)

Comment fonctionne Font Awesome ? A chaque icône correspond un code HTML de type :
<i class="fa fa-instagram"></i>
Le code ci-dessus affiche :

Pour voir tous les icônes disponibles vous pouvez jeter un œil à la liste des icônes ici.

Les codes HTML des différents boutons

Voici le code HTML auquel nous allons ajouter les codes pour chaque bouton :
<!-- Début Boutons de partage CSS -->
<div class="btn-partage">

<!-- Coller les codes des boutons ici -->

</div>
<!-- Fin Boutons de partage CSS -->
Et voici les codes HTML de quelques réseaux sociaux en utilisant les icônes disponibles avec Font Awesome :
EDIT : Il y avait un conflit avec le bouton Pinterest et le code pour le bouton Pin it de Pinterest (si vous l'aviez installé). J'ai mis à jour le code HTML du bouton Pinterest pour éviter ce conflit ;)

Facebook

<!-- Facebook -->
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Partager sur Facebook'>
  <i class='fa fa-facebook'/>
</a>

Twitter

<!-- Twitter-->
<a expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Partager sur Twitter'>
  <i class='fa fa-twitter'/>
</a>

Pinterest

<!-- Pinterest-->
<a expr:href='&quot;http://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;description=&quot; + data:post.title + &quot;&amp;media=&quot; + data:post.firstImageUrl' title='Partager sur Pinterest'>
  <i data-pin-custom="true" class='fa fa-pinterest-p'/>
</a>

Google+

<!-- Google+ -->
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Partager sur Google+'>
  <i class='fa fa-google-plus'/>
</a>

E-mail

<!-- E-mail -->
<a expr:href='&quot;mailto:?Subject=Un%20super%20article%20de%20&quot; + data:blog.title + &quot;&amp;body=&quot; + data:post.url' rel='nofollow' target='_blank' title='Partager par Email'>
  <i class="fa fa-envelope"/>
</a>
Ajoutez les codes des boutons qui vous intéressent à la place de la ligne :
<!-- Coller les codes des boutons ici -->
Par exemple si je souhaites les boutons Facebook Pinterest et Google +, dans cet ordre, j'écris :
<!-- Début Boutons de partage CSS -->
<div class="btn-partage">

<!-- Facebook -->
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Partager sur Facebook'>
  <i class='fa fa-facebook'/>
</a>

<!-- Pinterest-->
<a expr:href='&quot;http://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;description=&quot; + data:post.title + &quot;&amp;media=&quot; + data:post.firstImageUrl' title='Partager sur Pinterest'>
  <i data-pin-custom="true" class='fa fa-pinterest-p'/>
</a>

<!-- Google+ -->
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Partager sur Google+'>
  <i class='fa fa-google-plus'/>
</a>

</div>
<!-- Fin Boutons de partage CSS -->

Où coller le code des boutons de partage

On va maintenant chercher l'endroit où coller le code des boutons de partage.
Il faut tout d'abord comprendre comment fonctionne le pied d'article. Celui-ci est composé de 3 parties :
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-3'>

Créer des boutons de partage en HTML et CSS pour Blogger

Vous trouverez ces codes 2 fois dans votre code HTML. En effet, il y a le code pour la version mobile de votre site et le code pour la version web de votre site (celui avec le plus grand nombre à sa gauche).

Si vous voulez ajouter vos nouveaux boutons dans la 1ère partie, par exemple, alors collez le code pour vos boutons après la ligne :
<div class='post-footer-line post-footer-line-1'>
Si vous voulez ajouter vos nouveaux boutons dans la 2e partie du pied d'article, alors collez votre code après la ligne  :
<div class='post-footer-line post-footer-line-2'>
Si vous avez bien trouvé le code que vous cherchez, passez à l'étape suivante : Cacher les boutons par défaut de Blogger.
Attention : Si vous ne trouvez pas ces codes alors essayez de chercher un des codes suivants :
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
Le code qui correspond à la version web est le 2e avec le plus grand nombre à sa gauche.
Si vous trouvez un de ces codes, alors il faut d'abord supprimer le signe / à la fin de la ligne, par exemple :
<div class='post-footer-line post-footer-line-1'/>
Devient :
<div class='post-footer-line post-footer-line-1'>
De plus, il faut ajouter cette ligne :
</div>
Après la ligne suivante du code pour vos boutons de partage :
<!-- Fin Boutons de partage CSS -->
Ce qui donne :
<!-- Fin Boutons de partage CSS -->
</div>

Créer des boutons de partage en HTML et CSS pour Blogger

Et visuellement on obtient :


Pour l'instant ça ne ressemble pas à grand chose et on voit toujours les boutons de partage par défaut de Blogger.

Cacher les boutons par défaut de Blogger

Au lieu de supprimer les boutons par défaut de Blogger on va simplement les cacher. Pourquoi ? Tout simplement pour pouvoir plus facilement revenir en arrière si besoin.

Pour cacher les boutons de partage par défaut on va utiliser du code CSS.
Cherchez le code suivant :
]]></b:skin>
Juste avant cette ligne collez :
/* Permet de cacher les boutons de partage par défaut de Google
-- Pour remettre ces boutons sur votre blog supprimez ce code CSS */
.post-share-buttons.goog-inline-block {
    display: none !important;
}
Visuellement on obtient :

Créer des boutons de partage en HTML et CSS pour Blogger

Modifier l'apparence des boutons avec du CSS

Pour finir nous allons modifier l'apparence des boutons de partage : fond, bordure, couleurs.
Voici les codes CSS que nous allons utiliser pour modifier l'apparence des boutons :
/* Contenant des boutons de partage */
.btn-partage {
    margin-right: 0 !important;
}

/* Apparence générale des boutons */
.btn-partage a {
    display: inline-block;
}

/* Apparence des icônes */
.btn-partage .fa {
}

/* Apparence des boutons au survol de la souris */
.btn-partage a:hover {
}

Modifier le fond des boutons de partage

Pour modifier la couleur de fond ajoutez le code suivant :
    background-color: #CDDBC2;   /* Couleur de fond */
Avant le signe } du code CSS suivant :
/* Apparence générale des boutons */
.btn-partage a {
    display: inline-block;
}
Comme ceci :
/* Apparence générale des boutons */
.btn-partage a {
    display: inline-block;
    background-color: #CDDBC2;   /* Couleur de fond */
}

Modifiez le code de la couleur #CDDBC2 par celle de votre choix. Vous pouvez utiliser le site code-couleur pour trouver le code d'une couleur.

Modifier la taille des boutons

Pour modifier la taille des boutons, ajoutez les lignes suivantes avant le signe } :
    width: 30px;   /* Largeur du bouton */
    height: 30px;   /* Hauteur du bouton */
Comme ceci :
/* Apparence générale des boutons */
.btn-partage a {
    display: inline-block;
    background-color: #CDDBC2;   /* Couleur de fond */
    width: 30px;   /* Largeur du bouton */
    height: 30px;   /* Hauteur du bouton */
}
Remplacez les valeurs par la largeur et la hauteur que vous souhaitez donner à vos boutons.

Modifier la taille des icônes

Pour modifier la taille de icônes, ajoutez la ligne suivant :
    font-size: 14px;   /* Taille des icônes */
Avant le signe } du code CSS suivant :
/* Apparence des icônes */
.btn-partage .fa {
    font-size: 14px;   /* Taille des icônes */
}
Comme ceci :
/* Apparence des icônes */
.btn-partage .fa {
    font-size: 14px;   /* Taille des icônes */
}
Remplacez la valeur en pixels de la taille des icônes par celle qui vous intéresse ;)

Centrer les icônes

Pour centrer les icônes il faut ajouter de l'espace avant ceux-ci pour les déplacer vers le bas.
Pour cela ajoutez la ligne suivante :
    padding-top: 10px;   /* Espace au-dessus des icônes */
Avant le signe } comme ceci :
/* Apparence des icônes */
.btn-partage .fa {
    font-size: 14px;   /* Taille des icônes */
    padding-top: 10px;   /* Espace au-dessus des icônes */
}
Remplacez la valeur 10px par celle qui vous intéresse. En augmentant cette valeur vous déplacerez les icônes vers le bas, et en diminuant cette valeur vous déplacerez les icônes vers le haut.

Pour l'instant on obtient visuellement :

Créer des boutons de partage en HTML et CSS pour Blogger

Modifier la bordure des boutons de partage

Pour modifier la bordure des boutons de partage ajoutez les lignes suivantes :
    border-style: solid;   /* Style de la bordure */
    border-width: 1px;   /* Epaisseur en pixels de la bordure */
    border-color: #CDDBC2;   /* Couleur de la bordure */
Avant le signe } du code commençant par :
/* Apparence générale des boutons */
Comme ceci :
/* Apparence générale des boutons */
.btn-partage a {
    display: inline-block;
    background-color: #CDDBC2;   /* Couleur de fond */
    width: 30px;   /* Largeur du bouton */
    height: 30px;   /* Hauteur du bouton */
    border-style: solid;   /* Style de la bordure */
    border-width: 1px;   /* Epaisseur en pixels de la bordure */
    border-color: #CDDBC2;   /* Couleur de la bordure */
}
De même, modifiez l'épaisseur et la couleur de la bordure comme vous le souhaitez.

Définir des bords arrondis aux boutons

Pour définir des bords arrondis à vos boutons, ajoutez les lignes suivantes au même code CSS, avant le signe } :
    -webkit-border-radius: 50%;   /* Bord arrondis */
    border-radius: 50%;   /* Bord arrondis */
Comme ceci :
/* Apparence générale des boutons */
.btn-partage a {
    display: inline-block;
    background-color: #CDDBC2;   /* Couleur de fond */
    width: 30px;   /* Largeur du bouton */
    height: 30px;   /* Hauteur du bouton */
    border-style: solid;   /* Style de la bordure */
    border-width: 1px;   /* Epaisseur en pixels de la bordure */
    border-color: #CDDBC2;   /* Couleur de la bordure */
    -webkit-border-radius: 50%;   /* Bord arrondis */
    border-radius: 50%;   /* Bord arrondis */
}
Ici la valeur 50% permet d'obtenir des boutons ronds, mais vous pouvez remplacer cette valeur en % par une valeur en pixels, par exemple 10px pour définir des coins arrondis seulement.

Modifier la couleur des icônes

Pour modifier la couleur des icônes, ajoutez la ligne suivante :
    color: #427654;   /* Couleur des icônes */
Avant le signe } de ce même code comme ceci :
/* Apparence générale des boutons */
.btn-partage a {
    display: inline-block;
    background-color: #CDDBC2;   /* Couleur de fond */
    width: 30px;   /* Largeur du bouton */
    height: 30px;   /* Hauteur du bouton */
    border-style: solid;   /* Style de la bordure */
    border-width: 1px;   /* Epaisseur en pixels de la bordure */
    border-color: #CDDBC2;   /* Couleur de la bordure */
    -webkit-border-radius: 50%;   /* Bord arrondis */
    border-radius: 50%;   /* Bord arrondis */
    color: #427654;   /* Couleur des icônes */
}
Remplacez le code couleur par celle de votre choix.

Visuellement on obtient :

Créer des boutons de partage en HTML et CSS pour Blogger

Modifier les icônes au survol de la souris

Pour modifier l'apparence des icônes au survol de la souris on utilise le code CSS :
/* Apparence des boutons au survol de la souris */
.btn-partage a:hover {
}
Ici on ajoute seulement les codes qui vont changer entre le bouton qui n'est pas survolé par la souris, et le bouton survolé par la souris.
Par exemple, si je souhaites simplement modifier la couleur de fond du bouton pour un fond blanc alors j'écris :
/* Apparence des boutons au survol de la souris */
.btn-partage a:hover {
    background-color: #ffffff;   /* Couleur de fond */
}
Visuellement on obtient :

Créer des boutons de partage en HTML et CSS pour Blogger

Modifier l'espace autour des boutons de partage

Pour modifier l'espace autour des boutons de partage ajoutez les codes suivants :
    margin-top: 10px;   /* Espace au-dessus */
    margin-bottom: 10px;   /*Espace en-dessous */
Avant le signe du code suivant :
/* Contenant des boutons de partage */
.btn-partage {
    margin-right: 0 !important;
}
Comme ceci :
/* Contenant des boutons de partage */
.btn-partage {
    margin-right: 0 !important;
    margin-top: 10px;   /* Espace au-dessus */
    margin-bottom: 10px;   /*Espace en-dessous */
}
Remplacez 10px par la valeur de votre choix.

Modifier l'espace entre les boutons de partage

Pour modifier l'espace entre les boutons, ajoutez les lignes suivantes :
    margin-left: 3px;   /* Espace à gauche */
    margin-right: 3px;   /* Espace à droite */
Avant le signe } du code cmomençant par :
/* Apparence générale des boutons */
Comme ceci :
/* Apparence générale des boutons */
.btn-partage a {
    display: inline-block;
    background-color: #CDDBC2;   /* Couleur de fond */
    width: 30px;   /* Largeur du bouton */
    height: 30px;   /* Hauteur du bouton */
    border-style: solid;   /* Style de la bordure */
    border-width: 1px;   /* Epaisseur en pixels de la bordure */
    border-color: #CDDBC2;   /* Couleur de la bordure */
    -webkit-border-radius: 50%;   /* Bord arrondis */
    border-radius: 50%;   /* Bord arrondis */
    color: #427654;   /* Couleur des icônes */
    margin-left: 3px;   /* Espace à gauche */
    margin-right: 3px;   /* Espace à droite */
}
Remplacez 3px par la valeur de votre choix.

Visuellement on obtient :

Créer des boutons de partage en HTML et CSS pour Blogger

Sauvegardez, et voilà ! Vous savez maintenant créer des boutons de partage en HTML et CSS pour vos articles ! ;)

Autres articles

207 commentaires:

  1. Merci beaucoup pour ce tuto, très accessible =D

    RépondreSupprimer
  2. Tu fais vraiment des tutoriels TOP! Merci beaucoup, je vais essayer ça :)
    À bientôt!

    RépondreSupprimer
  3. Coucou ! Où faut-il coller les codes pour modifier l'apparence après ? :(

    RépondreSupprimer
  4. Je n'arrive pas à "cacher" les boutons de partage moches :(
    Et je ne trouve pas où mettre les codes CSS pour personnaliser les icones :(
    Aideeeeee moi

    RépondreSupprimer
    Réponses
    1. Bonjour Marine,
      Il faut coller les codes CSS à la suite du code CSS pour cacher les boutons de partage par défaut, donc avant :

      ]]></b:skin>

      Il y a une erreur dans ton code CSS juste avant le code pour cacher les boutons de partage par défaut : le code CSS qui le précède n'est pas fermé, il manque le signe }. Tout ce qui suit cette erreur n'est pas pris en compte.
      Rajoute simplement un signe } avant la ligne :

      .post-share-buttons.goog-inline-block {

      ;)

      Supprimer
    2. D'accord, je vais essayer, merci beaucoup ! :D

      Supprimer
  5. Coucou Catherine! :) Je suis en train de réaliser ton (SUPEEEEEERRRRRRR) tuto mais ça ne fonctionne pas pour moi à l'étape où on peut cacher les anciens (et moches) boutons de réseaux sociaux.
    Je copie colle bien pour que ça donne ça:

    /* Permet de cacher les boutons de partage par défaut de Google
    -- Pour remettre ces boutons sur votre blog supprimez ce code CSS */
    .post-share-buttons.goog-inline-block {
    display: none !important;
    }
    }]]>

    mais ils restent apparents. Merci d'avance pour ton aide et encore 100000000 mercis pour ce tuto! :D

    RépondreSupprimer
    Réponses
    1. Il doit y avoir une erreur dans ton code CSS. Il faut faire très attention aux signes } qui permettent de fermer un code CSS.
      En regardant ton code je trouve ceci :

      /* Boutons de la barre de cookies au survol de la souris */
      .cookie-choices-buttons a:hover {
      opacity: 0.8;
      }
      }#sidebar-right-1{
      margin: 0 auto;
      text-align: center;
      /* Apparence des icônes */
      .btn-partage .fa {
      font-size: 25px; /* Taille des icônes */
      }
      /* Permet de cacher les boutons de partage par défaut de Google
      -- Pour remettre ces boutons sur votre blog supprimez ce code CSS */
      .post-share-buttons.goog-inline-block {
      display: none !important;
      }
      }

      Tout d'abord il y a un signe } en trop avant :

      #sidebar-right-1{

      Ensuite tu as collé les codes :

      /* Apparence des icônes */
      .btn-partage .fa {
      font-size: 25px; /* Taille des icônes */
      }
      /* Permet de cacher les boutons de partage par défaut de Google
      -- Pour remettre ces boutons sur votre blog supprimez ce code CSS */
      .post-share-buttons.goog-inline-block {
      display: none !important;
      }

      Dans le code commençant par :

      #sidebar-right-1{

      Pour rectifier il faut supprimer le signe } en trop à la fin de :

      .post-share-buttons.goog-inline-block {
      display: none !important;
      }
      }

      Et rajouter un signe } avant la ligne :

      /* Apparence des icônes */

      Supprimer
    2. Je viens de modifier ça et c'est dingue! T'es vraiment trop forte! Je suis scotchée! Merci 1000 fois Catherine pour ce tuto et pour ta réponse, vraiment, merci!

      Supprimer
  6. Et j'ai une deuxième question, je voulais juste changer la taille des icônes mais ça ne fonctionne pas non plus et je ne comprends pas pourquoi? Où faut-il copier coller le code exactement? (je l'ai mis juste au dessus du coup ^^)
    Merci d'avance Catherine! :)

    RépondreSupprimer
    Réponses
    1. En rectifiant les petites erreurs ci-dessus ça devrait marcher ;)

      Supprimer
  7. Bonjour :)
    Je dois probablement être vraiment très nulle parce que, je ne sais pas ce que j'ai fait mais aucun bouton de partage ne s'affiche :/
    J'espère que tu pourras m'aider.
    Merci pour tous tes tutos en tout cas, ils sont d'une grande aide :D

    RépondreSupprimer
    Réponses
    1. Bonjour Sybille,
      As-tu bien collé les codes pour tes boutons dans le 2e code correspondant à la partie (1, 2 ou 3) de ton pied d'article ? Les codes des 3 parties apparaissent 2 fois dans ton code HTML : pour la version mobile et la version web et du blog. Celui qu'il faut chercher est le 2e avec le plus grand nombre à sa gauche. Pour passer au 2e code, il faut appuyer 2 fois sur Entrer quand tu fais la recherche ;)

      Supprimer
    2. Effectivement, je n'avais pas compris qu'il fallait appuyer 2 fois sur Entrer pour passer au 2eme code. Merci beaucoup :)

      Supprimer
  8. Salut Catherine !

    Tout d'abord je te félicite et te remercie beaucoup pour la tenue de ton blog, que j'ai découvert récemment et que j'ai parcouru allègrement. Une vraie perle, ton boudoir sur la toile ! Grâce à toi j'ai pu réaliser beaucoup de manoeuvres que je souhaitais exercer sur mon blog. (Et tu m'as même réconcillié avec le prénom Catherine, c'est pour dire...)

    J'ai tenté de suivre ton tutoriel du jour, sans succès. Je n'ai pas réussi à cacher les icônes par défaut. Si t'as 1 secondes à y consacrer, ce serait cool.

    Bonne continuation, n'arrête pas tu fais vraiment du bien à la blogosphère !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il y a une erreur dans ton code CSS. Voici ce que je trouve :

      .post-footer a {
      color: #40A497; /* Couleur des liens */
      .post-footer a:hover {

      Le code commençant par :

      .post-footer a {

      N'est pas fermé (il manque le signe }), du coup tout ce qui suite cette erreur n'est pas ou mal pris en compte. Il te suffit de rajouter un signe } avant la ligne :

      .post-footer a:hover {

      Comme ceci :

      }
      .post-footer a:hover {

      Supprimer
    2. Merci beaucoup ! T'es une reine !!

      Supprimer
  9. Bonjour Catherine,

    Encore une fois, un excellent tuto, merci ! Moi mon souci c'est que les boutons restent carrés et ne veulent pas s'arrondir. Merci par avance pour ton aide !

    RépondreSupprimer
    Réponses
    1. Effectivement, c'est une faute de frappe de ma part, il manque le signe ; sur la ligne suivant juste après 50% :

      -webkit-border-radius: 50% /* Bord arrondis */

      Remplace cette ligne par :

      -webkit-border-radius: 50%; /* Bord arrondis */

      Et voilà ;)

      Supprimer
    2. Nickel ! Merci beaucoup !!!

      Supprimer
  10. Coucou Catherine à super un beau tuto :D

    Par contre j'ai rien compris des le début :/

    Ou collé ce code ?



    .................
    .................
    .................



    Au dessus de head ?

    Je patauge dans la semoule je te l'avoue :/

    RépondreSupprimer
    Réponses
    1. Bonjour Sarah,
      Au début j'explique les codes HTML à utiliser. Tu peux créer ton code pour les boutons sociaux dans un premier temps, dans Notepad (sur PC) par exemple.
      Pour trouver où coller le code, ton pied d'article est composé de 3 parties. Le code qui correspond au début de chaque partie est :

      <div class='post-footer-line post-footer-line-1'> pour la partie 1
      <div class='post-footer-line post-footer-line-2'> pour la partie 2
      <div class='post-footer-line post-footer-line-3'> pour la partie 3

      Ce qui change c'est le numéro à la fin du code (1 2 ou 3). Choisis la partie dans laquelle tu souhaites coller le code de tes boutons, ensuite suit les instructions de cette partie :
      http://ladybirdr.blogspot.fr/2015/11/creer-des-boutons-de-partage-en-html-et.html?showComment=1447928779683#paste

      Supprimer
  11. Re Catherine,

    Merci beaucoup :D J'ai tout réaliser soucis c'est qu'il n'y à pas de fond rond et les boutons de partage de blogger ne sont pas cacher j'ai regarder dans mon code mais je ne vois pas se qui manque :/

    RépondreSupprimer
  12. Bonjour,

    J'ai réussi a personnaliser les boutons et je te remercie pour ce super tuto!
    Par contre je me demandais s'il était possible de créer un bouton pour rebloger un article. J'ai tenter de le faire mais je ne sais pas quoi mettre comme URL pour le lien du bouton. J'ai testé de copier le lien du bouton d'origine mais blogger me signale une erreur dans le code quand je l’insère...

    RépondreSupprimer
    Réponses
    1. Bonjour Mélissa,
      Qu'entends-tu par reblogger ?
      Publier l'article sur son propre blog ? Si oui, ce n'est pas possible. On peut seulement publier les articles que l'on écrit sur son blog.

      Supprimer
    2. oui parce que avant de personnaliser mes boutons, j'avais un petit logo "blogger" en bas qui permet aux autres blogger de reblogger (publier sur leur blog) l'article en question.

      Supprimer
    3. Ah oui je vois le bouton.
      Voici le code du bouton par défaut avec Blog this à la place du texte par défaut. Par contre, Font Awesome ne propose pas d'icône pour Blogger. Tu peux toujours remplacer ce texte par une image si tu le souhaites.

      <a expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.openundefinedthis.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span>Blog this</span></a>

      Supprimer
    4. ohhhh!!!!! tu es géniale!!!!! merci beaucoup je vais essayer ça tout de suite! :)

      Supprimer
  13. Bonjour Catherine! moi j'ai suivi toutes les étapes mais je n'arrive pas à cacher les boutons de partage. J'ai obtenu les boutons mais sans décor. abbeslabdelli.blogspot.com (BLOG DE ABBES LABDELLI). Merci de me corriger.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Vérifies qu'il n'y a pas de signe { } : ou ; en trop ou manquant dans tes codes.
      J'ai trouvé une signe } en trop avant le début du code pour cacher les boutons par défaut de Google :

      }.post-share-buttons.goog-inline-block {
      display: none !important;
      }

      Supprime le signe } avant .post-share-buttons.goog-inline-block { comme ceci :

      }.post-share-buttons.goog-inline-block {
      display: none !important;
      }

      Tout ce qui suit cette erreur, et donc tous les codes pour le visuel de tes boutons ne sont pas pris en compte à cause de ceci.
      Si en supprimant ce signe ça ne change rien, alors il faut regarder tous les codes CSS avant le code pour cacher les boutons de Blogger pour vérifier s'il n'y a pas d'autre erreur.

      Supprimer
  14. Génial ! Merci pour ce tuto :)

    RépondreSupprimer
  15. Merci pour ce tuto, il est génial, en plus il fait partie de ceux que j'attendais absolument ! Mais du coup petit souci de mon côté : les boutons de partage refusent de se centrer et je ne sais pas pourquoi... :( je voulais également savoir s'il était possible de mettre ces boutons de partage en bas ET en haut de l'article ? Merci d'avance pour ta réponse ! http://www.dancinginnowhere.com

    RépondreSupprimer
    Réponses
    1. Bonjour Marie-Charlotte,
      Rajoute la ligne :

      text-align: center;

      avant le signe } du code :

      /* Contenant des boutons de partage */
      .btn-partage {
      margin-right: 0 !important;
      margin-top: 10px; /* Espace au-dessus */
      margin-bottom: 10px; /*Espace en-dessous */
      }

      Comme ceci :

      /* Contenant des boutons de partage */
      .btn-partage {
      margin-right: 0 !important;
      margin-top: 10px; /* Espace au-dessus */
      margin-bottom: 10px; /*Espace en-dessous */
      text-align: center;
      }

      Supprimer
  16. Bonjour Catherine, j'ai tout recommencer comme sa n'allait pas ..

    Mais à présent les icônes ne s'affiche pas et es ancien ne sont toujours pas cacher :/

    RépondreSupprimer
    Réponses
    1. Bonjour Sarah,

      Retrouve cette ligne :

      border-color: #e5d4b8; /* Couleur de la bordure *

      Rajoute un signe / à la fin comme ceci :

      border-color: #e5d4b8; /* Couleur de la bordure */

      Ensuite pour les nouveaux boutons, je pense que tu as dû les ajouter au code pour la version mobile au lieu de la version web.
      Le code des boutons ne s'affiche pas sur ton blog. Cherche bien le 2e code de ton pied d'article ;)

      Supprimer
    2. Bonjour Catherine,

      Les boutons sont affiché, mais je n'ai pas trouver : border-color: #e5d4b8; /* Couleur de la bordure *

      Supprimer
    3. Bonjour Catherine j'ai trouvais e problème

      /* Boutons de la barre de cookies au survol de la souris */
      .cookie-choices-buttons a:hover {

      border-style: solid; /* Style de la bordure */
      border-width: 3px; /* Epaisseur de la bordure */
      border-color: #cccccc; /* Couleur de la bordure *
      }

      Mais si je rajoute la barre / sa me coupe mon menu déroulant en haut , je sais pas comment faire du coup :/


      Supprimer
    4. Bizarre je ne le trouve plus non plus. En tout cas tes boutons s'affichent ;)

      Supprimer
    5. Pour ton menu rajoute ceci :

      .tabs-outer {
      z-index: 999;
      }

      Juste avant la ligne :

      /* Content

      Supprimer
    6. Ah super merci sa fonctionne tout parfaitement :D

      Encore merci hâte d'avoir un nouveau tuto :P

      Supprimer
  17. Merci mille fois pour tout ces tutos que tu nous fait ! Ils sont vraiment super bien expliqués, je n'ai pas eu l'occasion de commenter plus tôt car à chaque fois que je pourrais poser une question je trouve la réponse directement dans les commentaires. Tes explications sont super claires, même en y connaissant rien du tout comme moi j'arrive à me débrouiller :)

    Je vais continuer à suivre tes tutos à la lettre pour améliorer mon tout nouveau blog :)
    http://moondies.blogspot.fr

    RépondreSupprimer
  18. Bonsoir Catherine,
    J'ai intégré les boutons de partage et caché ceux de blogger; Je bloque pourtant dans la partie mise en forme. Je ne sais pas où coller exactement le code suivant :
    /* Contenant des boutons de partage */
    .btn-partage {
    margin-right: 0 !important;
    }

    /* Apparence générale des boutons */
    .btn-partage a {
    display: inline-block;
    }

    /* Apparence des icônes */
    .btn-partage .fa {
    }

    /* Apparence des boutons au survol de la souris */
    .btn-partage a:hover {
    }

    J'ai cherché dans ton article et dans les commentaires mais je n'ai rien trouvé. J'ai collé ce code tout de suite après celui qui permet d'insérer les boutons, mais sans succès.
    Je pense que j'ai loupé qqch. Merci de m'éclairer.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Colle ces codes juste avant le code suivant :

      ]]></b:skin>

      Supprimer
  19. Mille mercis encore une fois!!
    Très bonne journée!!

    RépondreSupprimer
  20. Bonjour Catherine,

    J'ai tout fait comme indiqué dans ton tuto, en respectant toutes les étapes, mais quand j'enregistre et que j'affiche mon blog, rien n'apparaît... Je ne comprends pas! Peux-tu m'aider? Merci mille fois!

    RépondreSupprimer
  21. (En revanche, les titres en bas de page sont comme "rognés" sur les lettres qui descendent...)

    RépondreSupprimer
  22. Bonjour Catherine!
    Après avoir cherché dans les commentaires et rectifié plusieurs choses grâce à tes réponses, j'ai réussi à créer des boutons de partage à l'image de mon blog! Merci encore pour tes tutos très bien expliqués et le temps que tu prends pour répondre aux nombreuses questions, qui sont très utiles! Bonne journée et à très vite pour un nouveau super tuto ;)

    RépondreSupprimer
  23. Bonjour Catherine,

    Merci encore et encore pour ces tutos, je commence à être fière de mon design grâce à toi.

    Mais à chaque fois j'ai un bug lol.

    Je n'arrive pas à centrer mes icônes alors que j'ai rajouté des marges etc...

    Aussi en allant coller ce code j'ai vu un } juste devant ]]>, je me demande si cela est normal ou s'il est en trop ?!

    Autre question, comment mettre le même design à mes boutons dans ma barre de navigation ?!

    Merci encore, à bientôt.
    Bizz Jessica

    RépondreSupprimer
    Réponses
    1. Bonjour Jessica,
      As-tu réglé le problème ? Tes boutons sont bien centrés ;)

      Supprimer
  24. Bonsoir Catherine! ^^

    Merci pour ce tuto! (Et j'ai pas galéré 100 ans pour une fois. ^^)
    J'aurais juste une petite question: comment insérer ces icons sur la barre du menu de navigation fixée en haut du blog?
    Si tu regardes le mien, je me suis débrouillé à ma manière avec l'aide d'images, mais ça fait quand même très traficoté et je voudrais changer du coup. ^^'
    Aurais-tu une formule magique?

    http://anskarad.blogspot.fr/

    RépondreSupprimer
  25. (Autant pour moi, j'ai trouvé ce que je cherchais. J'avais pas cliqué sur le dernier tuto! ^^)

    RépondreSupprimer
  26. Bonjour,

    Merci beaucoup pour ce tuto, ça rend super bien.
    Personnellement, j'ai un petit soucis après avoir installé mes boutons, tout s'affiche parfaitement mais lorsque je teste l'un des boutons, il reconnaît bien l'article mais pas l'image présente dans l'article, du coup, il va chercher n'importe quelle autre image sur le blog.
    Je n'avais jamais eu le problème avant alors je me demande bien ce que j'ai pu faire pour que ça me fasse ça ^^'

    Je suis preneuse pour toute solution, merci d'avance ;-)
    (Et Bonne Année !)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Et bonne année à toi aussi ^^
      Pour les images, as-tu bien ajouté les balises meta correspondantes pour les différents réseaux sociaux ?
      Si non alors essaye de coller ce code :

      <!-- Image -->
      <b:if cond='data:blog.postImageUrl'>
      <meta expr:content='data:blog.postImageUrl' property='og:image'/>
      </b:if>

      Avant la ligne

      </head>

      Supprimer
    2. Bonjour,

      Merci pour l'aide, j'ai solutionné mon problème d'une drôle de manière et tout à fait par hasard. Une image insérée dans la barre latérale faisait... obstruction, si je puis dire. J'utilisais un lien direct pour cette image temporaire, or, en utilisant mon hébergeur classique, je n'ai plus aucun problème.
      En testant un bouton, il prend bien l'image du post, quel que soit le réseau.
      Eurêka !

      Merci encore et bonne journée !

      Supprimer
  27. Bonsoir Catherine, je découvre ton site et tes tutos et je suis en train de transformer mon blog grâce à toi !! Un immense merci de nous faire partager ton savoir, c'est vraiment super et très intéressant en plus !

    J'ai une question sur ce tuto : quand j'ai installé Awesome et fait toutes les étapes de ton tuto, il n'en reste pas moins que :
    - l'icone de Pinterest est différent des autres
    - les deux autres icônes facebook et mail ne sont pas centrés dans les ronds, ça viendrait de quoi ? J'ai l'impression que Jessica a eu le même problème mais a trouvé une solution avant que tu n'interviennes, vu ta réponse ;)

    Tu saurais m'expliquer les deux problèmes ?

    En tout cas encore merci, vraiment !!

    RépondreSupprimer
    Réponses
    1. Hello,

      J'avais aussi le même constat pour Google+ et j'ai remarqué ensuite que Awesome était passé en version 4.5 C'est donc ce numéro de version qu'il faut indiqué dans le code :


      href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

      Depuis, j'ai retrouvé la dernière icone pour G+.

      Par contre, je n'ai toujours pas trouvé de solution pour partager sur LinkedIn. J'ai essayé de bidouiller du code à partir des exemple donnés ici et des instructions données par leur site, dans les pages développers mais en vain.... Donc si quelqu'un a le bon code, je suis preneur !!
      Merci

      Supprimer
    2. Bonjour,
      Oui effectivement j'ai remarqué un problème avec le bouton Pinterest sur certains blogs.
      Utilise le code suivant à la place de celui donné dans le tutoriel :

      <a class='post-share-P' href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' title='Partager sur Pinterest'><i class='fa fa-pinterest'/></a>

      Pour la position des icônes retrouve ce code :

      /* Apparence des icônes */
      .btn-partage .fa {
      font-size: 17px; /* Taille des icônes */
      padding-top: 10px; /* Espace au-dessus des icônes */
      }

      Remplace :

      padding-top: 10px; /* Espace au-dessus des icônes */

      Par :

      padding-top: 6px; /* Espace au-dessus des icônes */
      padding-left: 7px; /* Espace à gauche des icônes */

      Joue sur la valeur en pixels pour positionner les icônes.

      Si tu veux déplacer un seul icône rajoute son code à la suite du précédent :

      /* Facebook */
      .btn-partage .fa-facebook {
      padding-top: 6px; /* Espace au-dessus des icônes */
      padding-left: 7px; /* Espace à gauche des icônes */
      }

      /* E-mail */
      .btn-partage .fa-envelope {
      padding-top: 6px; /* Espace au-dessus des icônes */
      padding-left: 7px; /* Espace à gauche des icônes */
      }

      /* Pinterest */
      .btn-partage .fa-pinterest-p {
      padding-top: 6px; /* Espace au-dessus des icônes */
      padding-left: 7px; /* Espace à gauche des icônes */
      }

      Supprimer
    3. Bonjour Yann,
      Désolé j'ai pris du retard sur la modération de mes commentaires avec les fêtes, mais j'ai répondu à ton commentaire ci-dessous pour le code Linkedin ;)

      Supprimer
    4. Ok je vais essayer, merci beaucoup ! Ça fait du boulot de faire des tutos comme ça mais aussi de répondre à chaque personne ! Alors merci de prendre tout ce temps et de nous partager tout ça !

      Supprimer
    5. Ok donc j'ai pu régler le problème des positions des icônes mais quand j'ai rentré ton code pour modifier le pinterest, j'ai un message d'erreur qui me dit qu'il manque des > ou />, tu comprends quelque chose toi ? :)

      Du coup j'ai copié collé les lignes de code de pinterest que tu avais mis à jour pour pouvoir prévisualiser le modèle, sinon avec celui que tu m'as donné, ça bloquait tout.

      Supprimer
    6. Ok tant mieux car le nouveau code est mieux ;)

      Supprimer
  28. Hello,
    Tout d'abord, un grand merci pour l'ensemble de tes tutoriels :)
    Ensuite, où peut-on trouver les codes HTML pour d'autres réseaux sociaux ?
    Pour ma part, je voudrais intégrer un bouton de partage pour LinkedIn.
    Encore merci pour tout ce que tu nous apportes !

    RépondreSupprimer
    Réponses
    1. Bonjour Yann,
      Voici le code HTML pour le bouton LinkedIn :

      <a class='post-share-L' expr:href='"https://www.linkedin.com/cws/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Partager sur Linkedin'><i class='fa fa-linkedin'/></a>

      Supprimer
    2. Bonjour,
      Merci beaucoup ! Ça fonctionne parfaitement.
      Il ne manque plus grand chose, grâce à toi, pour que je puisse lancer mon blog...

      Supprimer
  29. Bonjour,

    Je viens vous embêter quelques instants. Désolée.
    Voilà, j'ai suivi à la lettre ce tuto mais rien n’apparaît. C'est comme ci, je n'avais rien fait. Du coup, je ne comprends pas trop ce qui cloche. Peut-être un signe en trop ou une ligne pas supprimer, mais là, je ne vois rien.
    Pouvez-vous regarder pour moi svp ??

    Merci d'avance !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu bien collé les codes pour tes boutons dans le 2e code correspondant à la partie (1, 2 ou 3) de ton pied d'article ? Les codes des 3 parties apparaissent 2 fois dans ton code HTML : pour la version mobile et la version web du blog. Celui qu'il faut chercher est le 2e avec le plus grand nombre à sa gauche. Pour passer au 2e code, il faut appuyer 2 fois sur Entrer quand tu fais la recherche ;)

      Supprimer
  30. Bonjour Catherine,
    Merci beaucoup pour cette bonne idée et ce tuto très clair :) J'y suis arrivée du premier coup. Bonne continuation et merci pour toutes ces infos que tu partages avec nous !

    RépondreSupprimer
  31. Merci Catherine pour ce tuto parfaitement explicite !

    RépondreSupprimer
  32. Merci Catherine pour ce tuto parfaitement explicite !

    RépondreSupprimer
  33. Bonjour,
    merci beaucoup pour ce tuto et pour votre blog qui m'est d'une grande utilité !
    J'ai réussi à installer les boutons de partage mais ils ne renvoient à rien... J'ai du manquer quelque chose !

    http://bimsaintetienne.blogspot.fr/2016/01/notre-page-facebook.html

    D'avance merci pour votre réponse !

    RépondreSupprimer
    Réponses
    1. Bonjour Léna,
      Je pense que le problème doit venir de ton thème. J'ai l'impression qu'il ne prend pas en compte data:post.url qui est l'adresse de l'article. Je ne le trouve nulle part ailleurs dans ton code :/

      Supprimer
    2. Merci, je vais abandonner l'idée alors..
      Mais merci pour l'aide :)
      Bonne journée !

      Supprimer
  34. Bonsoir Catherine, un énorme merci pour ton blog et tes tutoriels qui font me passionner pour l'informatique et la création de blog ^^
    J'ai un petit problème également à partir de l'étape pour changer la mise en forme. J'ai recherché ]]> dans la barre de recherche et coller ta série de codes juste avant mais rien ne change dans l'aperçu de mon blog...
    Merci beaucoup par avance pour ton aide !

    RépondreSupprimer
    Réponses
    1. Bonjour Marvin,
      Il doit y avoir une erreur dans tes codes CSS. S'il manque un signe : ; } { /* ou */ alors tout ce qui suit cette peut ne pas être pris en compte. Vérifies tes codes CSS et ceux qui se trouvent avant.

      Supprimer
  35. Salut Catherine. super article, il marche a merveille, mais je fais comment pour qu'ils ne s'affiches pas sur la page d'accueil mais que sur les page d'article et page statiques, merci

    RépondreSupprimer
    Réponses
    1. Bonjour Vettae,
      Il faut utiliser un code qui permet d'appliquer des codes (CSS, JavaScript, HTML, etc.) à certaines pages seulement.
      Pour les pages d'article et statiques il faut utiliser ceci :

      <!-- Affichage sur page des articles ET Statiques -->
      <b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>

      <!-- Code CSS ici -->

      </b:if>

      Colle ce code avant la ligne suivante dans le code de ton thème :

      </body>

      Juste sous le ligne :

      <!-- Code CSS ici -->

      Colle ceci :

      .btn-partage {
      display: block; /* Affiche les boutons de partage */
      }


      Ensuite colle la ligne suivante :

      display: none; /* Cache les boutons de partage */

      Après le signe } de le code suivant dans le code CSS de ton thème :

      /* Contenant des boutons de partage */
      .btn-partage {
      margin-right: 0 !important;
      }

      Et voilà ;)

      Supprimer
  36. Bonjour,

    J'ai le même problème que lisouli: Le bouton Pinterest n'apparaissait pas comme les autres de boutons de partage (il apparaissait comme le bouton "pin it" qui apparaît lorsqu'on survole une image avec sa souris), j'ai donc remplacé le code par le code que vous avez édité dans le tutoriel mais ça ne change pas, le bouton n'est toujours pas comme les autres. Et le code que vous avez donné en réponse à sa question me donne la même erreur. Une idée d'où ça pourrait provenir?

    Le blog est www.raspberrylipstick.com

    Merci d'avance,
    Antoine

    RépondreSupprimer
    Réponses
    1. Le nouveau code donné dans le tutoriel devrait marcher :/
      Le problème vient d'un conflit avec le bouton Pinterest et le code pour le bouton Pin it de Pinterest. Tu peux essayer d'utiliser d'autres codes pour bloquer le bouton Pin it sur le site des développeurs de Pinterest (https://developers.pinterest.com) ;)

      Supprimer
  37. Oui c'est étonnant que cela ne marche pas même avec le nouveau code... Je vais essayer de regarder sur leur site. Merci

    RépondreSupprimer
  38. Bonsoir,

    J'ai acheté mon template sur Etsy. Je voulais savoir s'il était possible de mettre un compteur de like sur les boutons de partage ?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est peut-être possible. Je vais me renseigner ;)

      Supprimer
  39. bonjour, encore merci pour tes tutos!
    même question qu'au dessus, un tuto compteur de likes serait vraiment génial!
    et sinon, je voulais savoir s'il était possible de mettre le bouton de commentaire sur la même ligne que les boutons de partage, le tout centré?
    merci de ton aide!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui c'est possible. Dans ton cas, colle ces codes CSS dans ton thème :

      /* Aligne commentaires et boutons de partage sur la même ligne */
      .post-footer .post-footer-line, .btn-partage {
      display: inline-block;
      vertical-align: top;
      }

      /* Centre le contenu du pied d'article */
      .post-footer {
      text-align: center;
      }

      /* Renvoie les libellés à la ligne */
      .post-labels {
      display: block;
      }

      Supprimer
  40. Bonjour, super site, moi qui ai un blog tout neuf et qui n'y connais rien, tu me sauve la vie... c'est encore un peu basique mais j'y vais petit à petit.
    Et pour une fois, c'est un fiasco !!! lol
    En gros déjà si je veux "afficher les boutons partager" dans la configuration des article, il n'y a que Google+ dans la "barre".
    J'ai quand même essayé ce tuto, mais quand je mets la formule (j'ai bien pris la 2eme ligne) ca ne m'affiche que l'enveloppe du partage d'Email (j'avais mis le code pour FB, pinterest, Email et Google+). J'imagine que le problème vient complètement d'ailleurs, mais où ?
    Je n'ai pas trouvé la solution dans les commentaires précédents, alors si tu avais une idée ce serait hyper gentil !!
    (j'ai modifié tout mon blog grace à tes tutos, et tout à marché du premier coup donc y a pas de raison qu'il y ai de grosses boulettes.. ;))
    MErci d'avance !!

    RépondreSupprimer
    Réponses
    1. Bonjour Tine,
      Peux-tu me donner le lien de ton blog pour que je puisse voir le problème ?

      Supprimer
    2. Bonjour,
      J'ai le même problème.
      Seul le logo Google + change de couleur au passage de la souris et quand j'essaie de cliquer sur Twitter, par exemple, il m'ouvre une nouvelle fenêtre pour partager sur Google +.

      Merci pour ton aide !

      Supprimer
    3. Bonjour (pour une deuxième fois),
      Je sais que tu approuves tous les commentaires avant d'y répondre donc j'espère que tu liras celui-ci en même temps que le premier.
      Il se trouve que mon problème s'est résolu tout seul pourtant, je n'ai rien changé au code. J'étais en train de suivre ton article pour Modifier l'apparence du pied de page.

      Supprimer
  41. Salut
    dès le début j'ai un problème, quand je cherche "" rien n'est trouvé.
    Il y a t'il quelqu'un pour m'aider ?
    Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu bien cliqué à l'intérieur de la boîte de code avant d'appuyer sur Ctrl et F en même temps ? Car sinon, alors un champ de recherche apparaît en haut de la page mais il ne marche pas. Il faut ouvrir un champ de recherche à l'intérieur de la boîte de code pour trouver les codes dans le thème.
      Vérifie également que tu n'as pas ajouté d'espace avant ou après le code que tu as collé dans le champ de recherche.

      J'ai regardé ton blog et tu as bien les codes donnés dans le tutoriel ;)

      Supprimer
    2. Merci en effet je n'avais fait la recherche dans la boîte de code. Etant encore un boulet j'ai encore un problème, mes icônes ne sont pas centrer dans mes boutons, comment je pourrais fixer ça ?

      Supprimer
    3. Bonjour,
      Pour centrer tes icônes, il faut modifier la valeur de padding-top du code suivant :

      /* Apparence des icônes */
      .btn-partage .fa {
      font-size: 17px; /* Taille des icônes */
      padding-top: 10px; /* Espace au-dessus des icônes */
      }

      Réduit la valeur pour déplacer les icônes vers le haut, et augmente la valeur pour les déplacer vers le bas.
      Tu peux aussi régler la position horizontale en ajoutant la ligne suivante :

      padding-left: 2px; /* Espace à gauche des icônes */

      Avant le signe } du même code. Une valeur positive déplacera les icônes vers la droite, une valeur négative déplacera les icônes vers la gauche.

      Supprimer
    4. Super merci ! Tu es la meilleure ! ;)

      Supprimer
  42. Tu es génial... Vraiment, tu fais un boulot magnifique
    Merci énormément pour tes tuto, j'adore ;)

    RépondreSupprimer
  43. Hello, merci pour cet article, grâce à toi j'ai pu réaliser mon blog comme je le souhaitais. Dès que je veux continuer sur son design, je vais sur ton blog, une île à bon conseils, gros merci à toi et continue ainsi!

    Par contre, aujourd'hui, j'ai voulu modifié mes libéllés : pas marché
    Là je souhaite modifier les boutons de partage : marche pas non plus, les anciens ne se supprime pas, et les modifications ne s'affichent pas non plus.
    Les deux tutos avaient en commun : ]]>, je ne sais pas si c'est lié au problème, mais ça fait deux tutos que je n'arrivent pas à réalisés correctement...j'espère que tu pourras m'aider

    RépondreSupprimer
  44. Bonsoir et merci pour ce tuto vraiment génial et pratique, une fois de plus ! Mais je me demandais s'il existait une icône pour Hellocoton, comme j'en ai déjà vu beaucoup et que tu as également, je n'en trouve nul part x) Merci beaucoup !

    RépondreSupprimer
    Réponses
    1. Bonjour Victorine,
      Il n'existe pas d'icône Hellocoton dans Font Awesome. Par contre tu peux utiliser une image à la place, ou alors un svg. Ce dernier est un vecteur que l'on peut utiliser sur internet. Je l'utilise dans tous mes projets clients. Je pense le partager dans un tuto car c'est assez pratique ;)

      Supprimer
  45. Bonjour Catherine! J'aime beaucoup vos tutos. Ils sont clairs et si utiles! J'avais très bien réussi à réaliser toutes les étapes mais voilà, j'ai installé un widget qui affiche mes 30 dernières épingles Pinterest dans la barre latérale et l'icône type de Pinterest a pris la place du bouton Pinterest que j'avais créé grâce à vous. J'espère que vous pourrez m'aider.

    RépondreSupprimer
    Réponses
    1. Bonjour Suzanne,
      Oui il y a un conflit entre les gadgets Pinterest et les boutons Pinterest personnalisés.
      Tu peux essaye d'ajouter :

      data-pin-custom="true"

      Avant ceci, à l'intérieur du lien :

      title="Partager sur Pinterest"

      Comme ceci :

      title="Partager sur Pinterest" data-pin-custom="true"

      Supprimer
  46. Bonjour Catherine,
    J'ai beaucoup apprécié ce tuto qui m'a énormément aidé, malheureusement, j'ai un petit problème... Que faut-il marquer pour avoir un bouton Instagram avec un code HTML ?
    Merci beaucoup d'avance, quelque soit la réponse,
    Ambre

    RépondreSupprimer
    Réponses
    1. Bonjour Ambre,
      Il n'existe pas de bouton de partage pour Instagram. On ne peut pas partager des articles sur Instagram ;)

      Supprimer
  47. Hello,
    Merci pour ces tutos vraiment utiles, c'est super !!! Est-il prévu un tuto sur la modification du code html pour personnaliser le site mobile ?

    Mercii :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui c'est noté sur ma liste de tutoriels à faire ;)

      Supprimer
  48. Coucou, pour ma part je n'arrive pas à centrer les boutons de partage, les libellés et le truc de commentaires tout est sur la gauche et pourtant je copie et colle tout ce que tu nous dis de faire la seule chose que je change c'est la couleur ! Voici mon blog http://elodiebooks.blogspot.com à l'aide ça fait juste trop laid les icônes c'est pareil rien ne se centre ! :(

    RépondreSupprimer
    Réponses
    1. J'ai vu que tu as réglé le problème ;)

      Supprimer
  49. Hello Catherine!

    Merci infiniment pour ce tuto!
    Mon blog va être tellement beau grâce à toi!
    J'ai cependant un petit problème: les logo des boutons de partage ne sont pas centré dans les cercles des boutons.
    Je ne sais pas si je suis très claire :/
    Peux-tu m'aider s'il te plaît?
    Je suis perdue...
    des bises
    Julie

    RépondreSupprimer
    Réponses
    1. Bonjour Julie,
      Je ne vois pas tes boutons de partage, est-ce normal ?

      Supprimer
  50. Re-coucou!
    Je viens de voir dans les commentaires la réponse à ma question précédente. Merci beaucoup! Je suis joie et amour! <3

    RépondreSupprimer
  51. Bonjour Catherine ! J'avais une petite question : je suis complètement autodidacte et ai découvert hier après plusieurs heures de bidouillage l'inspecteur d'élément web sur mon blog. J'ai modifié quelques données grâce à cet outil et ai trouvé des changements qui me plaisaient bien, seulement je n'ai pas réussi à transférer ces nouvelles données dans l'utilitaire Blogger pour modifier le code HTML. Je ne sais pas si je suis très claire x)Par exemple j'ai réussi grâce à l'inspecteur à déplacer mon titre de blog au centre, mais je ne parviens pas à trouver la ligne de code et la manipulation correspondante sur Blogger afin que ce changement devienne permanent.

    Merci pour votre réponse ! :)
    http://lecoffre713.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Clara,
      Oui cet outil est vraiment utile ! ^^
      Par contre tout ce que tu modifies avec n'est pas sauvegardé. Même en rafraîchissant la page tu perdras tout. Il faut à chaque fois copier les codes CSS et les coller dans ton thème, ou modifier les codes existants.
      Cherche la première ligne de chaque code CSS que tu modifies. La première ligne est celle finissant par le signe {

      Par exemple :

      header {

      ou

      .post-body {

      Si tu ne trouve pas le code, alors il est généré par Blogger et non par ton thème. Rajoute-le manuellement avant la ligne :

      ]]></b:skin>

      Il se peut que certains paramètres ne soient quand même pas pris en compte. Pour forcer le navigateur à prendre en compte ces codes tu peux ajouter !important avant le signe ; du paramètre. Par exemple :

      .post-body a {
      color: #000000 !important;
      }

      Supprimer
  52. Bonsoir, bonsoir, encore merci pour ce tuto qui m'aide grandement !
    Je pense avoir tout suivi à la lettre, seulement, les petits boutons n'apparaissent pas :(
    Voilà mon blog : http://laurenegrisot.blogspot.fr/

    Bonne soirée (ou plutôt bonne nuit) :)

    RépondreSupprimer
    Réponses
    1. Bonjour Laurène,
      As-tu bien ajouté le code des boutons dans le 2e code du pied de page ? Chaque code est en double : les premiers correspondent à la version mobile du blog, et les 2e correspondent à la version web du blog.

      Supprimer
    2. Bonjour,
      Ah oui exact c'était ça que j'avais oublié ! Merci beaucoup !

      Supprimer
  53. Coucou! Merci pour ce super article qui m'a beaucoup servi mais j'ai un problème avec le "gadjet" de partage instagram, il s'affiche en noir alors que tous les autres, on peut cliquer dessus :(
    Merci d'avance ;)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      De quel gadget Instagram parles-tu ?
      Il n'y a pas de bouton de partage des articles sur Instagram, car c'est impossible.

      Supprimer
  54. Coucou miss,

    Je suis en train de remodeler un nouveau template pour mon blog en privé du coup tu ne pourras pas le voir mais je me sers de ton site activement :D
    Pour la personnalisation des icones, ou places tu le code HTML j'ai relu 15 fois et je n'ai pas vu :/
    Je l'ai mis en dessous de foot liner 2 mais pas marcher et j'ai essayé en dessous de la ligne pour faire disparaitre les boutons non plus :/
    Du coup, j'ai bien les boutons mais je n'arrive pas à les personnaliser :/

    Je les voudrais en fond blanc, icone rose et dans un cercle rose au milieu mais j'arrive pas lol!

    Merci pour ton aide, en tout cas, ton blog est génial!
    bisous
    Aurélie

    RépondreSupprimer
  55. Coucou,
    Suite à mon message de ce matin, j'ai finalement réussi à tout faire, t'es vraiment trop génial!

    Sais tu comment je pourrais créer un bouton J'ai aimé cet article avec un coeur pour voter sur Hellocoton?
    Je sais pas si je suis claire?

    Merci ma belle!

    RépondreSupprimer
    Réponses
    1. Bonjour Aurélie,
      Tu peux trouver le code, à insérer avant ou après tes nouveaux boutons de partage, sur Hellocoton : http://www.hellocoton.fr/outils#widget
      Utilise le code donné sous "Si votre plate-forme n'est pas dans la liste" ;)

      Supprimer
    2. Merci miss! J'ai mis mon nouveau design en ligne ;)

      En fait, je voulais un truc personnalisé parce que le leur est moche mdr.
      un peu comme ca
      http://www.pinketcetera.com/

      Tu sais?
      Bisous :D

      Supprimer
  56. Coucou,

    C'est remoi lol, si tu modères tout d'un coup, tu vas flipper de mes commentaires AHAH.

    J'avais tout bien fait mais d'un seul coup, les icones se sont remodifiées à gauche. Seule la couleur est bonne et j'avais mis centrer le pied de page et des bordures rondes mais ca marche pas.
    Puisque je suis en train d'installer d'autres codes, penses tu que ca peut interférer?

    Merci de ton aide :D

    RépondreSupprimer
    Réponses
    1. Bonjour Aurélie,
      As-tu réglé le problème ?

      Supprimer
    2. Ouiiii merci :D en fait quand je suis passée sur mon blog définitif et non pas le test, j'ai refait tout la manip et ca a réglé le soucis :D merci ma belle

      Supprimer
  57. Merci Catherine pour le tuto! Il est Top!

    RépondreSupprimer
  58. Bonjour Catherine,

    Je viens d'essayer la manip, mais au moment d'enregistrer et avant de cacher les boutons par défaut, voici le mot que j'ai :

    Erreur d'analyse XML, ligne 1322, colonne 3 : The element type div must be terminated by the matching end-tag div..

    Du coup ça ne marche pas...
    Merci de ton aide, comme toujours ;)
    Adleine

    RépondreSupprimer
    Réponses
    1. Bonjour Adeline,
      Tu as du supprimer un bout de code comme ceci :

      </div>

      Charge ta sauvegarde de thème et recommence en faisant attention aux </div> ;)

      Supprimer
  59. J'ai retiré les guillemets du DIV car sinon le message ne passait pas...
    Merci

    RépondreSupprimer
  60. Coucou Catherine,
    Je viens de recommencer la manip, je ne trouve pas les codes :(((
    Je ne trouve que :
    div class='navbarleft

    Merciii beaucoup de ton aide

    RépondreSupprimer
    Réponses
    1. Bonjour Adeline,
      En regardant ton blog, tu as bien les codes du pied d'article pourtant. Vérifie que tu as bien cliqué dans la boîte de code avant d'appuyer sur Ctrl et F en même temps. Sinon un champ de recherche apparaît bien en haut à droite de la page mais il ne fonctionne pas. Il faut utiliser celui qui s'affiche en haut à droite de la boîte de code.
      Vérifie également que tu n'as pas inséré d'espace avant ou après le code en le collant dans le champ de recherche.

      Supprimer
    2. Merci Catherine!

      Effectivement de temps en temps dans la barre de recherche il ne me trouve rien du tout et je suis obligée de revenir sur l'onglet " Modèle".

      J'ai cependant réussi la manip jusqu'à:
      Cacher les boutons par défaut de Blogger

      Mais pour "Modifier l'apparence des boutons avec du CSS" on les colle ou les codes? A la suite de quoi?
      Désolée, mais je crois que j'ai tellement bataillé que je suis paumée...

      Mercii milleeee fois

      Supprimer
    3. Bonjour Adeline,
      Pas de soucis, colle les codes avant la ligne :

      ]]></b:skin>

      Supprimer
  61. Bonjour Lady Bird Red
    Désolé mais ça ne fonctionne pas, il me met Bad Request Error 400 lorsque je veux prévisualiser mon blog !
    Qu'ai-je mal fait ?
    Merci

    RépondreSupprimer
    Réponses
    1. Bonjour Claude,
      Tu as dû faire une erreur en modifiant ton thème.
      Charge la sauvegarde que tu as dû faire avant de commencer les modifications, et recommence.

      Supprimer
  62. Bonjour, j'ai suivi toutes vos étapes et ça ne marche pas pour moi ;(
    Il n'ya ni es boutons qui ont apparu ni les boutons moches qui ont disparu :(

    RépondreSupprimer
    Réponses
    1. Bonjour Amira,
      As-tu bien collé les codes pour tes boutons dans le 2e code correspondant à la partie (1, 2 ou 3) de ton pied d'article ? Les codes des 3 parties apparaissent 2 fois dans ton code HTML : pour la version mobile et la version web et du blog. Celui qu'il faut chercher est le 2e avec le plus grand nombre à sa gauche. Pour passer au 2e code, il faut appuyer 2 fois sur Entrer quand tu fais la recherche ;)

      Supprimer
  63. Bonjour Catherine! J'ai suivi beaucoup de tes tutos qui ont vraiment amélioré le design de mon blog! Le dernier en date est celui des boutons CSS pour les réseaux sociaux, et ça a marché du tonnerre! Sauf, que gros pb: depuis que j'ai effectué ce tuto, ma barre de navigation (que j'avais créée grâce à toi) a complètement disparu de mon blog! c'est à n'y rien comprendre! Pourtant, elle apparaît bien dans la page de code à la rubrique */Tabs, mais pas sur mon blog! Pire, lorsque je charge d'anciennes sauvegardes de mon blog, elle n'apparaît plus non plus, alors qu'elle est bien codée! Peux-tu me dire ce qui cloche? Je suis un peu désemparée! Merci! Je t'embrasse!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu réglé le problème ?

      Supprimer
  64. Bonjour,
    J'ai réussi à faire tout le tutoriel (avec les réponses aux commentaires aussi), mais je me demandais comment faire pour centrer les lignes "écrit par" et "nombres de commentaires". Juste pour qu'elles soient centrées comme les boutons de partage. Pourrais-tu m'aider s'il te plait ?
    Merci d'avance, et bonnes vacances ;)

    Pauline
    http://thecutestlifeisnow.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Pauline,
      Le problème d'alignement vient d'emplacements d'éléments vides dans ton pied d'article (heure de publication, réactions, etc.). Tous ces éléments ont une marge qui créé un espace vide.
      Pour rectifier cela, colle les codes CSS suivants :

      /* Rectifier les marges des éléments du pied d'article */
      .post-footer span {
      margin: 0;
      }
      .post-author.vcard {
      margin-right: 10px; /* Espace à droite de l'auteur */
      }

      Avant la ligne suivante du code de ton thème :

      ]]></b:skin>

      Supprimer
  65. J'ai un problème, je rentre les codes mais aucun boutons ne s'affichent.. Pouvez-vous m'aider?

    RépondreSupprimer
    Réponses
    1. Bonjour Marie,
      Cela peut venir de ton thème car c'est un thème tiers. Les codes sont différents dans ce genre de thèmes :/
      Dans ce thème tes boutons de partage sont dans un contenant commençant par :

      <div class="share">

      Supprimer
  66. Bonjour Catherine, J'aurai voulu savoir où il faut placer les codes CSS si je veux faire des boutons de partage dans un Widget sur le bord du blog est non en bas de page?
    Merci d'avance, bises! ;)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Si tu souhaites des boutons dans la barre latérale qui renvoient vers tes pages sur les réseaux sociaux, ce ne sont pas des boutons de partage qu'il te faut. Les boutons de partage permettent au lecteur de partager l'article sur leur propres réseaux sociaux. Il faut que ces boutons soient placées sur la page l'article pour y être associer.
      Pour créer des boutons qui renvoient vers tes pages sur les réseaux sociaux tu peux t'inspirer de ce tutoriel en remplaçant le texte des liens par les codes Fontawesome pour chaque réseau social que tu peux trouver ici.

      Supprimer
  67. Hello, merci mille fois pour tous tes tutos, c'est grâce à toi que j'arrive à personnaliser mon blog http://mytravelingchannel.blogspot.com ; néanmoins sur ce tuto j'ai un petit soucis, les logos des boutons ne se centrent pas, ils restent sur la gauche, il y a t'il une petite astuce ? De plus, connais-tu le code pour mettre le logo instagram ? Je te remercie, Charlène

    RépondreSupprimer
    Réponses
    1. Bonjour Charlène,
      Il n'y a pas de code pour partager sur Instagram car on ne peut publier que son propre contenu sur Instagram ;)
      Pour centrer tes boutons retrouve ton code :

      /* Contenant des boutons de partage */
      .btn-partage {
      margin-right: 15 !important;
      margin-top: 10px; /* Espace au-dessus */
      margin-bottom: 10px; /*Espace en-dessous */
      }

      Supprime la ligne :

      margin-right: 15 !important;

      Car elle contient une erreur et décalera tes boutons lors du centrage. Ensuite ajoute cette ligne :

      text-align: center; /* Centre les boutons */

      Avant la signe } comme ceci :

      /* Contenant des boutons de partage */
      .btn-partage {
      margin-top: 10px; /* Espace au-dessus */
      margin-bottom: 10px; /*Espace en-dessous */
      text-align: center; /* Centre les boutons */
      }

      Et voilà ;)

      Supprimer
  68. Bonjour, une remarque:
    il ne faut pas remplacer la balise indiqué pour le titre de la page mais la faire suivre par le morceaux de code indiqué directement à la suite.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je n'ai pas bien compris la remarque :/
      Tous les codes du tutoriel sont à coller avant ou après les codes à chercher. Il ne faut pas supprimer les codes à chercher ;)

      Supprimer
  69. Bonjour Catherine, je decouvre vos tutos, tres aidant. J ai une question (je tripatouille des codes depuis 2 jours et rien a faire ! http://olivbusua.blogspot.com/). Votre tuto fonctionne t il aussi pour les vues dynamiques de blogspot? Bien a vous. D.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Malheureusement non les tutoriels ne fonctionnent pas avec le modèle dynamique. Ce modèle est particulier et ne permet pas une grande personnalisation.
      Désolée :/

      Supprimer
    2. Merci pour votre reponse Catherine. Donc dynamique... pas tant que cela! bonne journee a vous.

      Supprimer
  70. merci Catherine du fond du coeur car les template que nous téléchargeonzs pour blogger sur le net font baisser le trafic sur blogger mais avec une personnalisation à l'aide des codes html.C'est bien

    RépondreSupprimer
  71. Un grand grand merci pour ce tuto que j'ai suivi à la lettre et tout a parfaitement fonctionné :)

    Par contre j'aurais juste deux questions :

    1) comment fait-on pour centrer les commentaires comme tu l'as fais ?
    2) Où doit-on coller les liens de nos réseaux sociaux ? Parce que pour l'instant j'ai les boutons mais ils ne renvoient pas sur mes réseaux sociaux, juste sur la plateforme :)

    Merci !!

    (mon blog : www.lenvieenrose.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Bonjour Sara,
      Pour les commentaires, c'est parce que je n'ai pas de barre latérale qu'ils sont centrés ;)
      Pour les liens de réseaux sociaux parles-tu des boutons de partage ou des boutons vers tes pages sur les réseaux sociaux ?
      J'ai testé tes boutons de partage et ils marchent très bien. Par contre tu peux supprimer le bouton Instagram car il n'existe pas de bouton de partage d'articles vers Instagram ;)
      J'ai également testé tes boutons en bas de page vers tes pages sur les réseaux sociaux et ils marchent aussi ;)

      Supprimer
  72. Ah bah oui je suis bête pour Instagram haha !! Ils marchent tous aujourd'hui sauf Twitter, ça me dit que la page demandé n'existe pas :/
    En tout cas merci beaucoup pour la réponse :)

    RépondreSupprimer
    Réponses
    1. Bonjour Sara,
      L'adresse URL de ton lien Twitter n'est pas bon. Remplace le code de ton bouton Twitter par celui-ci :

      <!-- Twitter-->
      <a expr:href='"https://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Partager sur Twitter'>
      <i class='fa fa-twitter'/>
      </a>

      Supprimer
  73. Merci pour ces tutos ! Celui-ci m'a permis enfin de virer la magnifique (recommandé par Google) à la fin de tous mes articles !!
    Alors merci, merci, merci !
    Continuez comme ça, c'est vraiment génial !

    la-lutine-tricotine.blogspot.fr

    RépondreSupprimer
  74. Bonjour Cath !
    J'ai voulus installé celui de Twitter dans les icônes de partage. Mais il m'indique ceci : "Impossible de charger l'aperçu du modèle : Erreur d'analyse XML, ligne 1538, colonne 72 : The reference to entity "title" must end with the ';' delimiter..
    Pourtant, j'ai bien recopié ton lien d'au-dessus pour l'adresse URL...

    Je ne comprends pas...

    RépondreSupprimer
    Réponses
    1. Bonjour Angie,
      Tu as du faire une petite erreur au moment de coller le code. Tu as peut-être supprimé un morceau de code, ou oublié un bout de code, en collant le code pour Twitter. Charge ta sauvegarde et recommence en faisant bien attention à ne rien oublier, et à ne pas supprimer de code qui se trouve déjà dans ton thème ;)

      Supprimer
  75. Bonjour Ladybird !

    Merci pour ta précieuse aide qui m'a permis d'apprendre le code et faire mon blog à ma sauce...
    Maintenant que j'ai pu mettre mon lien de partage facebook dans ma barre de menu, j'aimerais désespérément y ajouter un compteur du nombre de fois que mon site a été partagé sur facebook.
    Mais j'ai beau chercher et chercher encore, impossible.
    Sais tu comment faire ? Crois-tu que tu pourrais en faire un futur tuto ou completer celui-ci avec cette info ?
    Ce serait vraiment top, si ça ne te demande pas trop biensûr...

    Un site comme exemple : http://ojo-publico.com/sites/apps/amarakaeri-parte1/ -- dans la Sidebar en bas, le numero en dessus du logo facebook.

    MERCI POUR TON SUPER BOULOT !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Malheureusement les compteurs Facebook sont complexes à mettre en place, surtout sur Blogger. Facebook vient récemment de modifier le fonctionnement des codes qui génèrent l'accès à ces chiffres, et c'est encore plus complexe qu'avant... Si je trouve un moyen simple de le mettre en place j'en ferai un tutoriel ;)

      Supprimer
    2. MERCI ! J'espère que nous trouverons une solution... Si j'en trouve une je tâcherai de la partager !

      Supprimer
  76. Merci beaucouppour tes tuto et je dois avouher que si je suis arriver à ce stade c'est aussi grace a toi. j'ai un soucis au niveau de "caher les les icones par defaut de Blogger et le code que tu as fournis semble ne pas fonctionner aver le mien et je ne sais pas oû le problème se situe. J'ai besoin de ton aide s'il te plaît. voici le message qu'il afiche juste avan la ligne ]]> que tu as indiqué dans ton tuto:
    .mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
    border-$startSide: 1px solid $(tabs.border.color);
    }

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu bien collé le code CSS suivant pour cacher les boutons de Blogger ?

      /* Permet de cacher les boutons de partage par défaut de Google
      -- Pour remettre ces boutons sur votre blog supprimez ce code CSS */
      .post-share-buttons.goog-inline-block {
      display: none !important;
      }

      S'il ne fonctionne pas, vérifie qu'il ne manque pas un signe { : ; } /* ou */ dans les codes CSS qui se trouvent avant ce code CSS. Un oubli d'un signe, ou un signe en trop, et tout ce qui suit l'erreur est mal, ou pas pris en compte ;)

      Supprimer
  77. Merci mille fois pour tes tutos ! Je suis novice, et très étonnée d'avoir pu créer des boutons allant vers les liens de mon facebook, instagram et pinterest en une journée.
    Mais je n'arrive pas à changer l'apparence de mes boutons css malgré mes essais...

    RépondreSupprimer
    Réponses
    1. Bonjour Myrtille,
      Il y a quelques erreurs dans ton code CSS. Si tu souhaites supprimer un paramètre, supprime toute la ligne, ne laisse pas une ligne sans valeur. Par exemple, dans ton code suivant :

      #Bouton-css a {
      display: inline-block;
      background-color: ; /* Couleur de fond */
      width: 40px; /* Largeur du bouton */
      height: 30px; /* Hauteur du bouton */
      border-style: solid; /* Style de la bordure */
      border-width: ; /* Epaisseur en pixels de la bordure */
      border-color: ; /* Couleur de la bordure */
      -webkit-border-radius: 50%; /* Bord arrondis */
      border-radius: 50%; /* Bord arrondis */
      color: #000000; /* Couleur des icônes */
      margin-left: 3px; /* Espace à gauche */
      margin-right: 3px; /* Espace à droite */
      }

      Les lignes suivantes sont vides (il n'y a irne entre le signe : et le signe ;) :

      background-color: ; /* Couleur de fond */
      border-style: solid; /* Style de la bordure */
      border-width: ; /* Epaisseur en pixels de la bordure */
      border-color: ; /* Couleur de la bordure */

      Supprime-les.
      Ensuite, remplace les valeurs qui ne te plaisent pas par celles que tu souhaites ;)

      Supprimer
  78. Bonjour Catherine,
    De mon côté, j'ai bien réussi à créer et personnaliser les boutons de partage. Le problème que j'ai, c'est qu'ils apparaissent également sur la page de contact que j'ai créée (grâce à un autre de tes tutos d'ailleurs ^^). Voilà l'adresse de mon blog pour que tu puisses te rendre compte de ce dont je parle : http://unefolleenviedegourmandises.blogspot.fr/
    Y a-t-il un solution selon toi ?
    Merci beaucoup.

    RépondreSupprimer
    Réponses
    1. Bonjour Marion,
      Tu peux cacher le pied d'articles sur les Pages du blog avec les codes conditionnels. Il faut utiliser le code conditionnel pour les pages Statiques :

      <!-- Affichage sur Pages -->
      <b:if cond='data:blog.pageType == "static_page"'>
      <!-- Contenu ici -->
      </b:if>

      Et ajouter le code CSS pour cacher le pied d'article. Remplace la ligne :

      <!-- Contenu ici -->

      Par :

      <style type="text/css">
      .post-footer {
      display: none;
      }
      </style>

      Colle l'ensemble du code avant la ligne suivante de ton thème :

      </body>

      Supprimer
  79. Bonjour!
    Merci beaucoup pour ce tutoriel!
    J'ai essayé de le suivre à la lettre, mais je ne vois aucun changement par rapport à avant... sniff... toujours les mêmes boutons de partage moches...
    Et si je colle le code pour cacher les boutons par défaut de Google, il me cache tout même celui de Facebook que je voulais absolument ajouter...
    peux-tu m'aider?
    merci

    RépondreSupprimer
  80. C'est bon! j'ai cherché, et je pense avoir réussi! merci beaucoup pour ce tuto!

    RépondreSupprimer
  81. coucou. C'est encore moi... J'ai dû faire une bêtise quelque part, je n'ai que trois boutons qui s'affichent (facebook, pinterest et google +) eu lieu de 5 (manque twitter et email)... Qu'est-ce que j'ai fait de travers? Merci!

    RépondreSupprimer
  82. J'avais juste oublié de coller le code une deuxième fois pour la version ordinateur. Donc c'est bon, tous mes boutons de partage apparaissent bien sur la version mobile et sur la version ordi maintenant. Ouf!
    Par contre, j'ai tout de même encore quelques petites questions...
    - je n'arrive pas à cacher/supprimer "partager sur Google +" sur la version mobile
    - l'icône "j'aime cet article" de hellocoton n'apparaît que sur ma version mobile, j'aimerais l'ajouter aussi pour la version web
    - l'icône "j'aime cet article" de hellocoton apparaît en dehors du cadre où apparaissent les boutons de partage, j'aimerais bien que tout soit au même endroit
    - le titre de mon article apparaît derrière mes icônes de partage sur la version mobile, ça fait super moche... comment le décaler?
    - est-il possible de modifier la couleur de fonds des icônes de partage de façon individuelle? (bleu pour FB, rouge pour Pinterest...)

    Tu peux m'aider? j'espère que ça ne fait pas trop de questions...
    Désolée mais je débute, heureusement que tes tutoriels sont là tu m'as déjà bien aidée à me débrouiller!

    merci

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Pour cacher le Partager sur Google sur mobile ajoute le code CSS suivant :

      .mobile .post-footer-line.post-footer-line-2 {
      display: none;
      }

      Avant la ligne suivante de ton thème :

      ]]></b:skin>

      Ensuite pour le bouton Hellocoton, tu as dû coller le code dans la version mobile seulement. C'est comme pour les boutons de partage il faut coller le code 2 fois pour la version mobile et la version web.
      Tu as collé le code du bouton en dehors du pied d'article, déplace-le après la ligne :

      <div class="post-footer">

      Pour qu'il soit à l'intérieur du cadre.

      Pour le titre des article je ne vois pas le problème en allant sur ton blog :/

      On peut tout à fait modifier les liens séparément. Pour cela il faut donner un nom à chaque icône.

      Retrouve les codes des boutons de partage, par exemple celui de Facebook :

      <!-- Facebook -->
      <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Partager sur Facebook'>
      <i class='fa fa-facebook'/>
      </a>

      Pour ajouter un nom on va coller :

      class="facebook"

      Juste après le <a au début du code comme ceci :

      <!-- Facebook -->
      <a class="Facebook" expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Partager sur Facebook'>
      <i class='fa fa-facebook'/>
      </a>

      Fait de même pour les autres liens en remplaçant Facebook par un nom différent pour chaque lien.

      Ensuite on peut cibler chaque lien avec leur nom comme ceci :

      .btn-partage a.Facebook {
      }

      Dans ce code CSS il faut ajouter les paramètres spécifiques à ce lien. Par exemple : une couleur différente, un fond différent, etc.

      Pour cibler les autres liens, remplace Facebook dans ce code CSS par le nom que tu as donné aux autres liens ;)

      Supprimer
  83. Bonjour!
    Merci pour ta réponse!
    Grâce à toi j'ai réussi à faire disparaître "Partager sur Google +" sur version mobile, et à ajouter "J'aime" Hellocoton sur version web. ça progresse!
    Par contre, j'ai un souci quand j'applique tes conseils pour modifier les boutons de partage séparément...
    Depuis que je les ai renommés en ajoutant un nom (class="Facebook" par exemple), j'ai un message d'erreur :
    Impossible de charger l'aperçu du modèle : Erreur d'analyse XML, ligne 1736, colonne 93 : The reference to entity "t" must end with the ';' delimiter..

    RépondreSupprimer
    Réponses
    1. Pour le titre de ton article, le problème vient de ce code :

      .mobile h3.entry-title {
      text-align: center; /* Alignement Titre : left / center / right */
      z-index: 999;
      float: left;
      left: 5%;
      width: 90%;
      margin: 0;
      padding: 0;
      height: 48px;
      position: absolute;
      bottom: 70px;
      font-size: 13px; /* Taille Titres */
      font-weight: 350; /* Epaisseur Titres */ }

      Déplace-le dans ton code pour l'affichage des articles en miniatures, avant la ligne :

      </style>

      Comme ça, il n'affectera que les pages d'index et non les pages des articles ou les pages statiques.


      Retrouve ce morceau de code dans le code Facebook :

      "&t="

      Et remplace-le par :

      "&t="

      Supprimer
  84. Problème du titre de l'article résolu!! merci beaucoup!
    par contre, je crois que tu as fais une erreur en copiant le code suivant:
    Retrouve ce morceau de code dans le code Facebook :
    "&t="
    Et remplace-le par :
    "&t="
    c'est le même exactement non?

    RépondreSupprimer
    Réponses
    1. --' C'est le formulaire de commentaire qui traduit ce que j'écris... Si tu regardes bien dans le tutoriel le "&t=" est en fait " & amp;t" sans les espaces autour du &. Le formulaire de commentaire traduit automatiquement & amp; (sans espace) en &

      Supprimer
    2. Merci pour ta réponse.
      En vérifiant de nouveau mon HTML, le code m'a déjà l'air correctement écrit " &t".
      Mais si tu ne sais pas d'où vient le problème ce n'est pas grave, je suis déjà hyper contente d'avoir pu personnaliser mes boutons de partage, tans pis si je ne peux pas les personnaliser individuellement.
      Comme ça j'arrête de t'embêter, tu m'as déjà super aidée!
      Merci beaucoup pour tous ces supers tutoriels, pour ta réactivité aux messages, etc!
      C'est vraiment super quand on débute d'avoir un site comme le tien pour aider :)

      Supprimer
    3. Bonjour,
      Normalement l'erreur Erreur d'analyse XML, ligne 1736, colonne 93 : The reference to entity "t" must end with the ';' delimiter signifie que le signe & de &t est écrit en tant que & et non & amp; (sans l'espace entre le & et amp). En fait Blogger ne peut lire le signe & dans le code il faut écrire & amp; (sans espace). Vérifie tes autres codes pour les autres liens, qu'il n'y ait pas d'erreur.

      Supprimer
  85. Bonjour ! j'aurais besoin d'aide également j'ai l'impression d'avoir tout fait correctement mais je bloque depuis 1 heure j'arrive pas a faire paraitre l'apparence voulu de mes icônes, je ne trouve pourtant pas l'erreur...

    RépondreSupprimer
    Réponses
    1. Bonjour,
      En regardant rapidement ton blog, il y a une erreur dans tes codes CSS. Tu as ceci :

      /* Contenant des boutons de partage */
      .btn-partage {
      margin-right: 0 !important;
      margin-top: 10px; /* Espace au-dessus */
      margin-bottom: 10px; /*Espace en-dessous *
      }

      Il manque le signe / à la fin de la ligne :

      margin-bottom: 10px; /*Espace en-dessous *

      Rajoute-le.

      Si cela ne règle pas le problème c'est qu'il doit y avoir une autre erreur quelque part. Vérifie qu'il ne manque pas un signe { : ; } /* ou */ dans les codes CSS qui se trouvent avant ou après ce code CSS. Un oubli d'un signe, ou un signe en trop, et tout ce qui suit l'erreur est mal, ou pas pris en compte ;)

      Supprimer
  86. Bonjour!
    Je découvre avec bonheur ton blog, en pleine refonte du mien, c'est une vraie mine d'or! MERCI!
    J'ai un petit souci malgré tout: je ne trouve pas "]]>" et donc je ne sais pas où coller les codes pour modifier l'apparence de mes boutons de partage.
    Peux-tu m'aider s'il te plaît ?
    Un immense merci dans tous les cas, et bien à toi!

    RépondreSupprimer
    Réponses
    1. Bonjour Aurore,
      Tu devrais pourtant trouver ce code car il est présent dans tous les blogs Blogger.
      Sur la page de ton thème clique bien à l'intérieur de la boîte de code puis appuie sur Ctrl et F en même temps (ou Cmd et F sur mac). Dans le champ de recherche qui doit apparaître à l'intérieur de la boîte de code colle :

      ]]></b:skin>

      Attention à ne pas ajouter d'espace avant ou après le terme de recherche. Appuie ensuite sur Entrer et tu devrais trouver la ligne de code recherchée ;)

      Supprimer
  87. Coucou,

    Ton tuto est parfait. Merci !

    RépondreSupprimer
  88. Bonsoir Catherine,
    j'essaie tant bien que mal de mettre les boutons de partage (Pinterest, Twitter, Facebook) au pied de mon article mais je n'arrive pas... D'ailleurs, je voulais aussi mettre le pin it, mais cela ne fonctionne pas non plus... J'ai l'impression d'avoir fait des erreurs à force de modifier ou quelque chose comme ça. Pourrais-tu m'aider s'il te plait ?
    C'est mon blog : http://xoclaire.blogspot.fr/
    Merci beaucoup !
    xoClaire

    RépondreSupprimer
    Réponses
    1. Bonjour Claire,
      Vérifies que tu colle les codes HTML des boutons de partage dans le code de ton pied d'article pour la version web. Tu trouveras le code du pied d'article 2 fois dans le code de ton thème. Le 1er (avec le plus petit nombre à sa gauche) correspond à la version mobile, le 2e (avec le plus grand nombre à sa gauche) correspond à la version web de ton blog. Pour passer au 2e code, il faut appuyer 2 fois sur Entrer quand tu fais la recherche ;)

      Supprimer
  89. Bonjour, mes icones sont des ronds mais je ne vois pas le logos des réseaux dessus... ?? Ils sont tout bleu !

    Sinon le tuto est top !

    RépondreSupprimer
    Réponses
    1. Bonjour Chloe,
      Je ne vois pas les icônes sur ton blog, je ne peux pas te dire d'où vient le problème :/
      Vérifies bien qu'il n'y a pas une erreur dans ton code CSS. S'il manque un des signes suivants, ou s'il y en a un en trop alors tout ce qui suit l'erreur sera mal, ou pas pris en compte :

      { : ; } /* */

      Vérifies également que tu as bien une couleur différente du fond pour les liens des icônes, et qu'il n'y a pas d'erreur dans la valeur de la couleur. Elle doit commencer par # et comporter 6 chiffres.

      Supprimer
  90. Bonjour ! Est-ce qu'on peut utiliser ce tuto pour partager le blog ? Je ne voulais pas mettre les partage article par article mais plutôt le blog entier, c'est possible ,

    RépondreSupprimer
    Réponses
    1. Bonjour Chloe,
      Il me semble que oui on peut partager l'adresse du blog au lieu de l'article. Dans ce cas il faut changer les url des boutons, et surtout ne pas les ajouter en fin d'article, mais plutôt dans un gadget HTML quelque part d'autre sur le blog.
      Pour les codes utilises plutôt :

      <!-- Facebook -->
      <a href='http://www.facebook.com/sharer.php?u=http://tonblog.blogspot.fr/' rel='nofollow' target='_blank' title='Partager sur Facebook'>
      <i class='fa fa-facebook'/>
      </i></a>

      <!-- Twitter-->
      <a href='https://twitter.com/share?url=http://tonblog.blogspot.fr/' rel='nofollow' target='_blank' title='Partager sur Twitter'>
      <i class='fa fa-twitter'/>
      </a>

      <!-- Pinterest-->
      <a href='http://www.pinterest.com/pin/create/button/?url=http://tonblog.blogspot.fr/&description=DESCRIPTION ici&media=URLIMAGE' title='Partager sur Pinterest'>
      <i data-pin-custom="true" class='fa fa-pinterest-p'/>
      </a>

      <!-- Google+ -->
      <a href='https://plus.google.com/share?url=http://tonblog.blogspot.fr/' rel='nofollow' target='_blank' title='Partager sur Google+'>
      <i class='fa fa-google-plus'/>
      </a>

      <!-- E-mail -->
      <a :href='mailto:?Subject=SUJETDUMAIL&body=http://tonblog.blogspot.fr/' rel='nofollow' target='_blank' title='Partager par Email'>
      <i class="fa fa-envelope"/>
      </a>

      Remplaces les adresses urlen gras par celle de ton blog.
      Remplace aussi les textes en gras par ce qui est décrit (description, sujet de message, url d'une image).

      Supprimer
  91. Bonjour Catherine,
    J'ai téléchargé un thème et j'avais déjà de boutons de partage. Cependant en testant ces boutons, je me suis rendu compte que le bouton partager sur pinterest ne fonctionne pas. Pourrais-tu m'aider?
    Merci d'avance,
    www.wildamanda.com

    RépondreSupprimer
  92. Re-bonjour,
    Je viens de commenter car mon bouton partager pinterest ne fonctionnait pas, je viens d'ajouter le bouton "pin it" au survol de la souris donc maintenant il marche, sauf qu'à la fin de mes articles il y à l'image "pin it" au lieu du texte "SUR PINTEREST". Est-ce qu'il y a une solution?
    Merci beaucoup pour ton aide !

    RépondreSupprimer
    Réponses
    1. Bonjour Amanda,
      Il faut retrouver le code de ton bouton de partage dans ton thème.
      Essaye de chercher :

      <ul class="social-share-buttons

      Ou

      <ul class='social-share-buttons

      Sous cette ligne se trouve les codes pour tes boutons de partage.
      Repère le code qui contient Pinterest et qui commence par <a. Juste après ce <a colle :

      data-pin-custom="true"

      Comme ceci :

      <a data-pin-custom="true"

      Supprimer
    2. Super merci beaucoup Catherine ! Une dernière petite question, vraiment désolé... Le bouton pin it apparait également sur mon logo (header) comment puis-je l'enlever?
      Merci encore milles fois pour ton aide précieuse.

      Supprimer
    3. Bonjour Amanda,
      Tu peux désactiver le bouton Pinterest au survol d'une image en ajoutant ceci :

      data-pin-nopin"true" data-pin-no-hover="true"

      Au code HTML de l'image.

      Pour trouver le code HTML de ton image d'en-tête, cherches la ligne suivante dans le code de ton thème :

      <div id='header-inner'>

      Tu le trouveras 3 fois. Sous un de ces codes se trouve une ligne qui commence par :

      <img expr:alt='data:title'

      A la suite de ce morceau de code ajoute :

      data-pin-nopin"true" data-pin-no-hover="true"

      Comme ceci :

      <img expr:alt='data:title' data-pin-nopin"true" data-pin-no-hover="true"

      Sauvegardes et voilà ;)

      Supprimer
  93. Bonjour,

    je rencontre un petit problème :/

    Tu expliques qu'il faut cliquer sur le petit triangle noir à côté de ... dans notre code html sauf que je ne vois aucun ... dans mon code... que faire?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Si tu ne trouves pas ce triangle c'est que ton code est déjà ouvert. Tu peux passer à l'étape suivante ;)

      Supprimer
  94. Bonjour ! Je viens de découvrir ton blog, c'est une vraie mine d'or ! Par contre, j'ai suivi ce tuto et j'ai plusieurs problèmes : je n'arrive pas à faire en sorte que mes boutons s'affichent au centre de mon pied de page, ils sont totalement à gauche. Et aussi, je n'arrive pas à afficher mes icones (par exemple le petit f de facebook eu le g+ de google+) au centre de mes boutons, le cercle du bouton est en haut à droite par rapport à mon icone...
    Merci d'avance pour ton aide,
    Une blogueuse débutante en html et CSS

    RépondreSupprimer
  95. C'est re-moi ! Bon, finalement en bidouillant j'ai réussi à remettre les boutons centrés sur la page et les icones centrés dans les boutons. Maintenant le problème c'est mon bouton hellocoton qui s'affiche en dessous des autres ><' Un remède miracle ? Merci d'avance :)

    RépondreSupprimer

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger