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

Comprendre et modifier la barre de cookies de Blogger

Vous avez sûrement remarqué cette magnifique bande noire qui s'est installé en haut de votre blog ce weekend. J'allais justement vous écrire un tutoriel pour vous expliquer comment ajouter une barre de cookies :)

Au départ j'allais vous expliquer comment créer votre barre de cookies. Mais maintenant que Blogger à installé la sienne par défaut, cela chamboule un peu les plans. Je vais donc vous expliquer à quoi sert cette jolie barre, et comment la modifier.

C'est parti pour les explications :)

Sommaire

  1. C'est quoi cette barre de cookies ?
    1. Est-ce que je suis obligé d'ajouter une barre de cookies sur mon blog ?
    2. Comment permettre aux lecteurs de s'opposer aux cookies ?
  2. Faire une sauvegarde de votre blog
  3. Modifier la barre de cookie de Blogger
    1. Modifier le texte
    2. Modifier le texte des boutons
    3. Modifier le lien du bouton En savoir plus
    4. Modifier l'apparence de la barre de cookies
    5. Fixer la barre de cookies en bas du blog
    6. Modifier le fond et la bordure de la barre de cookies
    7. Modifier l'apparence du texte de la barre de cookies
    8. Modifier l'apparence des boutons
    9. Modifier l'apparence des boutons au survol de la souris
    10. Modifier l'espace autour du texte

C'est quoi cette barre de cookies ?

Tout d'abord je pense qu'une petite explication sur cette barre s'impose. Pour ceux et celles qui se demandent "C'est quoi ce truc ?", mais aussi pour ceux qui ont déjà entendu parler de barre de cookies mais ne savent pas trop ce que c'est.

Une barre de cookies, ça ressemble à ça :

Comprendre et modifier la barre de cookies de Blogger

A quoi sert-elle ? A informer les lecteurs de votre blog que vous utilisez des cookies. Non, pas ces petits gâteaux aux délicieuses pépites de chocolat (maintenant j'ai faim...), mais de petits fichiers informatiques qui recueillent des informations quand on visite un site web, ouvre un e-mail, ou installe un programme ou application.
En plus d'informer vos lecteurs, cette barre doit demander l'autorisation d'utiliser certains cookies. Elle ne doit pas disparaître tant que la personne n'a pas accepté.

Concrètement, cette barre se présente comme un bandeau avec un texte expliquant que vous utilisez des cookies, suivi d'un bouton "En savoir plus" et d'un bouton "Ok".
Le bouton Ok est plutôt explicite, il permet au lecteur de donner son accord quant à l'utilisation de cookies sur votre blog.
Le bouton "En savoir plus" doit renvoyer vers une page qui présente les solutions pour accepter ou refuser ces cookies. Votre page mentions légales par exemple, comme sur mon blog ;)

Est-ce que je suis obligé d'ajouter une barre de cookies sur mon blog ?

Cela dépend des cookies que vous utilisez. Si vous mesurez l'audience de votre blog avec Google Analytics, et permettez le partage de vos articles sur les réseaux sociaux, alors oui, vous êtes tenus d'être en conformité avec la législation européenne.

Comment permettre aux lecteurs de s'opposer aux cookies ?

Vous pouvez ajouter ces options dans votre page de mentions légales, par exemple, sur laquelle le lecteur est envoyé en cliquant sur "En savoir plus".

Si vous mesurez l'audience de votre blog avec Google Analytics, il suffit d'ajouter un code supplémentaire à votre code Google analytics. Vous le trouverez sur la page dédiée de la CNIL.

Si vous utilisez des boutons de partage de vos articles vers les réseaux sociaux, je vous conseil d'utiliser des boutons qui n'utilisent pas de cookies, comme ceux que j'utilise sur le blog :)
Vous trouverez plusieurs tutos sur le net pour faire ceci, sur xomisse ou sur Bloggercode  par exemple.
Vous pouvez également utiliser la solution proposée par la CNIL : l'intégration de boutons Social Share Privacy.

Pour plus d'informations sur les cookies, vous pouvez aller voir le site de la CNIL et Cookie Choices.
Maintenant que la petite intro est faite, passons à la personnalisation de ce bandeau hideux ;)

Faire une sauvegarde de votre blog

Je ne le répéterai jamais assez, cette étape est très importante au cas où vous feriez une erreur ! Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran :

Comprendre et modifier la barre de cookies de Blogger

Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème.
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 ;)

Modifier la barre de cookie de Blogger

Pour modifier la barre de cookies de Blogger, nous allons rajouter un code dans le thème de notre blog.
Cliquez sur Modèle, puis Modifier le code HTML :

Comprendre et modifier la barre de cookies de Blogger

Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît en haut à droite de la boîte de code (et non en haut de la page web), collez le code suivant :
</head>
Appuyez sur Entrer. Vous serez redirigé vers cette ligne dans votre code.

Juste au-dessus de cette ligne, collez le code suivant :
<!-- Barre de Cookie Blogger -->
<script type="text/javascript">
  cookieOptions = {
    msg: "Ce site utilise des cookies provenant de Google afin de fournir ses services, personnaliser les annonces et analyser le trafic. Les informations relatives à votre utilisation du site sont partagées avec Google. En acceptant ce site, vous acceptez l'utilisation des cookies.",
    link: "https://www.blogger.com/go/blogspot-cookies",
    close: "Ok!",
    learn: "En savoir plus" };
</script>
Comme ceci :

Comprendre et modifier la barre de cookies de Blogger

Modifier le texte

Pour modifier le texte il suffit de remplacer le texte après la ligne commençant par msg dans le code ci-dessus :
msg: "Ce site utilise des cookies provenant de Google afin de fournir ses services, personnaliser les annonces et analyser le trafic. Les informations relatives à votre utilisation du site sont partagées avec Google. En acceptant ce site, vous acceptez l'utilisation des cookies.",
Vous pouvez le remplacer, par exemple, par : "Ce site utilise des cookies pour vous proposer une meilleure expérience utilisateur. En poursuivant sur ce site, vous acceptez l'utilisation de cookies."

Ce qui donne :
msg: "Ce site utilise des cookies pour vous proposer une meilleure expérience utilisateur. En poursuivant sur ce site, vous acceptez l'utilisation de cookies.",

Modifier le texte des boutons

Pour modifier le texte du bouton qui permet d'accepter les cookies, il suffit de remplacer OK de la ligne commençant par close :
close: "Ok!",
Pour modifier le texte du bouton qui permet d'en savoir plus et qui renvoie vers votre page d'informations sur vos cookies, etc., il suffit de remplacer le texte En savoir plus de la ligne suivante :
learn: "En savoir plus" };
Remplacez ces termes par ce que vous voulez ;)
Attention à ne pas supprimer de signe " , } ou ; du code, sinon ça ne marchera pas ;)

Modifier le lien du bouton En savoir plus

Pour modifier le lien du bouton En savoir plus, il suffit de remplacer l'adresse url qui se trouve à la ligne :
link: "https://www.blogger.com/go/blogspot-cookies",
Sur mon blog, par exemple, ce bouton renvoie vers la partie Cookies de mes mentions légales.

Modifier l'apparence de la barre de cookies

Comme d'habitude, pour modifier l'apparence de quelque chose sur votre blog, nous allons utiliser du CSS !
Les codes CSS que nous allons utiliser sont les suivants :
/* Contenant de la barre de cookies */
.cookie-choices-info, #cookieChoiceInfo {
}

/* Barre de cookies */
.cookie-choices-inner, #cookieChoiceInfo div {
}

/* Texte de la barre de cookies */
.cookie-choices-text, #cookieChoiceInfo span {
}

/* Boutons de la barre de cookies */
.cookie-choices-buttons a, #cookieChoiceInfo a {
}

/* Boutons de la barre de cookies au survol de la souris */
.cookie-choices-buttons a:hover, #cookieChoiceInfo a:hover {
}
Ajoutez ces codes juste au-dessus de la ligne suivante :
]]></b:skin>

Fixer la barre de cookies en bas du blog

Tout d'abord, si vous voulez déplacer la barre en bas de votre page, ajoutez les lignes suivantes :
bottom: 0 !important;
top: auto !important;
Au code suivant, avant le signe }:
/* Contenant de la barre de cookies */
.cookie-choices-info, #cookieChoiceInfo {
}
Comme ceci :
/* Contenant de la barre de cookies */
.cookie-choices-info, #cookieChoiceInfo {
    bottom: 0 !important;
    top: auto !important;
}

Modifier le fond et la bordure de la barre de cookies

Vous pouvez changer la couleur de fond de la barre en ajoutant la ligne suivante :
background-color: #c6e5d9 !important;
Au code suivant avant le signe } :
/* Contenant de la barre de cookies */
.cookie-choices-info, #cookieChoiceInfo {
}
Comme ceci :
/* Contenant de la barre de cookies */
.cookie-choices-info, #cookieChoiceInfo {
    background-color: #c6e5d9 !important;   /* Couleur de fond */
}
Remplacez le code couleur #c6e5d9 par le code couleur de votre choix. Attention à ne pas supprimer !important.
Pour trouver le code d'une couleur, vous pouvez utiliser le site code-couleur ;)

Pour ajouter une bordure à votre barre, rajoutez les lignes suivantes :
border-style: solid;   /* Style de la bordure  */
border-width: 3px;   /* Epaisseur de la bordure  */
border-color: #88ccc5;   /* Couleur de la bordure  */
Si vous voulez ajouter une bordure à un seul côté du champ de saisie, ajoutez le code correspondant après border :
-left : pour le côté gauche
-right : pour le côté droit
-top : pour le dessus
-bottom : pour le bas

Par exemple pour ajouter une bordure sous la barre seulement, j'écris :
border-bottom-style: solid;   /* Style de la bordure  */
border-bottom-width: 3px;   /* Epaisseur de la bordure  */
border-bottom-color: #88ccc5;   /* Couleur de la bordure  */
Visuellement on obtient :

Comprendre et modifier la barre de cookies de Blogger

Modifier l'apparence du texte de la barre de cookies

Pour modifier l'apparence du texte, on s'intéresse au code CSS suivant :
/* Texte de la barre de cookies */
.cookie-choices-text, #cookieChoiceInfo span {
}
Vous pouvez modifier la police, la taille de la police, sa couleur, sa graisse et l'espacement des caractères, avec les codes suivants :
font-family: 'PT sans', sans-serif;   /* Police du texte */
font-size: 12px;   /* Taille de la police du texte */
color: #6A9E99;   /* Couleur du texte */
font-weight: normal;   /* Graisse du texte : normal = normal ; bold = gras */
letter-spacing: 1px;   /* Espacement des caractères : normal = normal */
Ce qui donne :
/* Texte de la barre de cookies */
.cookie-choices-text, #cookieChoiceInfo span {
font-family: 'PT sans', sans-serif;   /* Police du texte */
font-size: 12px;   /* Taille de la police du texte */
color: #6A9E99;   /* Couleur du texte */
font-weight: normal;   /* Graisse du texte : normal = normal ; bold = gras */
letter-spacing: 1px;   /* Espacement des caractères : normal = normal */
}
Et visuellement :

Comprendre et modifier la barre de cookies de Blogger

Modifier l'apparence des boutons

Pour modifier l'apparence des boutons, nous allons utiliser le code suivant :
/* Boutons de la barre de cookies */
.cookie-choices-buttons a, #cookieChoiceInfo a {
}
Par défaut, les boutons ont des coins arrondis. Pour supprimer ces bords arrondis, ajoutez la ligne suivante avant le signe } :
border-radius: 0 !important;
Comme ceci :
/* Boutons de la barre de cookies */
.cookie-choices-buttons a, #cookieChoiceInfo a {
border-radius: 0 !important;
}
Pour changer la couleur de fond des boutons ajoutez la ligne suivante :
background-color: #88CCC5 !important;   /* Couleur de fond */
Pour ajouter une bordure, ajoutez les lignes suivantes avant le signe } :
border-style: solid;   /* Style de la bordure  */
border-width: 1px;   /* Epaisseur de la bordure  */
border-color: #88ccc5;   /* Couleur de la bordure  */
De même que pour le fond de la barre vous pouvez choisir d'ajouter la bordure à un seul côté du buuton si vous le souhaitez.

Comme pour le texte, vous pouvez modifier la police, la taille de la police, sa couleur, sa graisse et l'espacement des caractères, avec les codes suivants
font-family: 'PT sans', sans-serif;   /* Police du texte */
font-size: 12px;   /* Taille de la police du texte */
color: #6A9E99;   /* Couleur du texte */
font-weight: normal !important;   /* Graisse du texte : normal = normal ; bold = gras */
letter-spacing: 1px;   /* Espacement des caractères : normal = normal */
Pour supprimer le soulignement du texte, rajoutez la ligne suivante avant le signe } :
text-decoration: none !important;
Visuellement on obtient :

Comprendre et modifier la barre de cookies de Blogger

Modifier l'apparence des boutons au survol de la souris

Pour modifier l'apparence des boutons au survol de la souris, on utilise le code CSS suivant :
/* Boutons de la barre de cookies au survol de la souris */
.cookie-choices-buttons a:hover, #cookieChoiceInfo a:hover {
}
De même que pour les boutons, on peut modifier le fond, la bordure, la police, etc. N'ajoutez que les codes pour les éléments que vous voulez modifier.

