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 :

/* Ceci est un commentaire */

!important;

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

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 . On va placer ensuite deux balises  et mettre tout notre  code css à l’intérieur.

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 

.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

#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

#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*/
}

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

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

Et en entier ça donne quoi ?

1. Avec la barre en haut

2. Avec la barre en bas