Qu'est-ce que c'est ?
"Un cookie est une information déposée sur votre disque dur par le serveur du site que vous visitez. Il contient plusieurs données :- le nom du serveur qui l'a déposée ;
- un identifiant sous forme de numéro unique ;
- éventuellement une date d'expiration…
A quoi servent les cookies ?
"Les cookies ont différentes fonctions. Ils peuvent permettre de reconnaître un internaute, d'une visite à une autre, grâce à un identifiant unique. Certains cookies peuvent aussi être utilisés pour stocker le contenu d'un panier d'achat, d'autres pour enregistrer les paramètres de langue d'un site, d'autres encore pour faire de la publicité ciblée".Et sur le blog ?
Les cookies me permettent de voir certaines informations à visée statistique : l'heure à laquelle vous vous connectez, les pages que vous consultez et le temps de lecture, votre pays, votre ville, votre navigateur.Je n'ai pas configuré mes statistiques pour voir votre âge, votre sexe, vos données géographiques plus loin que la ville. Mes configurations statistiques sont basiques, mais il est possible de les personnaliser et d'ajouter la récupération de ces données et de bien d'autres !
Que dit la loi ?
"La réglementation prévoit que les sites internet doivent recueillir votre consentement avant le dépôt de ces cookies, vous indiquer à quoi ils servent et comment vous pouvez vous y opposer. En pratique, un message doit apparaître quand vous vous connectez au site pour la première fois pour vous indiquer comment accepter ou au contraire refuser les cookies".Autrement dit, n'importe quel site doit désormais vous informer lorsqu"il récupère vos données personnelles, et c'est la moindre des choses je trouve étant donné tout ce qu'il est possible de récolter.
Voici la raison pour laquelle j'ai installé cette barre sur le haut du blog. Pour les blogueurs qui se posent la question du "comment l'installer" un tutoriel se trouve plus bas dans l'article.
Pour les simples "lecteurs", merci de m'avoir lue, vous savez maintenant ce que je fais de vos données que vous fournissez malgré vous. :) Pour en savoir plus, je vous invite à consulter le site de la CNIL (Commission Nationale de l'Informatique et des Libertés) en cliquant ici.
{Le tutoriel}
Et maintenant, place au tutoriel pour installer cette fameuse barre et informer nos chers lecteurs. Personnellement, je blogue depuis la plateforme Blogger. Je pense néanmoins, que si vous avez déjà modifié plus ou moins le code html de votre blog, la barre s'installera de la même manière.
Pour être honnête, ce code, je ne l'ai pas inventé. J'ai moi-même installé cette barre en suivant le tutoriel de ce blog : DearJoy.
Étape 1 :
Vous rendre dans le menu de votre plateforme qui vous permet de modifier le code html (sous Blogger choisissez "Modèle" puis "Modifier le code html").
Étape 2 : Rechercher l'entrée " </body> " (sans les guillemets) en utilisant le raccourci "ctrl + F" de votre clavier.
Étape 3 :
Juste au dessus de cette balise " </body> ", sautez une ligne pour insérer ce code qu'il vous faut copiez puis coller (je l'ai surligné pour que vous y voyez un peu plus clair) :
<div id='barritaloca' style='display:none;position:fixed;center:0px;right:0px;bottom:0px;width:100%;min-height:40px;background: #FEA7B0;color:#ffffff;z-index: 99999;'>
<div style='width:100%;position:absolute;padding-left:5px;font-family:verdana;font-size:12px;top:30%;'><div style='text-align: center;'>
VOTRE PHRASE A MODIFIER
<a href='javascript:void(0);' onclick='PonerCookie();' style='padding:4px;background:#FFC3DB;text-decoration:none;color:#fff;'><b>OK</b></a>
<a href='https://www.google.com/intl/fr_fr/policies/technologies/types/' style='padding-left:5px;text-decoration:none;color:#ffffff;' target='_blank'>En savoir plus</a>
</div>
</div>
</div>
<script>
function getCookie(c_name){
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1){
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1){
c_value = null;
}else{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1){
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function setCookie(c_name,value,exdays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
if(getCookie('aviso')!="1"){
document.getElementById("barritaloca").style.display="block";
}
function PonerCookie(){
setCookie('aviso','1',365);
document.getElementById("barritaloca").style.display="none";
}
</script>
Étape 4 :
Je vous invite à faire une prévisualisation de votre modèle pour vérifier que la barre s'affiche bien. Normalement si elle s'affiche, elle se trouve en bas et sa couleur est rose. Maintenant il faut la personnaliser.
Étape 5 :
C'est là qu'on s'amuse ! ^^ Pour personnaliser, il va falloir regarder uniquement le début du code.Voici mon code une fois personnalisé :
<div id='barritaloca'
style='display:none;position:fixed;center:0px;right:0px;top:0px;width:100%;min-height:40px;background:
#f3f3f3;color:#3d85c6;z-index: 99999;'>
<div
style='width:100%;position:absolute;padding-left:5px;font-family:verdana;font-size:12px;top:30%;'><div
style='text-align: center;'>
Ce site utilise des cookies pour
améliorer votre navigation. En continuant, vous en acceptez
l'utilisation.
<a href='javascript:void(0);' onclick='PonerCookie();' style='padding:4px;background:#cfe2f3;text-decoration:none;color:#3d85c6;'><b>OK</b></a>
<a href='https://www.google.com/intl/fr_fr/policies/technologies/types/'
style='padding-left:5px;text-decoration:none;color:#3d85c6;' target='_blank'>En savoir plus</a>
</div>
J'ai utilisé un code couleur pour vous détailler tout ce qui peut-être personnalisable :
top : Permet de choisir l'orientation de la barre "top" pour en haut ou écrivez "bottom" (sans guillemet) pour que la barre s'affiche en bas.
background:
#f3f3f3 : Permet de choisir le fond de couleur de la barre. Ceci "#f3f3f3" est le code couleur à changer.
color:#3d85c6 : Permet de changer la couleur de l'écriture de la barre.
center;'>Ce site utilise des cookies pour
améliorer votre navigation. En continuant, vous en acceptez
l'utilisation.<a href : Vous pouvez changer le texte explicatif.
background:#cfe2f3 : Permet de changer la couleur de fond de la case "OK".
color:#3d85c6 : Permet de changer la couleur de l'écriture de la case "OK".
OK : Vous pouvez changer le texte de la case "OK", et mettre "J'accepte" par exemple.
color:#3d85c6 : Permet de changer la couleur de l'écriture de l'onglet "En savoir plus"
En savoir plus : Vous pouvez changer le texte "En savoir plus" par autre chose.
Étape 6 :
Pour personnaliser les couleurs vous devez toujours mettre " # " suivis de six chiffres ou lettres. Pour consulter les codes des différentes couleurs, cliquez ici (et ne regarder que les codes hexadécimaux) ou juste là.
Codes des couleurs les plus répandues le noir (#222222), le blanc (#ffffff), le transparent écrire "transparent" (pas de #), le rouge (#ff0000), le jaune (#ffff00), le orange (#ff9900), le vert (#00ff00), le bleu foncé (#0000ff) et le violet (#9900ff).
Je trouve personnellement que le mieux est de rester dans des teintes basiques (noir/blanc) ou en accord avec le blog.
J’espère
que ce tutoriel vous aidera !
Sources : Cnil.fr
A bientôt ! Samia