Par exemple, si je souhaites que le fond du bouton et la police changent de couleur au survol, j'ajoutes simplement le code qui définit la couleur de fond et celle de la police :
background-color: #c6e5d9;   /* Couleur de fond */
color: #88ccc5;   / * Couleur de la police */
Comme ceci :
/* Boutons de la barre de cookies au survol de la souris */
.cookie-choices-buttons a:hover, #cookieChoiceInfo a:hover {
background-color: #ffffff !important;   /* Couleur de fond */
color: #88ccc5;   / * Couleur de la police */
}
Visuellement on obtient :

Comprendre et modifier la barre de cookies de Blogger

Modifier l'espace autour du texte

Pour modifier l'espace autour du texte, rajoutez les code suivants :
padding-top: 16px !important;   /* Espace au-dessus du texte */
padding-bottom: 16px !important;   /* Espace en-dessous du texte */
Au code suivant avant le signe } :
/* Barre de cookies */
.cookie-choices-inner, #cookieChoiceInfo div {
}
Comme ceci :
/* Barre de cookies */
.cookie-choices-inner, #cookieChoiceInfo div {
margin-top: 11px !important;   /* Espace au-dessus du texte */
margin-bottom: 11px !important;   /* Espace en-dessous du texte */
}
Modifiez la valeur en pixels comme bon vous semble ;)

Et voilà ! Vous comprenez maintenant pourquoi il y a cette barre sur votre blog, et pourquoi elle est importante. Vous savez aussi comment la personnaliser pour qu'elle s'accorde à votre design !

Bon blogging ;)

Autres articles

