Vous êtes nouveau? Commencez ici pour découvrir l'aventure!
Des questions? cliquez-ici

Ajouter une barre de cookies personnalisée sur Blogger

barre de cookies personnalisée sur blogger

On ne va pas parler de cookies aux chocolats sur le blog, et je vois votre déception, on va plutôt aborder le sujet de la barre de cookies sur internet. Il s'agit d'un avertissement généralement représenté en haut de l'écran lorsque l'on navigue sur un site internet. Son rôle est important étant donné qu'elle interagit avec chaque utilisateur. Pourtant peu de gens savent réellement quel est son rôle et pourquoi on la retrouve partout. Dans cet article, je vous explique pourquoi il est important d'installer une barre de cookies et comment la personnaliser sur son blog Blogger.

Qu'est ce que les cookies?


Un cookie est un fichier texte qui est déposé durant votre navigation sur internet sur votre ordinateur. Les cookies permettent au propriétaire du site de conserver les données des différents visiteurs afin de faciliter la navigation, mais également pour stocker les informations sur l'utilisateur. Ne vous inquiétez pas, il s'agit simplement d'informations relatives à vos préférences de recherches ou des informations comme votre prénom ou votre pays de localisation.

Il faut savoir qu'un cookie ne représente aucun danger pour votre ordinateur. En effet, il ne s'agit pas d'un virus et en aucun cas, les sites ne peuvent récolter des informations personnelles que vous n'avez pas divulguées.

Est-ce obligatoire?


Conformément à la législation de l'Union européenne, vous devez obligatoirement informer vos visiteurs de l'utilisation des cookies, et ce, depuis 2011. Heureusement pour les sites réalisés sous la plateforme Blogger, une barre de cookies a été automatiquement générée. En ce qui concerne les autres plateformes de blogs et CMS, il existe des extensions afin d'intégrer facilement une barre de cookies. 

Comment personnaliser la barre des cookies?


Comme dit précédemment, la barre des cookies est automatiquement intégrée sur les blogs créés sous Blogger. Mais il est possible de personnaliser la barre de manière à ce qu'elle s'adapte à votre design (couleur, police, etc.).

La barre de cookies est représentée par défaut au-dessus du blog sous un fond gris foncé et assez basique.



Nous allons ajouter différents codes afin de rendre la barre des cookies plus attrayante, mais également en accord avec son design. On modifie le fond coloré, on diminue la taille de la police et on ajoute des boutons distincts avec un survol animé.



ETAPE 1


Avant toute modification de votre template, il est important de faire une sauvegarde. Pour éviter de vous tromper et faire des erreurs, suivez correctement les étapes une par une.

PARAMETRES/AUTRE/SAUVEGARDER LE CONTENU

ETAPE 2


Dans votre code HTML, recherchez le code suivant (Cliquez n'importe où dans votre code html et faites une recherche via le raccourci clavier CTRL+C pour windows et CMD+C pour Mac):

</head>

Ensuite, collez le code suivant juste au-dessus.

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

Si vous le souhaitez, vous pouvez modifier le lien "en savoir plus" afin d'offrir davantage d'informations. Celle-ci peut faire partie de vos mentions ou être reliée aux explications de Google.

ETAPE 3

Deux solutions s'offrent à vous pour ajouter le code de personnalisation.

 SOLUTION 1 

En dessous de votre code dont je vous ai parlé à l'étape 2 vous ajoutez des balises <style>

<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><style>
</style> 
Entre ces balises, ajoutez les codes suivants:

/* VOTRE BARRE DES COOKIES */
.cookie-choices-info {
background-color: #CED8F6!important; /* la couleur du fond */
top: auto !important; /* la barre des cookies est fixée en bas */
bottom:0 !important; /* la barre des cookies est fixée en bas */
font-family: sans-serif!important; /* la police d'écriture */
}
/* LE TEXTE DE LA BARRE DES COOKIES */
.cookie-choices-info .cookie-choices-text {
font-size: 13px!important; /* la taille du texte */
color: #fff!important; /* la couleur du texte */
text-align:justify!important; /* l'alignement du texte */
}
/* LES BOUTONS OK ET EN SAVOIR PLUS */
.cookie-choices-info .cookie-choices-button {
font-weight: bold!important; /* l'épaisseur du texte des boutons */
color: #fff!important; /* la couleur du texte des boutons */
padding: 5%!important; /* l'espacement entre le texte et le bouton */
background: #A9A9F5!important; /* la couleur du fond du bouton */
}
/* LES BOUTONS AU SURVOL DE OK ET EN SAVOIR PLUS */
.cookie-choices-info .cookie-choices-button:hover {
color: #555!important; /* la couleur du texte au survol du bouton */
 background: #fff!important; /* la couleur du fond au survol du bouton */
}

 SOLUTION 2 

Copiez le code suivant juste au-dessus de ]]></b:skin> (Cliquez n'importe où dans votre code html et faites une recherche via le raccourci clavier CTRL+C pour windows et CMD+C pour Mac)

/* VOTRE BARRE DES COOKIES */
.cookie-choices-info {
background-color: #CED8F6!important; /* la couleur du fond */
top: auto !important; /* la barre des cookies est fixée en bas */
bottom:0 !important; /* la barre des cookies est fixée en bas */
font-family: sans-serif!important; /* la police d'écriture */
}
/* LE TEXTE DE LA BARRE DES COOKIES */
.cookie-choices-info .cookie-choices-text {
font-size: 13px!important; /* la taille du texte */
color: #fff!important; /* la couleur du texte */
text-align:justify!important; /* l'alignement du texte */
}
/* LES BOUTONS OK ET EN SAVOIR PLUS */
.cookie-choices-info .cookie-choices-button {
font-weight: bold!important; /* l'épaisseur du texte des boutons */
color: #fff!important; /* la couleur du texte des boutons */
padding: 5%!important; /* l'espacement entre le texte et le bouton */
background: #A9A9F5!important; /* la couleur du fond du bouton */
}
/* LES BOUTONS AU SURVOL DE OK ET EN SAVOIR PLUS */
.cookie-choices-info .cookie-choices-button:hover {
color: #555!important; /* la couleur du texte au survol du bouton */
background: #fff!important; /* la couleur du fond au survol du bouton */
}


Toutes les remarques notées dans le code (/* EXPLICATIONS*/), vous permettent de savoir à quoi chaque ligne correspond, et où vous devez modifier votre code.

Par exemple


background: #A9A9F5!important; /* la couleur du fond du bouton */

#A9A9F5 correspond à une couleur pourpre. Vous pouvez modifier la couleur du bouton par un fond rose par exemple #F6CEE3. Pour trouver le code correspond à votre choix de couleur, allez sur ce site


Aperçu du résultat




1 commentaire: