Comment personnaliser la barre de cookies sur Blogger ?

Disponible jusqu'à présent pour les blogs affichant la barre de navigation (navbar), la notification à propos des cookies est désormais affiché sur tous les blogs hébergés par Blogger. Cette dernière est obligatoire mais rien n'interdit de la personnaliser.

On peut changer sa couleur, sa taille, sa position, tout est permis tant que le bandeau reste visible.

Dans sa version d'origine, la notification s'affiche sur toutes les pages sous la forme d'un bandeau gris qui masque le titre du blog et qui en plus reste fixé sur l'en-tête du blog.

Cela peut-être gênant même si le bandeau disparaît du blog une fois que le visiteur a cliqué sur "ok".

Voici une première déclinaison de la notification : Fond beige, texte gris de taille normale, alignement à gauche... (Le code CSS est à place au niveau de Modèle  ➯ Personnaliser ➯Avancé ➯ Ajouter le fichier CSS).

Le code ci-dessous est à placer juste au dessus de : ]]></b:skin>

.cookie-choices-info, #cookieChoiceInfo {
  /* enlever le gras */
  font-weight:normal!important;
  /* fond beige */
  background-color: beige!important;
  /* couleur gris */
  color:gray!important;
  /* à gauche */
  text-align:left!important;
  /* marge intérieure réduite*/
  padding:0!important;
  /* police*/
  font-family:arial!important;
  /* taille texte*/
  font-size:13px!important;
}

Voila l'aperçu de la barre de cookies sur Blogger :

Le code peut être adapté avec d'autres couleurs.(à voir plus bas)

On peut aller plu loin pour rendre la notification plus discrète sans la masquer. Sur mon blog, j'ai choisi de décaler la notification vers la droite :

.cookie-choices-info, #cookieChoiceInfo {
  width:40%!important;
  left:60%!important;
  text-align:right!important;
  background:white!important;
  font-weight:normal!important;
  color:black!important;
  font-family:arial!important;
  font-size:13px!important;
}

Voila l'aperçu de la barre de cookies sur Blogger :

Modifier le texte de la barre de cookies sur Blogger :

Le texte du bandeau :

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.

Recherchez la ligne, vous pouvez vous aider d’un « ctlr + f » :

</head>

Copier coller ce code juste avant la balise </head>.

<script type="text/javascript"> 
  cookieOptions = { 
    msg: "Ce blog utilise des cookies pour vous garantir la meilleure expérience. Si vous continuez à utiliser ce site, nous considérerons que vous en acceptez l'utilisation.", 
    link: "https://www.blogger.com/go/blogspot-cookies", 
    close: "ok", 
    learn: "En savoir plus" }; 
</script>

Vous pouvez modifier les messages entre guillemets comme vous le souhaitez.
Grâce à « link » vous pouvez également modifier le lien du bouton « en savoir plus » pour l’envoyer vers une page explicative personnalisée mais je vous conseille dans un premier temps de laisser celle par défaut.

Modifier l’apparence de la barre de cookies sur Blogger :

Pour modifier l’apparence, il va falloir ajouter du code CSS. On va le placer en dessous du code précédent, toujours avant la balise </head>.

On va placer ensuite deux balises <style></style> et mettre tout notre  code css à l’intérieur.

<style>
code css à placer entre ces balises
</style>

L’apparence générale de la barre de cookies sur Blogger :

 

#cookieChoiceInfo{
height: 30px; /*hauteur de la barre*/
background:#40adad !important; /*couleur du fond*/
margin-top: -5px !important; /*reduire la hauteur du texte*/
}

➯ Pour la hauteur de la barre, il suffit de modifier le 30.
➯ Pour la couleur de l’arrière plan de la barre, modifiez le code à 6 caractères en laissant le # devant. Pour trouver le code des couleurs vous pouvez vous rendre sur ce lien.
➯ Le margin-top indique la distance entre le texte et le haut de votre site. En mettant une valeur négative, on la réduit.

• Placer sa barre en bas de la page

Pour placer la barre en bas de la page on rajoute deux lignes de code à notre code précédent.

#cookieChoiceInfo{
height: 30px; /*hauteur de la barre*/
background:#40adad !important; /*la couleur du fond*/
margin-top: -5px !important; /*reduire la hauteur du texte*/
bottom: 0 !important; /*barre en bas*/
top: auto !important; /*barre en bas*/
}

• L’apparence du texte

On place le code juste en dessous du code précédent, toujours à l’intérieur des balises </style></head>

.cookie-choices-text {
font-size:14px !important; /*la taille du texte*/
font-family: arial, sans-serif !important; /*la police*/
color: #ffffff !important; /*la couleur du texte*/
max-width: 1200px !important; /*la largeur du texte*/
}

➳ On modifie le « 14 » pour changer la taille du texte
➳ Dans font-family, à la place de « arial » on met le nom de sa police préférée
➳ Dans color, on met le code couleur pour le texte. #ffffff correspond à blanc.

• L’apparence des boutons

On place le code juste en dessous du code précédent, au dessus du </style></head>