254 commentaires:

  1. C'est super pratique comme tutoriel ça ! Justement j'en avais besoin ahah, donc merci ;)

    RépondreSupprimer
  2. Coucou Catherine ! Merci pour ce tutoriel ! Du coup j'ai un petit souci, impossible de fixer la barre en bas ni de prendre en compte les modif'. Je me sers du code que tu m'a filé il y a 2 jours pour prendre en compte la mise en forme mais du coup ça ne prends pas en compte les boutons, le survol, la couleur du texte. Peux-tu me dire ce qui cloche?
    Je laisse la barre de cookie comme telle pour que tu vois tout ça.
    Merci ;)

    RépondreSupprimer
    Réponses
    1. Vérifies qu'il n'y a pas d'erreurs dans le code au-dessus du code CSS pour la barre de cookies, et dans le code CSS de ta barre de cookies : un signe en trop ou manquant est souvent la cause de ces problèmes. Vérifies les signes suivants : ; { et }
      S'il en manque un ou qu'il y en a en trop, rectifies ;)

      Supprimer
    2. J'ai tenté de regarder comme tu me l'a dis mais je t'avoue que je suis un peu perdue. Je ne pense pas que le code css avant ma barre de cookies soit erronée, ni que le code css de ma barre ai un signe en trop ( ou en moins ). Comme je te l'ai écrit je n'utilise pas le code :
      /* Contenant de la barre de cookies */
      .cookie-choices-info {
      }

      mais celui-ci :
      #cookieChoiceInfo {
      }

      Merci :)

      Supprimer
    3. Peux-tu me rappeler l'adresse de ton blog pour que je puisse voir ça ?

      Supprimer
    4. http://leblocnotesdecarmen.blogspot.fr/
      Bon et bien 8h plus tard certaines modif' ont été prises en compte et d'autres non. C'est vraiment bizarre cette histoire de barre de cookies !
      La il me manque le changement au niveau des boutons, ainsi qu'au survol de la souris.
      Merci !

      Supprimer
    5. Bonjour, le problème vient des codes au-dessus du premier code pour modifier l'apparence de cette barre. Voici ce que tu as :

      .Image h2 { display: none; }
      #header-inner img
      {
      margin:auto;
      }
      background: none;
      list-style: none;
      list-style-image: none;
      list-style-position: outside;
      border-width: 0;
      text-align: center;
      background-image: none;
      margin-bottom: 20px;
      }
      #header-inner img
      {
      margin:auto;
      }
      /* Contenant de la barre de cookies */

      Remplace :

      #header-inner img
      {
      margin:auto;
      }
      background: none;
      list-style: none;
      list-style-image: none;
      list-style-position: outside;
      border-width: 0;
      text-align: center;
      background-image: none;
      margin-bottom: 20px;
      }
      #header-inner img
      {
      margin:auto;
      }

      Par :

      #header-inner img {
      margin:auto;
      }

      Supprimer
    6. Coucou Catherine !
      Merci de ton aide mais je suis raiment hors sujet sur ce coup-là. J'ai fait comme tu me l'a indiqué et ça a chambouler le blog : la bannière n'est plus centrée et la barre de cookie est en haut sans aucune modification prise en compte. Bref je suis paumée :(

      Supprimer
    7. Il manque un signe } juste avant la ligne :

      /* apparence titre des widgets */

      Supprimer
    8. Merci !!!
      ( -_- ) ------> smiley de cruche qui ne regarde pas assez ses lignes de codes !!
      Vraiment adorable de passer autant de tant à nous répondre et à nous corriger !
      Bisous Catherine !

      Supprimer
  3. Coucou,

    J'étais bien contente de tomber sur ton article que j'ai vu passer sur les réseaux sociaux. J'avais justement suivis un tuto pour ajouter la barre avant qu'elle ne soit mise par Google et je rencontre un petit problème maintenant, impossible de trouver la moindre trace de cette nouvelle barre dans mon code HTML :( je ne sais comprends pas pourquoi pourtant j'ai bien chercher... Je ne sais pas si tu pourras m'aider.

    RépondreSupprimer
    Réponses
    1. Bonjour Manue,
      En regardant le code source sur ton blog je vois bien le code de cette barre de cookies.
      Le code de la barre de cookies de Blogger est :

      <!-- 'Il est de votre responsabilité d\47informer vos visiteurs à propos des cookies utilisés sur votre blog. Rendez-vous sur http://www.blogger.com/go/cookiechoices pour en savoir plus.' -->
      <script src="/js/cookiechoices.js" defer></script>
      <script>
      document.addEventListenerundefined'DOMContentLoaded', functionundefinedevent) {
      window.cookieChoices && cookieChoices.showCookieConsentBar && cookieChoices.showCookieConsentBarundefined
      undefinedwindow.cookieOptions && cookieOptions.msg) || 'Ce site utilise des cookies provenant de Google afin de fournir ses services, personnaliser les annonces et analyser le trafic. Les informations relatives à votre utilisation du site sont partagées avec Google. En acceptant ce site, vous acceptez l\47utilisation des cookies.',
      undefinedwindow.cookieOptions && cookieOptions.close) || 'OK !',
      undefinedwindow.cookieOptions && cookieOptions.learn) || 'En savoir plus',
      undefinedwindow.cookieOptions && cookieOptions.link) || 'https://www.blogger.com/go/blogspot-cookies');
      });
      </script>

      Supprimer
  4. Bonsoir,
    Merci pour ce tutoriel.
    Par contre ça ne fonctionne pas sur mon blog, j'ai relu ton tuto 3 fois, pour vérifier si je n'avais pas fait d'erreur et la barre de cookies s'affiche comme si je n'avais mis aucun code html, il y a celle par défaut.
    Merci d'avance pour ton aide.
    Bises

    RépondreSupprimer
    Réponses
    1. Bizarrement, le nom de ta barre de cookies n'est pas la même :/
      Utilise les codes CSS suivants :

      /* Contenant de la barre de cookies */
      #cookieChoiceInfo {
      }

      /* Barre de cookies */
      #cookieChoiceInfo div {
      }

      /* Texte de la barre de cookies */
      #cookieChoiceInfo span {
      }

      /* Boutons de la barre de cookies */
      #cookieChoiceInfo a {
      }

      /* Boutons de la barre de cookies au survol de la souris */
      #cookieChoiceInfo a:hover {
      }

      Supprimer
    2. Bonjour,
      Merci beaucoup ça fonctionne à présent, à part les boutons de la barre de cookie qui reste noir malgré le fait que j'ai mis le code couleur avec !important.
      Merci d'avance pour la réponse :D
      Bises et bon début de semaine.

      Supprimer
    3. Il manque un signe ; après !important c'est pour ça que la couleur de fond n'est pas prise en compte ;)

      Supprimer
    4. Merci pour ta patience, c'est parfait ma barre de cookies est opérationnel.Merci beaucoup :D

      Supprimer
  5. Merci pour ton super tuto comme toujours très bien expliquer ,

    J'ai un soucis pour les boutons il reste rond en noir

    J'ai peut être oublier ou mal fait quelque chose ?


    /* Contenant de la barre de cookies */
    .cookie-choices-info {
    bottom: 0;
    top: initial !important;
    background-color: #e6dfeb !important;
    }

    /* Barre de cookies */
    .cookie-choices-inner {
    }

    /* Texte de la barre de cookies */
    .cookie-choices-text {
    }

    /* Boutons de la barre de cookies */
    .cookie-choices-buttons a {
    }

    /* 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: #cfbfd9; /* Couleur de la bordure *
    }

    /* Texte de la barre de cookies */
    .cookie-choices-text {
    font-family: 'Princess+Sofia; /* Police du texte */
    font-size: 12px; /* Taille de la police du texte */
    color: #ffffff; /* Couleur du texte */
    font-weight: normal; /* Graisse du texte : normal = normal ; bold = gras */
    letter-spacing: 1px; /* Espacement des caractères : normal = normal */
    }

    /* Boutons de la barre de cookies */
    .cookie-choices-buttons a {
    border-radius: 0 !important;
    background-color: #cfbfd9 !important /* Couleur de fond */
    border-style: solid; /* Style de la bordure */
    border-width: 1px; /* Epaisseur de la bordure */
    border-color: #88ccc5; /* Couleur de la bordure */
    }

    font-family: 'Princess+Sofia; /* Police du texte */
    font-size: 12px; /* Taille de la police du texte */
    color: #6A9E99; /* Couleur du texte */
    font-weight: normal !important; /* Graisse du texte : normal = normal ; bold = gras */
    letter-spacing: 1px; /* Espacement des caractères : normal = normal */
    }
    text-decoration: none !important;
    }

    /* Boutons de la barre de cookies au survol de la souris */
    .cookie-choices-buttons a:hover {
    background-color: #ffffff !important; /* Couleur de fond */
    color: #88e2fb; / * Couleur de la police */
    }

    /* Barre de cookies */
    .cookie-choices-inner {
    padding-top: 11px !important; /* Espace au-dessus du texte */
    padding-bottom: 11px !important; /* Espace en-dessous du texte */
    }

    RépondreSupprimer
    Réponses
    1. Il y a quelques erreurs dans ton code. Tout d'abord certains codes sont vides :

      /* Barre de cookies */
      .cookie-choices-inner {
      }

      /* Texte de la barre de cookies */
      .cookie-choices-text {
      }

      /* Boutons de la barre de cookies */
      .cookie-choices-buttons a {
      }

      Supprime-les.

      Ensuite le code de tes boutons est coupé en 3 parties. Du coup le navigateur ne peut pas lire ce code ni celui qui le suit :

      /* Boutons de la barre de cookies */
      .cookie-choices-buttons a {
      border-radius: 0 !important;
      background-color: #cfbfd9 !important /* Couleur de fond */
      border-style: solid; /* Style de la bordure */
      border-width: 1px; /* Epaisseur de la bordure */
      border-color: #88ccc5; /* Couleur de la bordure */
      }

      font-family: 'Princess+Sofia; /* Police du texte */
      font-size: 12px; /* Taille de la police du texte */
      color: #6A9E99; /* Couleur du texte */
      font-weight: normal !important; /* Graisse du texte : normal = normal ; bold = gras */
      letter-spacing: 1px; /* Espacement des caractères : normal = normal */
      }
      text-decoration: none !important;
      }

      Supprime les signes } en trop comme ceci :

      /* Boutons de la barre de cookies */
      .cookie-choices-buttons a {
      border-radius: 0 !important;
      background-color: #cfbfd9 !important /* Couleur de fond */
      border-style: solid; /* Style de la bordure */
      border-width: 1px; /* Epaisseur de la bordure */
      border-color: #88ccc5; /* Couleur de la bordure */
      font-family: 'Princess+Sofia; /* Police du texte */
      font-size: 12px; /* Taille de la police du texte */
      color: #6A9E99; /* Couleur du texte */
      font-weight: normal !important; /* Graisse du texte : normal = normal ; bold = gras */
      letter-spacing: 1px; /* Espacement des caractères : normal = normal */
      text-decoration: none !important;
      }

      Supprimer
    2. Merci Catherine , se matin en allant sur le blog pour voir la modification , la barre est redevenu comme au début noir moche en changeant les codes comme tu m'a indiquer rien y fait , les codes couleurs sont toujours la pourtant ,je ne comprend pas pourquoi du coup :/

      Supprimer
    3. Suite de mon commentaire , la barre je les fixé en bas mais elle se retrouve en haut .. Je ne comprend pas pourquoi .. :/

      Supprimer
    4. Le nom de ta barre de cookie à changé :/ Je me demande si Blogger à fait cela ces derniers jours... Bref, remplace les codes CSS de ta barre par ceux-ci :

      /* Texte de la barre de cookies */
      #cookieChoiceInfo span {
      font-family: 'Princess+Sofia; /* Police du texte */
      font-size: 12px; /* Taille de la police du texte */
      color: #ffffff; /* Couleur du texte */
      font-weight: normal; /* Graisse du texte : normal = normal ; bold = gras */
      letter-spacing: 1px; /* Espacement des caractères : normal = normal */
      }

      /* Boutons de la barre de cookies */
      #cookieChoiceInfo a {
      border-radius: 0 !important;
      background-color: #cfbfd9 !important /* Couleur de fond */
      border-style: solid; /* Style de la bordure */
      border-width: 1px; /* Epaisseur de la bordure */
      border-color: #88ccc5; /* Couleur de la bordure */
      font-family: 'Princess+Sofia; /* Police du texte */
      font-size: 12px; /* Taille de la police du texte */
      color: #6A9E99; /* Couleur du texte */
      font-weight: normal !important; /* Graisse du texte : normal = normal ; bold = gras */
      letter-spacing: 1px; /* Espacement des caractères : normal = normal */
      text-decoration: none !important;
      }

      /* Boutons de la barre de cookies au survol de la souris */
      #cookieChoiceInfo a:hover {
      background-color: #ffffff !important; /* Couleur de fond */
      color: #88e2fb; / * Couleur de la police */
      }

      /* Barre de cookies */
      #cookieChoiceInfo {
      padding-top: 11px !important; /* Espace au-dessus du texte */
      padding-bottom: 11px !important; /* Espace en-dessous du texte */
      }

      Supprimer
    5. Oui sa à du changer tout était parfait avant juste les boutons je n'avais pas réussi , j'ai mit les code que tu ma fourni rien ne change :(

      Supprimer
    6. Je suis allée voir ton blog, et la barre se place correctement en bas de la page ;)

      Supprimer
    7. Oui il c'est remit automatiquement j'ai pas tout compris le petit soucis c'est qu'on voit pas ce qu'il y à d'écrit et en changeant le code couleur sa ne marche pas non plus :/

      Supprimer
    8. Certains de tes codes actuels sont ceux d'avant, et non ceux que je t'ai renseigné.

      Remplace le code suivant :

      /* Texte de la barre de cookies */
      .cookie-choices-text {
      font-family: 'Princess+Sofia; /* Police du texte */
      font-size: 16px; /* Taille de la police du texte */
      color: #88e2fb; /* Couleur du texte */
      font-weight: normal; /* Graisse du texte : normal = normal ; bold = gras */
      letter-spacing: 1px; /* Espacement des caractères : normal = normal */
      }

      Par :

      /* Texte de la barre de cookies */
      #cookieChoiceInfo span { {
      font-family: 'Princess+Sofia; /* Police du texte */
      font-size: 16px; /* Taille de la police du texte */
      color: #88e2fb; /* Couleur du texte */
      font-weight: normal; /* Graisse du texte : normal = normal ; bold = gras */
      letter-spacing: 1px; /* Espacement des caractères : normal = normal */
      }

      Et supprime :

      /* 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: #ffffff; /* Couleur de la bordure *
      }

      Supprimer
    9. Sa ne change rien pas grave :/

      Supprimer
  6. Super, incroyable, fantastique. En bref, je te remercie pour ce tuto génial :)

    RépondreSupprimer
  7. Merci beaucoup d'avoir pensé à nous pour modifier cette horrible barre qui s'est affichée il y a quelques jours sur nos blogs ;-) Grâce à ton tuto j'ai pu modifier le texte et le raccourcir, c'est déjà ça. Par contre je ne comprends pas, j'ai suivi chaque étape et pourtant la barre de cookies ne se modifie pas... :-( J'ai tenté sur un autre blog où ça a fonctionné, mais sur mon blog principal (http://mon-jolicoeur.blogspot.fr) elle reste noire et rien ne change... Aurais-tu une idée d'où le blocage pourrait venir ou de ce que je dois modifier pour qu'elle apparaisse en couleurs (ce qui serait tout de même beaucoup plus joli avec mon design). Merci d'avance ! :-)

    Encore merci pour tous tes tutoriels qui nous permettent d'avoir de jolis blogs !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Plusieurs personnes ont ce problème, le nom de la barre de cookies est différente sur certains blogs. Utilise les codes CSS suivants :

      Bizarrement, le nom de ta barre de cookies n'est pas la même :/
      Utilise les codes CSS suivants :

      /* Contenant de la barre de cookies */
      #cookieChoiceInfo {
      }

      /* Barre de cookies */
      #cookieChoiceInfo div {
      }

      /* Texte de la barre de cookies */
      #cookieChoiceInfo span {
      }

      /* Boutons de la barre de cookies */
      #cookieChoiceInfo a {
      }

      /* Boutons de la barre de cookies au survol de la souris */
      #cookieChoiceInfo a:hover {
      }

      Et voilà ;)

      Supprimer
    2. Bonjour,
      Un grand MERCI pour ton aide ! Grâce à tes instructions j'ai réussi à changer la couleur de la barre des cookies. Par contre je ne sais pas pourquoi les boutons "En savoir plus" et "Ok" restent noirs (même en modifiant le code couleur...) Enfin, c'est déjà beaucoup plus joli qu'avant :-) Merci beaucoup !!! Ton blog est super ! Bonne journée

      Supprimer
  8. Merci :) Cela m'a bien aidé ! Je savais comment changer le texte avec ce que donné blogger quand ils nous ont informé de la mise en place automatique de la barre cookies, mais après pour la personnalisation des couleurs et tout, ça j'arrivais pas à trouver comment faire par moi-même ^^

    RépondreSupprimer
  9. Merci beaucoup pour cet article qui sauve un peu l'esthétique de mon blog... Un peu car j'ai envie de changer le design en ce moment.
    Bises

    RépondreSupprimer
  10. Super article ! Je cherchais justement un tutoriel comme celui là !

    RépondreSupprimer
  11. Bonjour!

    Merci énormément pour cette astuce qui nous rend vraiment service!
    Je me permets juste de vous dire que il manque un point virgule sur la ligne de code concernant la section pour changer la couleur de fond des boutons (juste après le "important"

    Pour celles qui copient juste le code sans comprendre les règles de CSS, il n'y aura pas de modifications et elles vont se dire Zut! ça ne marche pas!

    En tout cas un grand merci!

    RépondreSupprimer
    Réponses
    1. Merci ! Je suis allée un peu vite en écrivant l'article ^^
      C'est rectifié ;)

      Supprimer
    2. Ah ben voilà pourquoi ça ne marchait pas ! :D
      J'ai rajouté le point virgule et mes boutons ont changé de couleur. MERCI !!!

      Supprimer
  12. Bonjour, je ne suis pas sûr que mon commentaire a été envoyer donc désolé si tu le reçois deux fois. J'ai fais ce tutoriel au mois trois j'ai recommencer et tout sauf que ça ne fonctionne pas la barre de cookies me prend tout l'écran et impossible de la fermer. Du coup on ne peut pas naviguer sur mon blog. J'espère que tu va pouvoir m'aider et bonne journée :)

    RépondreSupprimer
    Réponses
    1. Bonjour Laura,
      Il me semble que tu as réglé le problème ? Cela fonctionne correctement de mon ordinateur ;)

      Supprimer
  13. Merci beaucoup pour le tuto que j'ai suivi méticuleusement :)
    Est ce que je peux te demander comment as tu fait pour inverser l'ordre du "OK" et du "En Savoir Plus" afin de mettre OK juste à la suite du texte ?
    Merci d'avance et bon dimanche :)

    RépondreSupprimer
    Réponses
    1. Bonjour Chloé,
      Si tu parles de la barre de cookies de mon blog, alors c'est parce que ce n'est pas la barre de Blogger ;)
      Je vais d'ailleurs la remplacer par celle de Blogger quand j'aurais le temps ^^

      Supprimer
    2. Ah daccodac ! Si tu trouves une astuce pour intervertir les boutons avec la barre de Blogger alors je suis preneuse :) Merci pour ta réponse !

      Supprimer
  14. Bonsoir, merci pour ce superbe tutoriel ! Quand j'ai vu cela sur mon blog ce weekend, ça m'a fait mal...
    Sinon, petite question pour être sûre que j'ai bien compris : si l'on n'utilise pas Google Analytics et que l'on passe par des boutons Social Share Privacy, est-on toujours tenu d'avoir cette barre sur le blog ? Merci d'avance pour ta réponse et pour tout ce que tu mets à notre disposition sur ton blog.

    RépondreSupprimer
    Réponses
    1. Bonjour Ouatita,
      Même si tu utilises des boutons Social Share Privacy tu es obligé de faire apparaître cette barre. Les boutons Social Share Privacy permettent seulement de désactiver les cookies par défaut, mais le lecteurs peut les activer s'il veut partager ton article. Ton blog utilisera donc des cookies au final ;)
      De toute façon, une fois que le lecteur à cliqué sur Ok pour accepter, la barre disparaît.

      Supprimer
    2. Merci énormément pour cet éclaircissement !

      Supprimer
  15. Merci beaucoup pour ce tutoriel !
    Le seul truc c'est que la barre des cookies n'apparaît plus sur mon blog alors je ne peux pas juger de l'effet obtenu…

    RépondreSupprimer
    Réponses
    1. Pas de soucis, rajoute le code suivant dans ton code CSS pour voir la barre :

      #cookieChoiceInfo, .cookie-choices-info {
      display: initial !important;
      }

      Par contre, n'oublie pas de supprimer ce code une fois tes modifications faites ! Sinon il sera toujours visible même en acceptant (en cliquant sur Ok).

      Supprimer
    2. Bonjour Catherine et merci beaucoup pour ta réponse :)

      Malheureusement, je pense que j'ai dû louper une étape parce que je ne parviens toujours pas à visualiser la barre des cookies. Pourrais-tu, s'il te plaît, jeter un coup d'œil si tu as un peu de temps ?
      Mon blog : www.mampolette.com

      Merci beaucoup et bonne journée ☼

      Supprimer
    3. Sinon tu peux effacer tes cookies dans ton navigateur pour pouvoir voir à nouveau ta barre de cookies. La CNIL explique comment faire ici : http://www.cnil.fr/vos-droits/vos-traces/les-cookies/conseils-aux-internautes/

      Supprimer
    4. Bonsoir Catherine,
      Finalement, je suis allée voir ma barre de cookies sur un autre ordi et j'ai pu voir enfin le résultat qui est très bien, grâce à toi :)
      Merci beaucoup pour tous tes conseils précieux et justes.

      Supprimer
  16. Bonjour Catherine !

    Merci beaucoup pour ce tuto, j'ai une petite question.
    J'avais personnellement déjà installée une barre qui me convient, maintenant avec celle qui a été rajouté, j'en ai deux.
    Je voudrais supprimé celle qui a été rajoutée puisqu'elle est moins esthétique que celle que j'ai de base sur mon blog, est-ce que je peux le faire ?

    Merci beaucoup,
    Bonne journée
    Lucie

    RépondreSupprimer
    Réponses
    1. Bonjour Lucie,
      Si tu as déjà une barre de cookies, alors ajoute le code CSS suivant à ton thème pour cacher celle de Blogger :

      #cookieChoiceInfo, .cookie-choices-info {
      display: none !important;
      }

      Et voilà ;)

      Supprimer
  17. Bonjour Catherine !

    Merci infiniment pour ce tuto ;) Par contre malheureusement ça ne fonctionne plus sur mon blog, je ne vois pas de trace de cette barre de cookies ... :(
    Ah et aussi j'avais une petite question en rapport avec les miniatures d'article mais je ne peux pas commenter sur ce post ;) Donc voilà , j'ai installé mes articles en forme de miniature, ça marche nickel... Cependant quand je consulte mes archives, les articles ne s'affichent pas en miniature ... :( Je dois rajouter quelque chose dans le HTML ?

    Merci d'avance, bonne journée!

    RépondreSupprimer
    Réponses
    1. Quand je vais sur ton blog la barre de cookies s'affiche bien :)
      Si tu as déjà cliqué sur Ok alors c'est normal que tu ne la vois plus. Ajoute le code suivant à ton thème avant la ligne :

      /* Content

      #cookieChoiceInfo {
      display: initial !important;
      }

      Une fois que tu as fini tes modifications pense bien à supprimer le code ci-dessus, sinon elle ne disparaîtra jamais quand le lecteur clique sur Ok ;)

      Supprimer
    2. Pour l'article des miniatures, j'ai créé un nouvel article pour les commentaires : http://ladybirdr.blogspot.com/2015/01/commentaires-afficher-les-articles-en.html

      Supprimer
  18. Merci beaucoup, à quel endroit dois-je l'ajouter ?

    Bonne journée ! :)

    RépondreSupprimer
    Réponses
    1. Vas dans Modèle > Modifier le code HTML. Clique n'importe où dans la boîte de code et appuie sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît en haut à droite de la boîte de code (et non de la page), colle :

      /* Content

      Appuie sur entrer

      Au-dessus de cette ligne colle le code que je t'ai donné comme ceci :

      #cookieChoiceInfo, .cookie-choices-info {
      display: none !important;
      }

      /* Content

      Et voilà

      Supprimer
  19. Bonjour Catherine,
    Tout d'abord je tenais à vous remercier pour votre travail.
    J'ai eu un problème pour mettre la barre de cookies en bas de page. D'abord avec le navigateur Internet Explorer qui m'étalait la barre de cookies sur toute la surface de mon site et sur ma version mobile du site. J'ai beau tout essayer de façon propre mais rien n'y fait. Du coup, j'ai un peu bidouillé!
    Je vous fais part de ce que j'ai fait pour ceux qui ont un problème:

    .cookie-choices-info, #cookieChoiceInfo {
    top: 87% ;
    top: initial !important;
    bottom: 30px !important;
    }

    Et voici ce que cela donne sur mon site: 1astuceduweb.blogspot.fr

    Merci encore!

    Kim

    RépondreSupprimer
  20. Bonjour! J’espérais de tout cœur que tu nous fasse ce tuto!!! j'avais déjà une barre installé et maintenant j'ai cet horrible truc en plus... J'ai essayé de la modifier avec ton tuto mais malheureusement je n'y arrive pas...
    Peux tu m'aider? Et est il possible de supprimer celle de blogger pour ne garder que celle que j’avais déjà ?
    Merci pour ton aide!

    RépondreSupprimer
    Réponses
    1. Bonjour Camille,
      Plusieurs personnes ont ce problème, le nom de la barre de cookies est différente sur certains blogs. Utilise les codes CSS suivants :

      /* Contenant de la barre de cookies */
      #cookieChoiceInfo {
      }

      /* Barre de cookies */
      #cookieChoiceInfo div {
      }

      /* Texte de la barre de cookies */
      #cookieChoiceInfo span {
      }

      /* Boutons de la barre de cookies */
      #cookieChoiceInfo a {
      }

      /* Boutons de la barre de cookies au survol de la souris */
      #cookieChoiceInfo a:hover {
      }

      Si tu as déjà une barre de cookies et que tu souhaites supprimer celle de Blogger, alors cherche le code suivant :

      </head>

      Juste au-dessus de cette ligne colle :

      <script type="text/javascript">
      cookieChoices = {}
      </script>

      Et voilà ;)

      Supprimer
  21. Merci pour ce tuto! Il m'a bien rendu service^^

    RépondreSupprimer
  22. Coucou Catherine !
    Encore merci pour ce tuto, qui a l'air bien utile. Ceci dit, j'ai un souci. Le code source de mon blog comporte bien une partie relative à cette fichue barre blogger mais quand je vais dans modèle en vue de le supprimer/modifier, ça n'apparaît plus. Du coup je suis embêtée, parce que j'ai créé un code selon ton tutoriel, mais rien n'a changé. J'ai essayé les deux codes différents que tu proposes, mais ça ne marche pas.

    En espérant que tu auras le temps de jeter un oeil,
    Bonne soirée ! xx

    RépondreSupprimer
    Réponses
    1. De mon côté je vois bien le suivant dans le code source de ton blog :

      <script>
      document.addEventListenerundefined'DOMContentLoaded', functionundefinedevent) {
      window.cookieChoices && cookieChoices.showCookieConsentBar && cookieChoices.showCookieConsentBarundefined
      undefinedwindow.cookieOptions && cookieOptions.msg) || 'Ce site utilise des cookies provenant de Google afin de fournir ses services, personnaliser les annonces et analyser le trafic. Les informations relatives à votre utilisation du site sont partagées avec Google. En acceptant ce site, vous acceptez l\47utilisation des cookies.',
      undefinedwindow.cookieOptions && cookieOptions.close) || 'OK !',
      undefinedwindow.cookieOptions && cookieOptions.learn) || 'En savoir plus',
      undefinedwindow.cookieOptions && cookieOptions.link) || 'https://www.blogger.com/go/blogspot-cookies');
      });
      </script>

      Mais ce n'est pas le même code.
      Pour modifier les paramètres de la barre il faut rajouter le code Javascript donné dans le tutoriel.

      Je ne vois pas non plus les codes CSS pour modifier l'apparence de la barre :/

      Supprimer
    2. Coucou :)

      Merci d'avoir répondu si vite. Le problème de la barre, c'est que quand on regarde le code source avec CTRL + U, on voit bien ce morceau de script apparaître. Une fois dans le Modèle, impossible de le trouver ! Mais j'ai trouvé comment régler le problème, j'ai installé une autre barre de cookies pour ensuite "cacher" celle de blogger.

      Encore merci ♥♥

      Supprimer
  23. Finalement j'ai pu modifier le texte mais alors pour les couleurs rien ne marche de mon côté aussi bien avec le premier code qu'avec le second en changeant le nom de la barre ...

    RépondreSupprimer
    Réponses
    1. Il y a une petite erreur dans ton code CSS, tu as supprimé un signe } en collant le code :

      #header {
      text-align: center; font-size: 110%;
      /* Contenant de la barre de cookies */
      .cookie-choices-info {
      bottom: 0;
      top: initial;
      background-color: #c6e5d9 !important;
      border-style: solid; /* Style de la bordure */
      border-width: 3px; /* Epaisseur de la bordure */
      border-color: #88ccc5; /* Couleur de la bordure */
      }

      Rajoute un signe } avant /* Contenant de la barre de cookies */ comme ceci :

      #header {
      text-align: center; font-size: 110%;
      }
      /* Contenant de la barre de cookies */
      .cookie-choices-info {
      bottom: 0;
      top: initial;
      background-color: #c6e5d9 !important;
      border-style: solid; /* Style de la bordure */
      border-width: 3px; /* Epaisseur de la bordure */
      border-color: #88ccc5; /* Couleur de la bordure */
      }

      Et voilà ;)

      Supprimer
    2. D'acc, je vais regarder ça. Merci !

      Supprimer
  24. Bonjour Catherine,
    J'avais déjà installé une barre de cookies avant que celle par défaut de Blogger ne s'y ajoute, j'aimerais savoir comment supprimer celle de Blogger pour ne garder que la mienne car je pense que les lecteurs voient les deux

    RépondreSupprimer
    Réponses
    1. Si tu as déjà une barre de cookies et que tu souhaites supprimer celle de Blogger, alors cherche le code suivant :

      </head>

      Juste au-dessus de cette ligne colle :

      <script type="text/javascript">
      cookieChoices = {}
      </script>

      Supprimer
    2. Merci beaucoup ! D'excellents conseils encore une fois !

      Supprimer
  25. Bonjour Lady,

    Merci beaucoup pour votre tutoriel.

    Peut-être pourrez-vous m'aider, j'ai beau chercher je ne trouve pas solution au problème suivant.
    L'avertissement apparait deux fois sur le blog de notre comité, une première sur la page d’accueil (page statique), ensuite à nouveau sur la page blog.
    Il s'agit d'un blog avec domaine tiers (.be) et qui utilise les redirections personnalisées pour rendre la age d’accueil statique possible. Je suppose que le problème vient de là mais ne trouve pas comment y remédier.
    Si vous avez une idée ou une piste, elle sera la bienvenue.

    Encore et d'avance merci,
    Bien à vous.

    ps:
    pour info: j'ai cliqué sur la fonction "aperçu" de l'interface commentaire et ce dernier à disparu...

    RépondreSupprimer
  26. Merci beaucoup pour ton article qui m'a bien aidée à rendre cette barre moins moche :D

    RépondreSupprimer
  27. Coucou ! Je ne comprend pas comment la modifier, je n'ai pas ]]> dans mon truc :/

    RépondreSupprimer
    Réponses
    1. Bonjour Elodie,
      As-tu trouvé le code ? Car ta barre me semble modifié ;)

      Supprimer
    2. Coucou ! Oui j'ai finalement réussi par trouver :p Merci :)

      Supprimer
  28. Bonjour Catherine ! Un grand merci pour ce tuto, j'ai appliqué le code il y a 1 semaine sur mon blog maintenant. Et ce matin, je me suis aperçue que l'apparence de ma barre de cookies avait changé ? Impossible de prendre en compte mes changements qui marchaient pourtant très bien auparavant ? Pk ça ? :( Le lien de mon blog : www.mylicousecrets.fr Merci !!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je ne vois pas de problème dans ton code, est-ce que c'est rentré dans l'ordre ?

      Supprimer
  29. Bonjour,
    et merci pour ce tuto.
    J'ai juste un problème avec le code "]]>", je ne sais pas où le mettre. A chaque fois que je le place, blogger me met un code erreur.
    Quelqu'un pour m'aider ?

    D'avance, merci

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il ne faut pas rajouter le code ]]></b:skin>, il faut seulement le chercher de la même manière que tu as cherché </head>, comme expliqué au début du tutoriel. Une fois que tu l'as trouvé il faut coller le code CSS pour modifier l'apparence de la barre ;)

      Supprimer
  30. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Cherche le code suivant :

      <style id='template-skin-1' type='text/css'>

      Tu devrais trouver ceci :

      .post { margin-bottom: 15px; }
      </style>
      </b:if>
      </b:if>
      --></style>
      <style id='template-skin-1' type='text/css'>

      Supprime les lignes suivantes :

      </b:if>
      </b:if>
      --></style>

      Pour obtenir :

      .post { margin-bottom: 15px; }
      </style>
      <style id='template-skin-1' type='text/css'>

      Sauvegarde.
      De mon côté je vois bien ta barre de cookies. Si tu ne la vois pas, tu peux supprimer les cookies de ton navigateur, la CNIL explique comment faire ici : http://www.cnil.fr/vos-droits/vos-traces/les-cookies/conseils-aux-internautes/
      Recharge ensuite ta page.

      Supprimer
    2. Ce commentaire a été supprimé par l'auteur.

      Supprimer
    3. Bonjour,
      C'est la barre par défaut de Blogger que je vois. Et je ne vois pas ton code pour supprimer la barre. Il faut ajouter le code suivant :

      <script type="text/javascript">
      cookieChoices = {}
      </script>

      Juste au-dessus de cette ligne :

      </head>

      Par contre je te déconseille fortement de supprimer toutes les barres de ton blog pour éviter d'éventuelles sanctions. Si Blogger à ajouté cette barre c'est pour te mettre en règle au vue de la loi européenne.

      Supprimer
    4. Ce commentaire a été supprimé par l'auteur.

      Supprimer
    5. Pas de soucis ;)
      Pour la petite flèche, je ne sais pas quoi te dire. Je la vois bien dans le code de ton blog. Il faut chercher autour des codes que je t'ai donné dans un commentaire précédent. Malheureusement je ne peux pas être plus précise :/

      Supprimer
  31. OH MON DIEU MERCI !! ♥
    Ton tutoriel tombait bien, je m'arrachais les cheveux avec cette maudite barre !
    J'ai essayé de la modifier et puis j'ai vu dans tes solutions qu'on pouvait aussi la cacher (comme Lucie j'en avais déjà une) et voilà problème résolu, merci beaucoup à toi ! Tu sauves le blog de pas mal de monde je pense :D

    RépondreSupprimer
  32. Merci beaucoup, je vais mettre cette fameuse barre en bas du blog, car ce n'est pas joli joli ;) ;)

    Bisous
    .
    .
    www.taimemode-fashionblog.com

    RépondreSupprimer
  33. (re) hello !

    J'ai un souci avec ma barre de cookies. Elle s'affiche sur deux lignes (je trouve ca trop inmposant). Comment faire pour qu'elle s'affiche sur une seule ligne comme sur votre blog ?

    merci !

    RépondreSupprimer
    Réponses
    1. Bonjour Paulette,

      Tu peux agrandir la largeur de la zone de texte en ajoutant :

      max-width: 920px !important;

      Avant le signe } du code :

      /* Texte de la barre de cookies */
      .cookie-choices-text, #cookieChoiceInfo span {
      font-family: 'PT sans', sans-serif;
      font-size: 12px;
      color: #FFFFFF;
      font-weight: normal;
      letter-spacing: 1px;
      }

      Comme ceci :

      /* Texte de la barre de cookies */
      .cookie-choices-text, #cookieChoiceInfo span {
      font-family: 'PT sans', sans-serif;
      font-size: 12px;
      color: #FFFFFF;
      font-weight: normal;
      letter-spacing: 1px;
      max-width: 920px !important;
      }

      Supprimer
    2. Génial ! Merci beaucoup !

      Supprimer
  34. Bonjour, je ne sais pas si tu va pouvoir m'aider mais j'espère que oui ;)
    Depuis que j'ai modifié la barre de cookies j'ai des abonnés qui me disent que dès qu'ils vont sur mon blog ça s'affiche tout bleu alors je ne sais pas si ça vient de la barre de cookies ou pas. Et ceux qui m'ont dit ça utilisent internet explorer car autrement j'ai essayé sur firefox et chrome cela fonctionne.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Effectivement il y a un problème avec Internet Explorer (comme toujours ^^).

      Remplace ce code :

      #cookieChoiceInfo {
      bottom: 0;
      top: initial !important;
      background-color: #AAC6FF !important;
      }

      Par :

      #cookieChoiceInfo {
      bottom: 0 !important;
      top: auto !important;
      background-color: #AAC6FF !important;
      }

      Ça devrait marcher ;)

      Supprimer
    2. D'accord merci beaucoup ! :D

      Supprimer
  35. Bonjour Catherine,
    Tout d'abord, félicitations pour ton travail qui est clair et très explicite !
    La barre personnalisée que j'avais installé en suivant scrupuleusement tes conseils s'est modifiée pour redevenir moche sans aucune intervention de ma part. J'ai donc pris l'initiative de tout recommencer en installant à nouveau tes codes (cette fois-ci sans les personnaliser du tout)... Mais rien n'y fait... Un peu comme si Google avait pris la main sur cette sacrée barre !
    Peux-tu m'aider stp ?
    Pierre

    RépondreSupprimer
    Réponses
    1. Bonjour Pierre,
      Il y a une erreur dans ton code CSS, rajoute un signe } juste au-dessus de la ligne :

      /* Contenant de la barre de cookies */

      S'il manque un signe { } : ou ; alors les codes CSS qui suivent ce manque ne seront pas pris en compte ;)

      Si cela ne fonctionne pas, alors modifie le code pour le nouveau que j'ai modifié dans le tutoriel.

      Supprimer
    2. Bonjour Catherine,

      Un grand merci pour tes interventions ! Cette fois-ci ma barre s'affiche bien en bas de la page avec des couleurs choisies... il n'y a qu'un petit truc qui me chiffonne : la hauteur de celle-ci qui ne veut pas se réduire

      /* Barre de cookies */
      .cookie-choices-inner, #cookieChoiceInfo div {
      padding-top: 1px !important; /* Espace au-dessus du texte */
      padding-bottom: 1px !important; /* Espace en-dessous du texte */
      }
      ... et le fait que le texte des boutons "EN SAVOIR PLUS" "OK" se soient mis en majuscule alors qu'ils sont bien en minuscule sur le code de départ... ?

      Sinon, encore un grand merci à toi car je n'ai plus cette horrible barre à la place de mon logo.

      Cordialement,

      Pierre
      http://turfjeusimple.blogspot.fr/

      Supprimer
    3. Bonjour Pierre,
      Pour l'espace autour de la barre c'est une petite erreur de ma part, il faut utiliser les codes suivants :

      margin-top: 11px !important; /* Espace au-dessus du texte */
      margin-bottom: 11px !important; /* Espace en-dessous du texte */

      Pour le texte des boutons ajoute la ligne :

      text-transform: initial !important;

      avant le signe } du code commençant par :

      /* Boutons de la barre de cookies */
      .cookie-choices-buttons a, #cookieChoiceInfo a {

      Supprimer
  36. Merciiiiii!!! Je m'étais fait un joli menu en haut de page et il était caché par la barre Google. J'ai pu la mettre en pied de page, c'est bien mieux. :)

    RépondreSupprimer
  37. Merci pour ce tuto, ce n'était plus possible ce truc horrible que nous a mis Google.

    Par contre, j'ai un petit soucis, je n'arrive pas à rendre la barre aussi fine que sur ton site.

    Je pense que ça correspond à ce code :

    /* Barre de cookies */
    .cookie-choices-inner, #cookieChoiceInfo div {
    padding-top: 11px !important; /* Espace au-dessus du texte */
    padding-bottom: 11px !important; /* Espace en-dessous du texte */
    }

    Mais même la valeur "0" rend la barre très large. Et j'ai essayé "-20" mais ca ne change rien...

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Petite erreur de ma part, il faut utiliser les codes suivants :

      margin-top: 11px !important; /* Espace au-dessus du texte */
      margin-bottom: 11px !important; /* Espace en-dessous du texte */

      ;)

      Supprimer
    2. Yes! En effet, maintenant ça fonctionne. Merci!

      Supprimer
  38. Coucou :)

    Merci beaucoup pour ce tutoriel, tu nous sauves tous la vie !
    Malheureusement Google a dû effectuer une petite modification, j'avais réussi à affiner ma barre et depuis quelques temps elle est redevenue très grande ! J'ai essayé avec"padding" et "margin", mais ça ne fonctionne plus.
    Je n'arrive pas non plus à changer la couleur du "en savoir plus" et "ok", la police reste blanche quoi que je fasse !
    Je te montre mon code :

    /* Contenant de la barre de cookies */
    #cookieChoiceInfo {
    bottom: 0;
    top: initial !important;
    background-color: #E32548 !important; /* Couleur de fond */
    border-top-style: solid; /* Style de la bordure */
    border-top-width: 3px; /* Epaisseur de la bordure */
    border-top-color: #A60F0F; /* Couleur de la bordure */
    }

    /* Barre de cookies */
    #cookieChoiceInfo div {
    margin-top: 5px !important; /* Espace au-dessus du texte */
    margin-bottom: 5px !important; /* Espace en-dessous du texte */
    }

    /* Texte de la barre de cookies */
    #cookieChoiceInfo span {
    font-family: 'Open Sans Condensed', sans-serif; /* Police du texte */
    font-size: 14px; /* Taille de la police du texte */
    color: #FFFFFF; /* Couleur du texte */
    font-weight: normal; /* Graisse du texte : normal = normal ; bold = gras */
    letter-spacing: 1px; /* Espacement des caractères : normal = normal */
    }

    /* Boutons de la barre de cookies */
    #cookieChoiceInfo a {
    background-color: #8B81A1 !important; /* Couleur de fond */
    font-family: 'Open Sans Condensed', sans-serif; /* Police du texte */
    font-size: 14px; /* Taille de la police du texte */
    color: #FFFFFF; /* Couleur du texte */
    font-weight: normal !important; /* Graisse du texte : normal = normal ; bold = gras */
    letter-spacing: 1px; /* Espacement des caractères : normal = normal */
    text-decoration: none !important;
    }

    /* Boutons de la barre de cookies au survol de la souris */
    #cookieChoiceInfo a:hover {
    background-color: #000000 !important; /* Couleur de fond */
    color: #FFFFFF; / * Couleur de la police */
    }

    RépondreSupprimer
    Réponses
    1. Bonjour Bérangère,
      Oui, Google à effectué quelques changements. Il faut que tu modifies la première ligne de chaque code (commençant par un #) par les nouvelles lignes données dans le tutoriel ;)

      Supprimer
    2. Merci beaucoup pour ta réponse :)
      La marge à enfin diminué de taille ! Mais elle n'est pas aussi fine que sur ton blog, mais ce n'est pas grave !

      Supprimer
  39. Bonsoir Catherine,

    Merci pour tes réponses rapides et merci pour le texte des boutons qui est revenu en minuscules... En revanche pour ce qui est de l'épaisseur de la barre, ce n'est pas encore ça car ton code modifié n'a pas l'air de fonctionner non plus... (?) Après, ce n'est pas bien grave mais j'avoue que l'épaisseur de la barre de ton site (même si ce n'est pas celui de Google !) est beaucoup plus agréable.

    De plus, j'ai lu sur le net que la loi imposait désormais de proposer encore davantage aux internautes, c-a-d, non plus un simple avertissement mais la possibilité d'une acceptation ou d'un refus qui, obligeait le site de ne pas utiliser de cookies (pub, compteur de visites,...) sans la validation explicite ou non de l'internaute. Qu'en penses-tu ?

    Encore bravo et un grand merci pour ton travail !

    Cordialement,

    Pierre

    RépondreSupprimer
    Réponses
    1. Bonjour Pierre,
      Pour l'épaisseur de la barre, tu peux aussi supprimer l'espace du contenant en rajoutant la ligne :

      padding: 0 !important;

      Au code suivant :

      /* Contenant de la barre de cookies */
      .cookie-choices-info, #cookieChoiceInfo {
      bottom: 0 !important;
      top: initial !important;
      background-color: #ECE9E9 !important; /* Couleur de fond */
      }


      Oui, il faut l'accord de l'utilisateur avant de pouvoir utiliser des cookies sur le site (ce qui est franchement ch** à mettre en place ^^), c'est pour ça qu'il faut :
      - Ajouter un code à Google Analytics qui empêche l'activation des cookies tant que l'internaute n'a pas cliqué sur OK
      - Que la CNIL propose d'utiliser les boutons de partage Social Share Privacy qui n'utilisent pas de cookies tant qu'ils n'ont pas été activés manuellement par l'utilisateur.

      Supprimer
    2. Un grand merci pour ton aide et ton efficacité !
      On se sent moins seul !!! ;)

      Supprimer
  40. Bonjour Catherine,

    Merci beaucoup pour ce tuto super clair ! J'avais fait mes modifications en juillet, mais pour je ne sais quelle raison, la barre a changé toute seule et je viens de m'en rendre compte.
    J'ai tout refait comme je voulais mais un truc me chiffone : tu dis que par défaut les boutons ont les bords arrondis, mais ce n'est pas le cas des miens, et j'aimerais qu'ils le soient...as tu la solution ?

    Bonne soirée et merci !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      As-tu réussi à donner des bords arrondis à tes boutons ? Car de mon ordinateur ils le sont bien ;)

      Supprimer
    2. Ouiii ça y est j'ai finalement réussi :) Merci beaucoup d'avoir répondu !

      Supprimer
  41. Je n'ai pas trouvé de cookie aux alentours de head, mais je ne suis pas en Europe donc je ne dois pas être concernée. Super article en tous cas !!

    RépondreSupprimer
    Réponses
    1. Même si tu n'es pas en Europe tu es concernée. Toutes les personnes en Europe verront la barre sur ton blog (je la vois bien par exemple ^^), car elle s'applique en Europe.
      Pour la voir tu peux changer .ca à la fin de ton adresse pour .fr (ou .co.uk, .be, etc.) dans la barre d'adresse de ton navigateur ;)

      Supprimer
  42. Bonjour Catherine,

    J'ai essayé de poster une question hier mais à priori cela n'a pas fonctionné, c'est pour cela que je me permet de la reposer.

    J'ai paramétrer la bannière comme vous l'expliquer et cela a bien fonctionné sur ordinateur mais pas sur mobile.

    Quand je me connecte depuis mon ordinateur, j'ai bien ma nouvelle bannière personnalisée qui s'affiche.
    Par contre quand je me connecte depuis mon mobile, j'ai l'ancienne bannière qui apparait (celle de blogger)

    J'ai tester pour voir si votre site c'était pareil mais vous avez bien votre belle bannière personnalisé qui s'affiche aussi bien sur ordinateur que mobile.

    Comment faire pour que la nouvelle bannière s'affiche aussi sur mobile?
    Un code à rajouter?

    Je vous remercie de votre aide et vous félicite pour votre travail si précieux.

    Julien.

    RépondreSupprimer
    Réponses
    1. Bonjour Julien,
      C'est bizarre, car le code CSS devrait être pris en compte pour la version mobile. Mais tu peux essayer d'utiliser les codes CSS suivants à la place des précédents :

      /* Contenant de la barre de cookies */
      .mobile .cookie-choices-info, .mobile #cookieChoiceInfo, .cookie-choices-info, #cookieChoiceInfo {
      }

      /* Barre de cookies */
      .cookie-choices-inner, #cookieChoiceInfo div, .mobile .cookie-choices-inner, .mobile #cookieChoiceInfo div {
      }

      /* Texte de la barre de cookies */
      .cookie-choices-text, #cookieChoiceInfo span, .mobile .cookie-choices-text, .mobile #cookieChoiceInfo span {
      }

      /* Boutons de la barre de cookies */
      .cookie-choices-buttons a, #cookieChoiceInfo a, .mobile .cookie-choices-buttons a, .mobile #cookieChoiceInfo a {
      }

      /* Boutons de la barre de cookies au survol de la souris */
      .cookie-choices-buttons a:hover, #cookieChoiceInfo a:hover, .mobile .cookie-choices-buttons a:hover, .mobile #cookieChoiceInfo a:hover {
      }

      Supprimer
  43. Bonjour Catherine,

    Merci pour ce code.

    Malheureusement, cela ne fonctionne toujours pas.

    J'ai testé les différentes url présentes dans les commentaires et je constate qu'il y en a qui ont le même problème que moi (la bannière personnalisée ne s’affiche pas sur mobile).

    Par exemple le site www.mampolette.com a le même problème que le mien, sur mobile y'a l'ancienne bannière qui apparaît.

    C'est bizarre que pour certain ça marche et d'autres non, peut être que ça dépend du template?

    Merci.
    Julien.

    RépondreSupprimer
  44. Bonjour Catherine,

    Je souhaitais savoir si le code pour créer une bannière pour les cookies que vous mit est également valable pour les autres cms?

    Si oui, pour la partie du code à mettre juste avant "/head", pas de soucis, je trouve bien ce "/head" dans le code.

    Par contre dans le code du cms (cmsms) dans lequel je veux intégrer la bannière, je ne trouve pas "b:skin" pour coller l'autre partie du code.

    Ce "b:skin" peut-il s'appeler autrement sur cmsms?

    Merci.

    Julien

    RépondreSupprimer
    Réponses
    1. Bonjour Julien,
      Le code de ce tutoriel vaut seulement pour la plateforme Blogger car on modifie la barre affichée par défaut sur les blogs sous Blogger.

      Supprimer
  45. Bonjour,
    Encore un message de ma part ^^
    Je viens de réaliser que les codes changent quand je les enregistre et quand je fais retour (après avoir cliquer sur enregistrer) j'ai un message d'erreur qui me dis que mes modifications n'ont pas été enregistrées. Quand je reviens certains codes ont changé comme les cookies où le " se transforme en ;?Quot,;
    Est-ce un virus ou un juste un code que j'ai mal rentré?
    Désolé de toutes ces questions, merci du temps que tu prends à répondre. Tes tutos sont vraiment bien fait !

    RépondreSupprimer
    Réponses
    1. Bonjour Adélie, non ce n'est pas grave que les " se transforment, certains caractères sont automatiquement convertis en son code HTML par Blogger. C'est simplement qu'il convertit les signes en code. Rien de grave ;)

      Supprimer
    2. Mille mercis pour tes réponses! Donc je ne m'en fait pas pour les codes de la barre par contre elle n'est pas prise en compte dans le blog, celle de blogger a bien disparu mais je ne vois pas la nouvelle barre apparaitre! Peut être une erreur de ma part?

      Supprimer
    3. Sur Di's stories je vois une barre de cookies bleue en bas de la page, est-ce celle-là la 'nouvelle' ? Si tu ne vois pas tes barres de cookies c'est sûrement que tu as accepté les cookies de ton ordinateur. Tu peux essaye de supprimer les cookies de ton navigateur et de le relancer, ou alors d'utiliser un autre ordinateur.

      Supprimer
  46. Bonjour et merci mille fois pour tes tutos qui sont très clairs et m'ont permis de faire des modifs sympas sur mon blog. Une vraie mine d'or. J'ai une question bête mais j'ai beau chercher je ne trouve pas d'explication et je me suis dit que tu pourrais sans doute me répondre. J'ai fait les modif pour personnaliser ma barre de cookies et je n'ai plus aucun barre. En réfléchissant, je me demande même si je l'avais encore avant même de toucher au code. Sais-tu pourquoi ? J'aimerais beaucoup voir le résultat de ton code et là, je suis dépassée. merci ! Belle journée !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je suis allée voir ton blog et elle apparaît bien. Tu as du accepter les cookies, c'est sûrement pour ça que la barre ne s'affiche pas pour toi. Essaye de vider le cache de ton navigateur et de le redémarrer. Sinon, utilise un autre ordinateur ;)

      Supprimer
  47. Bonjour,
    merci beaucoup pour tous vos supers articles. D'habitude j'arrive plutôt bien à arriver au résultat souhaité mais cette fois je n'ai réussi qu'à faire la moitié du chemin ! J'ai pu changer le texte mais pas la forme de la barre et j'ai toujours un gros truc gris assez vilain ! Pouvez-vous m'aider s'il vous plaît ?
    Voici mon code :
    /* Contenant de la barre de cookies */
    .cookie-choices-info, #cookieChoiceInfo {
    background-color: red;
    border-bottom-style: dotted; /* Style de la bordure */
    border-bottom-width: 2px; /* Epaisseur de la bordure */
    border-bottom-color: #0169B9; /* Couleur de la bordure */
    }

    /* Barre de cookies */
    .cookie-choices-inner, #cookieChoiceInfo div {
    margin-top: 2px !important; /* Espace au-dessus du texte */
    margin-bottom: 2px !important; /* Espace en-dessous du texte */
    }

    /* Texte de la barre de cookies */
    .cookie-choices-text, #cookieChoiceInfo span {
    font-family: georgia; /* Police du texte */
    font-size: 10px; /* Taille de la police du texte */
    color: red; /* Couleur du texte */
    font-weight: normal; /* Graisse du texte : normal = normal ; bold = gras */
    letter-spacing: normal; /* Espacement des caractères : normal = normal */
    }

    /* Boutons de la barre de cookies */
    .cookie-choices-buttons a, #cookieChoiceInfo a {
    background-color: #0169B9 !important; /* Couleur de fond */
    border-style: dotted; /* Style de la bordure */
    border-width: 1px; /* Epaisseur de la bordure */
    border-color: #5FA7DE; /* Couleur de la bordure */
    font-family: georgia; /* Police du texte */
    font-size: 12px; /* Taille de la police du texte */
    color: #5FA7DE; /* Couleur du texte */
    font-weight: normal !important; /* Graisse du texte : normal = normal ; bold = gras */
    letter-spacing: 1px; /* Espacement des caractères : normal = normal */
    text-decoration: none !important;
    }

    /* Boutons de la barre de cookies au survol de la souris */
    .cookie-choices-buttons a:hover, #cookieChoiceInfo a:hover {
    background-color: #A0D0F4; /* Couleur de fond */
    color: #5FA7DE; / * Couleur de la police */
    }

    ]]>

    Voilà ! bonne journée

    RépondreSupprimer
    Réponses
    1. Bonjour Julia,
      Au-dessus du premier code tu as ceci :

      /* Apparence des titres de la barre latérale de gauche */
      .column-left-inner h2 {
      font-family: Georgia;
      font-size: 18px;
      color: #191F79;
      text-align: center;
      border-bottom: dotted;
      border-bottom-color: #1A229D;
      border-bottom-width: 2px;
      border-bottom-color: #000000;
      padding-bottom: 5px;
      margin-bottom: 5px;

      Ce code n'est pas fermé, il manque le signe } à la fin, du coup les codes CSS qui suivent cette erreur ne sont pas pris en compte ;)

      Il te suffit d'ajoute un signe } avant la ligne :

      /* Contenant de la barre de cookies */

      Pour obtenir ceci :

      /* Apparence des titres de la barre latérale de gauche */
      .column-left-inner h2 {
      font-family: Georgia;
      font-size: 18px;
      color: #191F79;
      text-align: center;
      border-bottom: dotted;
      border-bottom-color: #1A229D;
      border-bottom-width: 2px;
      border-bottom-color: #000000;
      padding-bottom: 5px;
      margin-bottom: 5px;
      }

      /* Contenant de la barre de cookies */
      .cookie-choices-info, #cookieChoiceInfo {
      background-color: red;
      border-bottom-style: dotted; /* Style de la bordure */
      border-bottom-width: 2px; /* Epaisseur de la bordure */
      border-bottom-color: #0169B9; /* Couleur de la bordure */
      }

      Et voilà ;)

      Supprimer
    2. Bonjour,
      merci beaucoup pour votre réponse, cependant j'ai un autre problème je n'arrive pas à affiner la barre. Ai-je encore fait une erreur ?

      /* Barre de cookies */
      .cookie-choices-inner, #cookieChoiceInfo div {
      margin-top: 1px !important; /* Espace au-dessus du texte */
      margin-bottom: 1px !important; /* Espace en-dessous du texte */
      }

      Bonne journée et merci encore

      Supprimer
    3. Bonjour Julia,
      Rajoute la ligne suivante :

      padding: 0 !important;

      Avant le signe } du code suivant :

      .cookie-choices-info, #cookieChoiceInfo {
      background-color: #5FA7DE;
      border-bottom-style: dotted;
      border-bottom-width: 2px;
      border-bottom-color: #0169B9;
      }

      Comme ceci :

      .cookie-choices-info, #cookieChoiceInfo {
      background-color: #5FA7DE;
      border-bottom-style: dotted;
      border-bottom-width: 2px;
      border-bottom-color: #0169B9;
      padding: 0 !important;
      }

      Et voilà ;)

      Supprimer
  48. Bonjour , hier j'ai voulu modifier mon template, changer les cookies , personnalisé la date , lire la suite etc... Mais ce matin mauvaise surprise dans mon blogger dans modèles j'ai le code erreur Invalid Security Token error 403 .
    De peur j'ai remis un modèle simple de blogger tout retirer mes changements supprimé tout mes gadgets. J'ai même supprimé et réactivé mon blog , vider le cache supprimer les cookies . Mais le problème est toujours là .
    Il y a t'il une manipulation à faire ou bien c'est un problème google , blogger ? Je suis perdu ...

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je crois que ça vient de Blogger car j'ai le même problème depuis quelques jours. J'ai également supprimé les cookies, etc., mais rien n'y fait. J'arrive quand même à modifier les thèmes et ça n'affecte pas les blogs sur lesquels je travail donc je pense que ce n'est pas trop important ;)

      Supprimer
  49. Merci beaucoup ! Quand c'est vous qui le dites ça parait logique !
    Bonne soirée

    RépondreSupprimer
  50. Bonsoir,

    Je n'arrive pas du tout à mettre en place cette barre, pourriez-vous m'éclairer s'il vous plait. Merci d'avance.

    Bonne soirée.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Quelle partie n'arrives-tu pas à faire ?
      Je vois les codes CSS pour ta barre de cookies mais ils sont vides.

      Supprimer
  51. Bonjour Catherine,

    ça y est, mon nouveau blog est en ligne, et grâce à toi, j'ai pu lui donner l'apparence que je voulais! Merci!! J'ai d'ailleurs ajouter ces remerciements sur mon blog, ici: http://www.crumblesetcassonade.be/p/a-propos.html
    Mais... la barre de cookies reste accrochée en haut du blog, masquant la barre de navigation... Une idée? Un conseil? pour la mettre en bas?
    Un grand merci!!

    RépondreSupprimer
    Réponses
    1. Bonjour Marion,
      De rien je suis contente de pouvoir aider, et merci pour les remerciements ! :D

      Le problème pour ta barre de cookies vient de ce code :

      /* Apparence des titres de la barre latérale de droite */
      .column-right-inner h2 {
      font-family: 'Varela Round', sans-serif;
      font-weight: normal;
      font-size: 14px;
      color: #e04c62;
      text-align: center;
      border-bottom: solid;
      border-bottom-width: 1px;
      border-bottom-color: #e04c62;
      padding-bottom: 0px; /* coucou */
      margin-bottom: 20px;
      header {
      }

      Il y a une erreur juste avant le signe }. Du coup tout ce qui suit cette erreur n'est pas pris en compte. Supprime la ligne :

      header {

      Et voilà ;)

      Supprimer
    2. Merci!! Ma barre est bien en bas!
      Qu'aurais-je fait sans tous tes superbes tutoriels? Il était bien normal de te remercier!
      Belle journée!

      Supprimer
  52. Bonjour Catherine,

    Merci infiniment pour ce tutoriel parfaitement expliqué, clair et ludique !
    Il me semble avoir tout bien fait mais je me trompe très certainement. En effet, je ne vois pas ma petite barre à Cookies.. J'ai bien lu tous les commentaires, j'ai essayé de réaliser les modifications que tu as conseillés à certaines blogueuses qui ont le même soucis que moi, mais il s'avère que ma nullité surpasse le reste car toujours pas de changement..
    Pourrais-tu jeter un oeil et me dire ce que tu en penses ? Voici le lien vers mon blog : www.GabyOwl.com

    Merci infiniment d'avance pour ton temps,
    Bonne soirée,

    Gaby.

    RépondreSupprimer
    Réponses
    1. Bonjour Gaby,
      Je vois bien ta barre de cookies, mais le texte blanc se voit mal sur le fond clair. Il faudrait soit utiliser une couleur de texte, ou une couleur de fond plus foncée pour augmenter la lisibilité.
      Si tu n'arrives pas à voir ta barre tu peux essayer à partir d'un autre ordinateur.

      Supprimer
    2. Ah oui je vais regarder tout ça !
      Merci infiniment pour ta réponse.

      A très vite,
      Gaby

      Supprimer
  53. Bonjour Catherine, pour être tout à fait originale, je tiens comme les autres, à vous remercier pour tous ces tutos géniaux que je suis à la lettre et qui fonctionnent toujours parfaitement grace à vos explications très claires.
    Cependant et pour la première fois, me voici bloquée :(
    La barre ne veut pas descendre, et pire elle se cache derriere ma barre de navigation !
    J'ai lu chacun des commentaires et ai essayé chacune des modifs proposées mais rien n'y fait...
    Est ce du au fait que ma barre de navigation soit collée en haut ?

    Voici mon site en construction totale, afin que vous puissiez vous faire une idée du problème :(
    Merci pour tout,
    Barbara.

    http://jesusmariebarbes.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Barbara,
      Je ne vois aucun code CSS pour la barre de cookies dans ton code, est-ce normal ? Car c'est grâce à ceux-ci que tu vas déplacer la barre de cookies.

      Supprimer
    2. Bonsoir Catherine, merci de ta réponse.

      En fait, j'avais enlevé tous les codes pour m'occuper d'autre chose. Je viens finalement de décoller la barre de navigation du haut car je pensais que c'est ce qui faisait que ça ne marchait pas...
      Seulement cela ne marche toujours pas alors que ça a très bien fonctionné sur mon autre blog www.cinnamonbazaar.com

      Je désepspère :(

      Bonne nuit :)

      Supprimer
    3. J'ai trouvé une erreur dans tes codes CSS. Au-dessus de cette ligne :

      /* Mobile

      Tu as ceci :

      .footer-outer {
      footer {
      width: 100%;
      }
      /* Mobile

      Supprime la ligne :

      footer-outer {

      Car c'est un début de code vide qui ne contient rien et qui n'est pas fermé (manque le signe }). Comme il manque le signe } alors tous les codes qui suivent cette erreur ne sont pas pris en compta par le navigateur, dont tes codes CSS pour la barre de cookies ;)

      Supprimer
    4. Rebonjour et merci beaucoup... Mais ça ne marche toujours pas #malediction
      J'ai recollé la barre en haut et ai essayé de comparer les codes de mes deux blogs mais non vraiment je ne comprends pas...

      Il doit y avoir un petit bout de code qui se ballade qque part mais je n'arrive pas à mettre la main dessus !

      J'arrive à changer le texte de la barre mais en ce qui concerne sa personnalisation rien n'y fait :(

      Supprimer
    5. Rebonsoir, pour couronner le tout mon entête a disparu...
      Il ne reste que le titre du gadget Header

      Supprimer
    6. Effectivement, il y a encore une erreur.
      Dans ton code tu as ceci :

      /* Visibilité de la Bordure des Liens */
      .tabs .widget ul {
      overflow: visible; /* Pour bien voir la bordure */
      /* Columns
      ----------------------------------------------- */

      Le code suivant n'est pas fermé :

      .tabs .widget ul {
      overflow: visible; /* Pour bien voir la bordure */

      Rajoute un signe } après la ligne :

      overflow: visible; /* Pour bien voir la bordure */

      Comme ceci :

      /* Visibilité de la Bordure des Liens */
      .tabs .widget ul {
      overflow: visible; /* Pour bien voir la bordure */
      }
      /* Columns
      ----------------------------------------------- */

      Supprimer
    7. Merci infiniment !!!!!!! C'est bon ça a marché :)
      Je n'ai cependant toujours pas réussi à faire réapparaître mon entête.
      Ce n'est pas le sujet ici mais si tu as un peu de temps à l'occasion...

      Merci encore en tout cas. Tu es un génie !

      Supprimer
  54. Bonjour Catherine ! Merci beaucoup pour ce tuto ! Je suis un peu désespérée car j'ai essayé de le faire 5 fois en vérifiant les codes à chaque fois et j'ai toujours l'ancienne barre de cookies. Je ne comprends pas ce qui se passe. Pourrais tu jeter un coup d'oeil à mon blog?
    Merci mille fois

    Magali

    www.birdymarlowe.com

    RépondreSupprimer
    Réponses
    1. Bonjour Magali,
      Je ne vois pas ta barre de cookies :/
      Vérifie bien qu'il n'y a pas d'erreur dans ton code avant le code CSS de ta barre de cookies : un signe { } : ou ; en trop, ou manquant, peut causer ce problème. S'il y a une erreur, alors tout ce qui suit cette erreur n'est pas bien pris en compte par le navigateur.

      Supprimer
  55. Bonjour,

    Je suis totalement novice et il y a un truc que je ne comprends pas. Ou dois-je aller pour modifier les codes CSS des cookies ?

    te remerciant.

    RépondreSupprimer
    Réponses
    1. Il faut aller dans Modèle > Modifier le code HTML. Ensuite suit les étapes décrites dans le tutoriel ;)
      Pour faire une recherche et trouver le code au-dessus duquel il faut coller les codes CSS, clique n'importe où dans la boîte de code et appuie sur Ctrl et F en même temps. Dans la boîte de recherche qui apparaît en haut à droite de la boîte de code (et non en haut de la page web), colle le code donné dans le tutoriel. Appuie sur Entrer. Tu seras redirigé vers cette ligne dans ton code.

      Supprimer
  56. Bonjour. Je me permets de revenir vers toi car la barre Blogger a refait son apparition aujourd'hui (sur mon autre barre que j'ai enlevée depuis) mais impossible de modifier l'apparence ou encore de la dissimuler. Je me demande si google n'a pas modifié le script car je ne trouve pas "cookie choice" dans mon code.
    Ce serait adorable si tu pouvais m'aider. Belle journée ! Julie

    RépondreSupprimer
    Réponses
    1. Bonjour Julie,

      Cherche le code suivant :

      </head>

      Juste au-dessus de cette ligne colle :

      <script type="text/javascript">
      cookieChoices = {}
      </script>

      Supprimer
  57. Catherine, pour la barre de cookies, ça y est j'ai trouvé d'ou venait le problème ! C'était un } oublié sur le code au dessus. Merci quand même !

    RépondreSupprimer
  58. Merci beaucoup vous m'avez encore beaucoup aidé ! :)

    RépondreSupprimer
  59. Merci! C'est la première fois que je te remercie par écrit ici mais si tu savais combien de fois je t'ai remercié dans ma tête :D ! Tes tutoriels sont super clairs, efficaces, et pratiques! Tu expliques super bien et grâce à toi mon blog a un look qui me plaît bien plus!
    Bref, pour toutes les choses que j'ai pu modifier grâce à toi : MERCI mille fois!
    Eloïse, de http://bigoudenblues.blogspot.fr

    RépondreSupprimer
  60. Bonjour, merci beaucoup pour ce petit article très utile!
    Je me permets cependant de vous contacter car je n'arrive pas à faire descendre la barre des cookies en bas de ma page. Sur le principe je n'ai rien contre la barre d'origine de blogger seulement elle est caché par ma barre de menu en haut du blog.

    J'ai probablement fait une erreur de manipulation ou quelque chose comme ça (je n'y connais pas grand chose en codage etc..). Pourrais-tu m'aider à résoudre ce problème?

    Je te remercie d'avance.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      En fait tu as simplement placé le code CSS au mauvais endroit. Voici ce que tu as :

      <script type='text/javascript'>
      cookieOptions = {
      msg: "Ce site utilise des cookies provenant de Google afin de fournir ses services, personnaliser les annonces et analyser le trafic. Les informations relatives à votre utilisation du site sont partagées avec Google. En acceptant ce site, vous acceptez l'utilisation des cookies.",
      link: "https://www.blogger.com/go/blogspot-cookies",
      close: "Ok!",
      learn: "En savoir plus" };

      /* Contenant de la barre de cookies */
      #cookieChoiceInfo {
      bottom: 0 !important;
      top: auto !important;
      }
      </script>

      Déplace ceci :

      /* Contenant de la barre de cookies */
      #cookieChoiceInfo {
      bottom: 0 !important;
      top: auto !important;
      }

      Au-dessus de la ligne suivante dans ton code :

      /* Submit button on mouseover

      Supprimer
  61. salut j'ai un petit problème et pourtant je parfaitement suivi le tuto et merci pour ce tuto :) voici ce que j'ai fait :
    /* Contenant de la barre de cookies */
    #cookieChoiceInfo {
    bottom: 0 !important;
    top: auto !important;
    background-color: #c6e5d9 !important; /* Couleur de fond */
    border-style: solid; /* Style de la bordure */
    border-width: 3px; /* Epaisseur de la bordure */
    border-color: #88ccc5; /* Couleur de la bordure */
    }

    /* Barre de cookies */
    #cookieChoiceInfo div {
    padding-top: 16px !important; /* Espace au-dessus du texte */
    padding-bottom: 16px !important; /* Espace en-dessous du texte */
    }

    /* Texte de la barre de cookies */
    #cookieChoiceInfo span {
    font-family: 'PT sans', sans-serif; /* Police du texte */
    font-size: 12px; /* Taille de la police du texte */
    color: #6A9E99; /* Couleur du texte */
    font-weight: normal !important; /* Graisse du texte : normal = normal ; bold = gras */
    letter-spacing: 1px; /* Espacement des caractères : normal = normal */
    }

    /* Boutons de la barre de cookies */
    #cookieChoiceInfo a {
    border-radius: 0 !important;
    background-color: #88CCC5 !important; /* Couleur de fond */
    border-style: solid; /* Style de la bordure */
    border-width: 1px; /* Epaisseur de la bordure */
    border-color: #88ccc5; /* Couleur de la bordure */
    font-family: 'PT sans', sans-serif; /* Police du texte */
    font-size: 12px; /* Taille de la police du texte */
    color: #6A9E99; /* Couleur du texte */
    font-weight: normal !important; /* Graisse du texte : normal = normal ; bold = gras */
    letter-spacing: 1px; /* Espacement des caractères : normal = normal */
    text-decoration: none !important;
    }

    /* Boutons de la barre de cookies au survol de la souris */
    #cookieChoiceInfo a:hover {
    background-color: #c6e5d9; /* Couleur de fond */
    color: #88ccc5; / * Couleur de la police */
    }

    ]]>

    ...


    RépondreSupprimer
    Réponses
    1. Bonjour Lucas,
      Quel est le problème ?

      Supprimer
    2. Bonjour Catherine, merci d'avoir répondu aussi vite .
      La barre ne s'affiche pas, rien ne s'affiche :(
      Voici mon blog : http://cyclismefootballyoutuber.blogspot.fr/

      Supprimer
    3. Bonjour Lucas,
      La barre s'affiche bien pour moi. As-tu déjà cliqué sur Ok de ton côté ? Si oui alors c'est normal qu'elle ne s'affiche plus. Essaye de vider les cookies de ton navigateur (quelque part dans paramètres) ou d'utiliser un autre ordinateur pour voir la barre de cookies ;)

      Supprimer
    4. Boujour Catherine,

      Je vais essayer avec un autre ordi et merci de la réponse :)

      Supprimer
  62. Bonjour, merci pour ce tuto qui est comme tous les autres topissime.
    J'ai tout de même un petit problème : tout d'abord lorsque j'enregistre et que je retourne sur le code, je me retrouve avec ça :
    cookieOptions = {
    msg: "Ce blog utilise des cookies pour améliorer votre expérience utilisateur. En acceptant ce site, vous acceptez l'utilisation des cookies.",
    link: "https://www.blogger.com/go/blogspot-cookies",
    close: "Ok!",
    learn: "En savoir plus" };
    Ca n'a pas l'air d'affecter ma barre, mais est-ce normal que ça ne ressemble plus à ton code ?

    Et ensuite je n'arrive pas à modifier la hauteur de ma barre en modifiant l'espace au dessus et en dessous du texte. J'ai essayé avec :
    /* Barre de cookies */
    .cookie-choices-inner, #cookieChoiceInfo div {
    padding-top: 5px !important; /* Espace au-dessus du texte */
    padding-bottom: 5px !important; /* Espace en-dessous du texte */
    }
    ou avec :
    /* Barre de cookies */
    .cookie-choices-inner, #cookieChoiceInfo div {
    margin-top: 5px !important; /* Espace au-dessus du texte */
    margin-bottom: 5px !important; /* Espace en-dessous du texte */
    }
    et ça ne change rien. Peux-tu me dire d'où vient le problème ?
    Merci !!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je ne comprend pas quel est le problème avec le code des cookies ? Il me semble tout à fait correcte.

      Pour l'espace autour du texte de la barre tu as le code suivant :

      /* Barre de cookies */
      .cookie-choices-inner, #cookieChoiceInfo div {
      padding-top: 16px !important; /* Espace au-dessus du texte */
      padding-bottom: 16px !important; /* Espace en-dessous du texte */
      }

      Qui défini un espace de 16 pixels autour du texte.
      Souhaites-tu réduire cet espace ?

      Supprimer
    2. Merci de ta réponse !
      Oui c'est en effet cet espace que je veux réduire. En fait, même en diminuant le nombre de pixels, je n'arrive pas à la réduire physiquement plus que ce qu'elle est actuellement. Je ne sais pas si je m'exprime bien...

      Supprimer
    3. En fait il y a plusieurs espaces qui se rajoutent. Un espace entre le contenu de la barre et son bord. Tu peux le supprimer en ajoutant :

      padding: 0 !important;

      Avant le signe } du code suivant :

      /* Contenant de la barre de cookies */
      .cookie-choices-info, #cookieChoiceInfo {
      bottom: 0 !important;
      top: auto !important;
      background-color: #88ccc5; !important; /* Couleur de fond */
      }

      Comme ceci :

      /* Contenant de la barre de cookies */
      .cookie-choices-info, #cookieChoiceInfo {
      bottom: 0 !important;
      top: auto !important;
      background-color: #88ccc5; !important; /* Couleur de fond */
      padding: 0 !important;
      }

      Ensuite il y a un espace autour du texte avec les lignes padding de ce code :

      /* Barre de cookies */
      .cookie-choices-inner, #cookieChoiceInfo div {
      padding-top: 5px !important; /* Espace au-dessus du texte */
      padding-bottom: 5px !important; /* Espace en-dessous du texte */
      }

      Pour finir il y a une marge autour du texte. Pour la supprimer utilise :

      margin-top: 0 !important;
      margin-bottom: 0 !important;

      Ajoute ces codes avant le signe } du code :

      /* Texte de la barre de cookies */
      .cookie-choices-text, #cookieChoiceInfo span {
      font-family: Calibri; /* Police du texte */
      font-size: 12px; /* Taille de la police du texte */
      color: #ffffff; /* Couleur du texte */
      font-weight: normal; /* Graisse du texte : normal = normal ; bold = gras */
      letter-spacing: 1px; /* Espacement des caractères : normal = normal */
      }

      Supprimer
    4. Génial, c'est exactement ce résultat que je voulais ! Merci beaucoup !!!! :-)

      Supprimer
  63. Bon tuto. Maintenant, quand je vois les autres blogs avec la bannière en haut, je suis fière de moi ;-). Merci pour tous vos conseils et astuces.

    RépondreSupprimer
  64. Merci pour ce tuto très simple et très bien expliqué!

    RépondreSupprimer
  65. Bonjour Catherine,

    fallait bien que j'ai un soucis ici lol.
    Hier j'ai fait ce tuto et là j'ai voulu tester si on voyait ma barre des cookies et donc oui on la voit mais elle est en haut et non en bas, du coup elle s'est foutu derrière ma barre de navigation donc impossible de cliquer sur ok ou autre :/

    Comment la mettre en bas stp ?!

    Merci encore
    Bizzz Jessica

    RépondreSupprimer
    Réponses
    1. Bonjour Jessica,
      Je vois que tu as réglé le problème ;)

      Supprimer
    2. Bonjour Catherine,

      Oui merci, il manquait juste un }

      Merci à toi

      Bizzzz

      Supprimer
  66. Est-ce possible de mettre une image de fond à la barre des cookies, pour qu'il y ait des motifs ?

    RépondreSupprimer
    Réponses
    1. Bonjour Melgane,
      Oui c'est tout à fait possible. Remplace :

      background-color: #eeeeee !important;

      Du code CSS :

      /* Contenant de la barre de cookies */
      .cookie-choices-info, #cookieChoiceInfo {
      background-color: #eeeeee !important;
      border-bottom-style: solid;
      border-bottom-width: 2px;
      border-bottom-color: #c53636;
      }

      Par cette ligne :

      background-image: url(http://adresse-url.fr/image.png); /* Image de fond */

      Remplace http://adresse-url.fr/image.png par l'adresse url de ton image. Tu peux ajouter ton image à Blogger pour lui créer une adresse URL en suivant les étapes suivantes : http://ladybirdr.blogspot.fr/2015/06/remplacer-le-lien-lire-la-suite-par-une.html#add

      Supprimer
    2. Désolée de déranger encore !
      J'ai mis une image, le problème c'est que le texte rogne dessus. Je suis parvenue à mettre une marge à gauche pour que ça ne soit plus le cas, mais je n'arrive pas à rapprocher les boutons du texte et du coup ils reviennent à la ligne.

      Supprimer
    3. Bonjour Melgane,
      Ajoute la ligne suivante :

      margin-left: 0 !important;

      Avant le signe } de ce code :

      /* Boutons de la barre de cookies */
      .cookie-choices-buttons a, #cookieChoiceInfo a {
      background-color: #ffffff !important;
      border-style: solid;
      border-width: 1px;
      border-color: #c53636;
      font-family: 'Arial', sans-serif;
      font-size: 12px;
      color: #c53636
      }

      Cela supprimera la marge que tu as ajouté au texte sur ces boutons, car elle s'est appliqué aux 2.
      Par contre, dans tous les cas, à partir d'une certaine largeur d'écran, les boutons se placeront automatiquement à la ligne pour assurer la lisibilité du bandeau ;)

      Supprimer
    4. Merci :) mais du coup, si je mets une marge pour que le texte ne chevauche pas l'image ça remet la marge devant les boutons... donc je ne peux pas décaler le texte.

      Supprimer
    5. Bonjour Melgane,
      Je ne comprends pas le problème. Si tu ajoutes le code que je t'ai donné pour supprimer la marge sur les boutons, tu pourras ajouter une marge au texte sans qu'elle affecte les boutons.

      Supprimer
  67. Bonjour Catherine,

    tout d'abord meilleurs pour cette nouvelle année 2016, plein de bonne choses pour toi et ton blog.

    ton tuto est super intéressant pour moi car je ne voulais plus voir cette grosse barre de cookies proposé par blogger automatiquement. Mais après avoir re fait plusieurs fois la manip, il n'y a rien qui s'affiche en bas !!

    peux tu me dire où cela cloche.

    mille merci
    stephane

    mon blog en cours : http://cgtsolvaytavaux.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Stephane,
      Merci et bonne année 2016 à toi aussi.

      En allant sur ton blog je vois très bien la barre de cookies.
      Si tu as déjà coché la case Ok alors la barre de ne s'affichera plus sur ton ordinateur.
      Utilise un autre ordinateur pour modifier la barre ;)

      Supprimer
  68. Bonjour et merci beaucoup pour tous tes tuto, tu m'as sauvé la vie à de nombreuses reprises car franchement, ça marche toujours ^^

    Toutefois cette fois-ci je suis un peu bloquée:
    J'ai suivi ton tuto et tout c'est très bien passé jusqu'à la dernière étape: modifier l'espace au dessus et en dessous du texte pour que la barre de cookie soit plus fine. J'ai inséré le code, mis en 11px, en 7px, en 3px... Rien ne change et ma barre est toujours aussi grosse. Si tu pouvais me dire pourquoi ça ne fonctionne pas ça serait trop cool <3

    Au passage j'ai aussi un soucis avec l'affichage date/heure de mes post: Tu remarqueras que c'est l'heure qui s'affiche au dessus de mes post en page HOME et non la date, j'aimerais changer ça si possible, et rajouter la date également dans le post intégral au dessus du titre. (Sachant qu'avant, au dessus du titre du post intégral, il y avait mes libellés d'articles. Je trouvais ça pas joli joli alors j'ai carrément supprimé la ligne de code qui correspondait à ça mais du coup maintenant je n'ai plus de libellés apparents donc je ne sais pas si c'est grave ou pas(concernant mon référencement tout ça) ou si ça ne change rien qu'on ne les voit pas à partir du moment ou je les écris dans la section libellés de chacun de mes articles)

    Avant de te déranger pour ces petites choses j'ai vraiment cherché partout sur le net et je n'ai rien trouvé alors tu es un peu mon dernier espoir.

    Merci d'avance =)

    Charlie
    www.charliesugartown.com

    RépondreSupprimer
    Réponses
    1. Bonjour Charlie,
      Il y a plusieurs espaces à prendre en compte.

      Tout d'abord retrouve ce code :

      /* Barre de cookies */
      .cookie-choices-inner, #cookieChoiceInfo div {
      padding-top: 11px !important; /* Espace au-dessus du texte */
      padding-bottom: 1px !important; /* Espace en-dessous du texte */
      }

      Remplace-le par :

      /* Barre de cookies */
      .cookie-choices-inner, #cookieChoiceInfo div {
      padding-top: 0 !important; /* Espace au-dessus du texte */
      padding-bottom: 0 !important; /* Espace en-dessous du texte */
      }

      Ensuite cherche :

      .cookie-choices-text, #cookieChoiceInfo span {
      font-family: 'PT sans', sans-serif; /* Police du texte */
      font-size: 10px; /* Taille de la police du texte */
      color: #000000; /* Couleur du texte */
      font-weight: normal; /* Graisse du texte : normal = normal ; bold = gras */
      letter-spacing: 1px; /* Espacement des caractères : normal = normal */
      }

      Rajoute ces 2 lignes :

      margin-top: 0px !important;
      margin-bottom: 0px !important;

      Avant le signe } de ce code comme ceci :

      .cookie-choices-text, #cookieChoiceInfo span {
      font-family: 'PT sans', sans-serif; /* Police du texte */
      font-size: 10px; /* Taille de la police du texte */
      color: #000000; /* Couleur du texte */
      font-weight: normal; /* Graisse du texte : normal = normal ; bold = gras */
      letter-spacing: 1px; /* Espacement des caractères : normal = normal */
      margin-top: 0px !important;
      margin-bottom: 0px !important;
      }

      Supprimer
    2. Pour les dates, le problème vient sûrement d'un code de ton thème. Sachant que les thèmes venant de ThemeXpose, SoraTemplates et autres, sont bourrés d'erreurs :/

      Supprimer
    3. Déjà merci pour la taille de la barre de cookie.Problème réglé et c'est top!
      Merci beaucoup =)
      Pour les dates je ne sais pas trop quoi faire du coup car oui c'est un code du thème je pense car c'est un thème que j'ai téléchargé gratuitement et que je modifie au fur et à mesure.
      Il doit pourtant bien être possible de changer ça non?
      Ce n'est pas ultra grave mais pas très pratique on va dire donc j'espère que je vais trouver une solution =/
      J'ai aussi un problème avec mon diaporama sur la page d'accueil. Il ne défile pas automatiquement -_-. Je pense avoir un soucis au niveau de mon flux RSS mais j'y connais rien donc la encore impossible pour moi de corriger ça T_T

      En tout cas merci beaucoup <3
      bise
      www.charliesugartown.com

      Supprimer
    4. Bonjour Charlie,
      Pour ton diaporama il suffit de retrouver ce code :

      $("#owl-demo").owlCarousel({
      navigation: false,
      autoHeight: true,
      items: 1,
      itemsDesktop: [1199, 1],
      itemsDesktopSmall: [980, 1],
      itemsTablet: [768, 1],
      itemsTabletSmall: [568, 1],
      itemsMobile: [479, 1],
      });

      Et de rajouter les lignes suivantes :

      autoPlay: true,
      slideSpeed: 1500,
      paginationSpeed: 1500,

      Après la première ligne du code, comme ceci :

      $("#owl-demo").owlCarousel({
      autoPlay: true,
      slideSpeed: 1500,
      paginationSpeed: 1500,
      navigation: false,
      autoHeight: true,
      items: 1,
      itemsDesktop: [1199, 1],
      itemsDesktopSmall: [980, 1],
      itemsTablet: [768, 1],
      itemsTabletSmall: [568, 1],
      itemsMobile: [479, 1],
      });

      Et voilà ;)

      Supprimer
  69. Ca marche! C'est magique! Merci beaucoup =)
    <3

    RépondreSupprimer
  70. Bonjour Catherine,

    merci beaucoup pour ce tuto hyper détaillé qui m'a été conseillé par une autre blogueuse. je rencontre des problèmes avec ma barred e cookies qui "mange" le haut de ma page et le bouton ok n'est pas disponible pour les lecteur pour la faire partir. la solution serait surement de la redéplacer en bas mais je n'arrive pas trouver l'espace cookies dans mon code htlm. j'ai installé un template extérieur et je n'arrive pas mettre la main dessus :/
    http://mesptitsbonbons.blogspot.fr/

    Un grand merci par avance de ton coup de pouce!!

    RépondreSupprimer
    Réponses
    1. Bonjour Clementine,
      Les codes CSS pour la barre de cookies n'existent pas par défaut, il faut les rajouter manuellement.
      Colle les codes CSS données dans le tutoriel avant la ligne suivante de ton code HTML :

      ]]></b:skin>

      Supprimer
    2. Oh désolée Catherine, je n'avais pas vu ta réponse je vais tester! merci beaucoup :D

      Supprimer
  71. Bonjour Catherine,

    Merci encore pour ce tuto, TOP comme tous les autres !
    Mais j'ai un soucis... J'ai essayé plusieurs fois en recommençant à zéro, et je n'arrive pas à modifié ma barre de cookies.
    Voici le lien de mon blog :

    http://cocooning-andco.blogspot.fr/

    Merci d'avance pour ton aide !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Vérifies bien que tu n'as pas des signes : ; { } /* ou */ en trop ou manquants. Vérifies dans les codes CSS de ta barre de cookies ET dans les codes CSS qui les précèdent. Une simple petite erreur (oubli ou signe en trop), et tout ce qui suit peut ne pas ou être mal pris en compte.

      J'ai déjà remarqué quelques erreurs.

      Au-dessus de la ligne :

      /* Contenant de la barre de cookies */

      Tu as :

      a#btnCSS_P:hover, a#btnCSS_I:hover, a#btnCSS_mail:hover {
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      opacity: 0.8;
      }#header-inner img
      text-align:center;
      }#header-inner img
      {
      margin:auto;
      }

      Il manque un signe } dans le lot. Remplace tout ceci par :

      a#btnCSS_P:hover, a#btnCSS_I:hover, a#btnCSS_mail:hover {
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      opacity: 0.8;
      }

      #header-inner img {
      text-align:center;
      }

      #header-inner img {
      margin:auto;
      }

      Ensuite trouve la ligne :

      /* Boutons de la barre de cookies au survol de la souris */

      Juste en-dessous tu as :

      .cookie-choices-buttons a:hover, #cookieChoiceInfo a:hover {
      }
      }#header-inner img
      {
      margin:auto;
      }#btnCSS a{
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #000000;
      }

      Tu as un code } en trop, et un codes CSS répété qui ne sert donc à rien. Remplace tout ceci par :

      .cookie-choices-buttons a:hover, #cookieChoiceInfo a:hover {
      }

      #btnCSS a {
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #000000;
      }

      Regarde bien ton code pour d'autres erreurs de ce type.

      Supprimer
  72. Coucou ma belle! En fait je souhaiterai faire en sorte que mon blog ne comptabilise pas mes propres vues dans l'audience. J'ai coché la case "exclure mes vues" (un truc du genre), mais à chaque fois, il faut que je refasse la manip. Y a t il un autre moyen de s'y prendre? Merci beaucoup :-*
    Amale
    http://amalewords.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Amale,
      Il me semble qu'il n'y a pas de vraie solution à ce problème :/

      Supprimer
  73. Bonjour,

    Tout d'abord un grand merci pour ce partage de connaissance et de savoir faire. C'est super !
    J'ai tenté d'appliquer quelques auto à mon modeste blog... concernant la barre cookies, elle a disparu... j'ai lu les commentaires précédents et appliquer tes conseils. mais rien n'y fait...
    trailandcie.blogspot.fr
    Si tu peux m'aider, ce sera avec plaisir.
    Merci à toi
    Lydie

    RépondreSupprimer
    Réponses
    1. Bonjour Lydie,
      Supprime ce code CSS :

      #cookieChoiceInfo, .cookie-choices-info {
      display: none !important;
      }

      Il cache ta barre de cookies ;)

      Supprimer

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