Depuis juillet 2015, Blogger a ajouté automatiquement une barre d’information sur tous les blogs. Il faut dire qu’elle n’est vraiment pas esthétique et peut souvent gâcher un design de blog. Beaucoup trop de blogs laissent la barre par défaut, c’est pourquoi j’avais très envie de vous proposer un tutoriel simple pour la personnaliser, faire en sorte qu’elle soit plus discrète et s’accorde aux couleurs de votre thème.

Avant de commencer revenons sur quelques informations essentielles :

Qu’est-ce que les cookies ?

Un cookie n’est pas un délicieux gâteau aux pépites mais un petit fichier qui est créé par votre navigateur sur votre ordinateur pour sauvegarder des données. Ce petit fichier est composé uniquement de texte, il est inoffensif. Il permet de conserver des éléments d’un site web afin d’améliorer votre confort lors des prochaine visites ou de collecter des données qui seront étudiés dans les statistiques du site web. Mais tout cela reste anonyme bien entendu.

Est-ce obligatoire d’afficher cette barre d’information ?

Cette barre est obligatoire depuis 2011 sur les blogs et sites web destinés à des internaute européens, d’après une loi de la CNIL (Comission Nationale Informatique et Libertés).

⇢ Place au tutoriel ⇠

Note importante avant de commencer :

Vous allez fréquemment voir ces codes :

Commentaire en css

/* Ceci est un commentaire */

Le commentaire ne gène rien, vous pouvez le laisser dans votre code.

Forçage du code

!important;

Le !important indique au code que c’est celui-ci qu’il faut prendre en compte. Il va passer par dessus un code déjà existant.

Avec ce tuto, sans changer les valeurs des couleurs, police et taille; vous obtiendrez cette barre :

➳ Retrouvez le code entier à la fin de l’article

À quel endroit on modifie ?

Dans un premier temps, il faut se rendre dans la partie « modèle » et cliquer sur « Modifier le code HTML ».

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

Modifier le texte :

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 :

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>

1. L’apparence générale de la barre

#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 site.
➳ 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.

2. 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*/
}

3. 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.

4. 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*/
}

5. 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*/
}

6. Mettre une bordure

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 en entier ça donne quoi ?

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>

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>

8 commentaires

Christine - Mon petit Noeud
21 janvier 2016 à 0 h 25 min · Répondre

Coucou Romy !
Merci beaucoup pour cet article 🙂
J’ai donc essayé de modifier la mienne mais quand elle s’affiche elle est « trop basse », on ne voit que la moitié de la barre :/
Tu pourrais m’aiguiller stp ? 😀
Merci d’avance !
Bisous
Ausseanne
24 janvier 2016 à 22 h 05 min · Répondre

Tout simplement merci !
Ca faisait deux semaines que je disais qu’il fallait que je change cette barre moche (même si ça fait un moment qu’elle est là oui..). Je suis tombée sur plusieurs tuto, sans résultat.. Et le tiens à tout changé, tellement bien expliqué ! Merci !
Romane
17 mars 2016 à 11 h 42 min · Répondre

Coucou moi je n’est pas la barre des cookies qui s’affiche, c’est normal ou pas ?
- Romy - Être blogueuse
  17 mars 2016 à 11 h 48 min · Répondre
  
  Coucou Romane,
  Je la vois sur ton blog. Quand tu as cliqué sur ok, elle ne réapparait pas avant un très long moment. Tu peux la voir d’un autre navigateur/ordinateur ou en faisant une page navigation privée avec ton navigateur 😉
Romane
17 mars 2016 à 18 h 36 min · Répondre

Ah d’accord merci beaucoup bisous ❤️
Clem Lablondassidue
27 mai 2016 à 7 h 41 min · Répondre

Merci pour cet article ma belle, surement le mieux expliqué et plus simple que j’ai trouvé 😀 Bisous, Clem
Chouby
7 août 2016 à 17 h 48 min · Répondre

Oh un grand merci . J’ai voulu modifier mon template et ma jolie barre a disparu . Je me suis tirer les cheveux pendant 1h avec un autre tuto (que j’avais utilisé par le passé qui fonctionnait mais la plus possible) et la en même pas 3 min avec ton tuto impeccable. Me reste plus qu’a personnalisé ma barre maintenant merci .
Pseudo
11 mars 2017 à 17 h 38 min · Répondre

Merci pour ces explications, je vais essayer de visionner mon résultat !