#cookieChoiceInfo a {
 font-weight:normal !important; /*Enlever le gras*/
    font-size: 11px !important; /*la taille du texte dans les boutons*/
    color: #fff !important; /*la couleur du texte*/
    background: #c59560!important; /*la couleur du fond des boutons*/
    padding: 6px !important; /*la grandeur des boutons*/
    border-radius: 8px; /*mettre des coins arrondis*/
    text-transform: UPPERCASE; /*mettre en majuscule*/
    margin-left: 8px; /*espacement entre les boutons*/
    text-decoration: none; /*pas de soulignement*/
}

• L’apparence des boutons au survol de la souris

   

On place le code juste en dessous du code précédent, au dessus du </style></head>

#cookieChoiceInfo a:hover{
color: #484848 !important; /*couleur du texte*/
background:#dcae7c!important; /*couleur du fond*/
}

• Mettre une bordure de la barre de cookies sur Blogger :

   

Pour mettre une bordure à la barre de cookies, on se rend dans notre premier bloc de code css :

#cookieChoiceInfo{
height: 30px; /*hauteur de la barre*/
background:#40adad !important; /*la couleur du fond*/
margin-top: -5px !important; /*reduire la hauteur du texte*/
max-width: 1200px !important; /*la largeur du texte*/
}

Si notre barre est en haut, on va mettre la bordure en bas :

border-bottom:2px solid #c69c6d; /*taille, style et couleur de la bordure*/

Si notre barre est en bas, on va mettre la bordure en haut :

border-top:2px solid #c69c6d; /*taille, style et couleur de la bordure*/

Et voila les code en entier de la barre de cookies sur Blogger:

  Les codes sont à ajouter juste au dessus de ce code :

</head>

Exemple 1: Avec la barre en haut

<script type="text/javascript"> 
  cookieOptions = { 
    msg: "Ce blog utilise des cookies pour vous garantir la meilleure expérience. Si vous continuez à utiliser ce site, nous considérerons que vous en acceptez l'utilisation.", 
    link: "https://www.blogger.com/go/blogspot-cookies", 
    close: "ok", 
    learn: "En savoir plus" }; 
</script>


<style>
#cookieChoiceInfo{
height: 30px; /*hauteur de la barre*/
background:#40adad !important; /*la couleur du fond*/
margin-top: -5px !important; /*reduire la hauteur du texte*/
border-bottom:2px solid #c69c6d; /*taille, style et couleur de la bordure*/
}
.cookie-choices-text {
font-size:12px !important; /*la taille du texte*/
font-family: arial, sans-serif !important; /*la police*/
color: #ffffff !important; /*la couleur du texte*/
max-width: 1200px !important; /*la largeur du texte*/
}
#cookieChoiceInfo a {
 font-weight:normal !important; /*Enlever le gras*/
    font-size: 11px !important; /*la taille du texte dans les boutons*/
    color: #fff !important; /*la couleur du texte*/
    background: #c69c6d !important; /*la couleur du fond des boutons*/
    padding: 6px !important; /*la grandeur des boutons*/
    border-radius: 5px; /*mettre des coins arrondis*/
    text-transform: UPPERCASE; /*mettre en majuscule*/
    margin-left: 8px; /*espacement entre les boutons*/
    text-decoration: none; /*pas de soulignement*/
}
#cookieChoiceInfo a:hover{
color: #484848 !important; /*couleur du texte*/
background:#dcae7c!important; /*couleur du fond*/
}
</style>

Exemple 2 : Avec la barre en bas

<script type="text/javascript"> 
  cookieOptions = { 
    msg: "Ce blog utilise des cookies pour vous garantir la meilleure expérience. Si vous continuez à utiliser ce site, nous considérerons que vous en acceptez l'utilisation.", 
    link: "https://www.blogger.com/go/blogspot-cookies", 
    close: "ok", 
    learn: "En savoir plus" }; 
</script>


<style>
#cookieChoiceInfo{
height: 30px; /*hauteur de la barre*/
background:#40adad !important; /*la couleur du fond*/
margin-top: -5px !important; /*reduire la hauteur du texte*/
border-top:2px solid #c69c6d; /*taille, style et couleur de la bordure*/
bottom: 0 !important; /*barre en bas*/
top: auto !important; /*barre en bas*/
}
.cookie-choices-text {
font-size:12px !important; /*la taille du texte*/
font-family: arial, sans-serif !important; /*la police*/
color: #ffffff !important; /*la couleur du texte*/
max-width: 1200px !important; /*la largeur du texte*/
}
#cookieChoiceInfo a {
 font-weight:normal !important; /*Enlever le gras*/
    font-size: 11px !important; /*la taille du texte dans les boutons*/
    color: #fff !important; /*la couleur du texte*/
    background: #c69c6d !important; /*la couleur du fond des boutons*/
    padding: 6px !important; /*la grandeur des boutons*/
    border-radius: 5px; /*mettre des coins arrondis*/
    text-transform: UPPERCASE; /*mettre en majuscule*/
    margin-left: 8px; /*espacement entre les boutons*/
    text-decoration: none; /*pas de soulignement*/
}
#cookieChoiceInfo a:hover{
color: #484848 !important; /*couleur du texte*/
background:#dcae7c!important; /*couleur du fond*/
}
</style>