Mettre un bandeau cookies sur ton blog [tuto]
Aujourd'hui on va parler de blog. Dans ce tuto tu vas apprendre comment intégrer un bandeau qui prévient tes lecteurs que ton blog utilise des cookies (il parait que c'est devenu obligatoire). J'ai fait ce tuto pour blogger, mais je pense qu'il peut facilement ce transposer sur d'autres plateformes.
Tu dois d'abord aller dans ton code HTML en passant par ce chemin: Modèle /Modifier le code HTML. (Pour les autres plateformes, il suffit de suivre le chemin adapté)
(Clique sur les photos pour les voir en plus grand)
Tu dois rechercher la ligne </body>, ( pour le trouver fait ctrl + F sur ton clavier )
Copie-colle, le code ci-dessous juste au-dessus de </body>
<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;'>
Mon blog utilise des cookies pour améliorer votre navigation. En continuant votre navigation, vous en acceptez l'utilisation
<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>
Pour changer les différentes couleurs qui compose le bandeau, il te suffit de trouver les mots correspondants ( background ou color). Je te conseille d'aller sur ce site pour trouver la couleur que tu souhaite, ensuite il faut copier le chiffre après le # de la couleur correspondante et le mettre au bon endroit:
Changer le fond du bandeau background: et de changer # ton code couleur.
Changer la couleur du texte : color:# ton code couleur.
Changer le fond du OK : background:# ton code couleur.
Ensuite, il ne te reste plus qu'a faire un aperçu, si cela te convient, tu n'as plus qu'a enregistrer les modifications!
Voila, j’espère avoir été assez claire, si tu as un problème, n'hésites pas à laisser un commentaire!
Plus d'articles de ce type ça te plairais?
LES ÉTAPES SUR BLOGGER:
Etape 1
Tu dois d'abord aller dans ton code HTML en passant par ce chemin: Modèle /Modifier le code HTML. (Pour les autres plateformes, il suffit de suivre le chemin adapté)
(Clique sur les photos pour les voir en plus grand)
Etape 2
Tu dois rechercher la ligne </body>, ( pour le trouver fait ctrl + F sur ton clavier )
Etape 3
Copie-colle, le code ci-dessous juste au-dessus de </body>
<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;'>
Mon blog utilise des cookies pour améliorer votre navigation. En continuant votre navigation, vous en acceptez l'utilisation
<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>
Etape 4
Pour changer les différentes couleurs qui compose le bandeau, il te suffit de trouver les mots correspondants ( background ou color). Je te conseille d'aller sur ce site pour trouver la couleur que tu souhaite, ensuite il faut copier le chiffre après le # de la couleur correspondante et le mettre au bon endroit:
Changer le fond du bandeau background: et de changer # ton code couleur.
Changer la couleur du texte : color:# ton code couleur.
Changer le fond du OK : background:# ton code couleur.
(comme tu l'aura peut être remarqué, j'ai surligné chaque zone correspondante dans le code précédent)
Ensuite, il ne te reste plus qu'a faire un aperçu, si cela te convient, tu n'as plus qu'a enregistrer les modifications!
Voila, j’espère avoir été assez claire, si tu as un problème, n'hésites pas à laisser un commentaire!
Plus d'articles de ce type ça te plairais?
52 commentaires
Super article, il va m'être très utile ! :D
RépondreSupprimerMerci beaucoup pour cet article, je devais justement le rajouter, voilà qui est fait :D j'ai modifié un peu la taille pour que le bandeau soit un peu moins imposant. Dois-je te citer quelque part ? :)
RépondreSupprimerTu fait comme tu veux! Tu peux mettre l'article en lien si tu veux
SupprimerSuper article,! Simple et très clair. Merci ;-)
RépondreSupprimermerci énormément, j'adore cette présentation et le tuto est super simple <3
RépondreSupprimerBonjour. Je viens de decouvrir ton blog et j'ai parcouru plusieurs articles. Vraiment top. Cependant, si je peux me permettre, pense parfois a relire l'article avant diffusion j'ai trouvè bien souvent des passages un peu brouillon (manque des mots, repetitions ...)
RépondreSupprimerJe suis insomniaque et j'écris mes articles le plus souvent, la nuit, alors il arrive que malgré mes relectures, il manque des mots.
SupprimerOhlala merci beaucoup pour ce tuto super simple, j'avais essayé d'en installer un quand il y avait eu un flot d'articles alarmants sur les obligations, les cookies ... mais je n'avais pas trouvé de tutos clairs et précis et j'avais laissé tomber! Grâce à toi c'est chose faite maintenant ;)
RépondreSupprimerde rien, j'ai plein d'autre tuto en stock, si ça interesse mes lectrices, je pense faire ce genre d'article plus souvent.
SupprimerRohlalala, génial merci beaucoup. J'ai repensé à ton article juste après celui de Beautifullaw sur la loi et les blogs ;-).
RépondreSupprimerC justement son article qui m'as fait penser que je pouvais faire partager mes petites connaissances et trouvaille
SupprimerTon article me sauve la vie, je n'avais strictement aucune idée de comment faire et en 5min c'est fait ! Mille mercis :)
RépondreSupprimerDe rien!
SupprimerErf, je vais avoir du boulot à la rentrée au travail moi... Merci pour le texte officiel sur les Cookie. Pfff, je ne comprends pas cette mesure, tous les sites internet en ont. Quelque chose m'échappe.
RépondreSupprimerEnfin soit, merci pour ton article, je le partagerai en même temps que j'expliquerai pour Wordpress moi. :D
++
C vrai que c'est vraiment chiant, surtout sur un blog, ou on ne récupére pas vraiment d'info...
SupprimerMerci beaucoup pour ton article qui m'a été bien utile! Je viens tout juste de mettre ma barre!
RépondreSupprimerContente que cela te sert!
SupprimerMerci pour le tuto, je n'avais vraiment aucune idée de comment mettre ma barre !
RépondreSupprimerEt oui, ce genre d'articles me plaît beaucoup !
J'en ferai d'autre surement
SupprimerC'est bon c'est mis en place, merci pour ce tuto ! J'avoue que comme beaucoup d'autres je suis perplexe par rapport à toutes ces obligations qui viennent maintenant s'appliquer aux blogs perso ...
RépondreSupprimerA partir du moment où l'on surfe sur le web on sait déjà que des infos sur notre navigation sont collectées, sinon on se contente de la presse écrite ! Bref ...
Pour ceux qui ne savait pas, là au moins ils sont au courant ^^
SupprimerMerci beaucoup pour cet article. Je viens de mettre le code en place, personnalisé pour mon blog et il marche parfaitement. :)
RépondreSupprimercontente que cela te soit utile!
SupprimerSuper ce tuto, je cherchais depuis un petit moment. Par contre, sais-tu comment faire pour mettre la barre en haut du blog et non en bas.
RépondreSupprimerBisou
Tu remplace"bottom" par top!
SupprimerMerciiii mille fois pour ce tuto très simple mais je n'aurais jamais pu faire ça toute seule sans ton aide !
RépondreSupprimerBisous
De rien!
SupprimerGénial par contre j'ai voulu changer le coloris de la bande et la cela n'apparaissait plus du tout alors tans pis elle restera rose.
RépondreSupprimerAs tu bien modifié le bon code couleur?
SupprimerBonjour ! Je suis tombée par hasard sur ton blog en faisant une recherche pour installer un bandeau cookie sur mon blog ! Et ouf, enfin un joli blog qui donne envie de lire ! Merci déjà pour ça ! ^^
RépondreSupprimerTu pourras sûrement m'aider... Je ne sais pas comment aller dans le fameux code... :$ ("Tu dois d'abord aller dans ton code HTML en passant par ce chemin: Modèle /Modifier le code HTML.") Il faut un logiciel ou ça se trouve sur le site ? Après je suis sur Wordpress, et non pas Blogger.. Ca change peut-être la donne !
coucou,
RépondreSupprimerJe suis tombée sur ton article pour faire la manip mais au final, je ne suis pas sur que j'utilise des cookies..Je ne trouve pas la formulle body ni cookie sur mon code HTML.
C'est possible que j'en utilise pas sous blogger?
Merci de ton aide!
Bises Aurélie
Euh non normalement tu dois avoir un body, recherche le avec ctrl+ F
SupprimerBah non, enfin j'en ai 3 à la suite mais il ressemble pas au tien avec </..
SupprimerMerci beaucoup pour ce tuto ! xx
RépondreSupprimerDe rien
SupprimerMerci beaucoup pour le tuto !
RépondreSupprimerde rien!
SupprimerJe te remercie, c'était exactement ce dont j'avais besoin ! je l'ai installé sur mon blog, donc encore merci !
RépondreSupprimerDe rien!
SupprimerJe n'ai qu'une chose à dire !
RépondreSupprimerMerci un million de fois pour ce tuto ! J'ai enfin la barre obligatoire sur mon blog !!!!! C'est vraiment adorable d'avoir pris le temps d'expliquer tout ça aussi bien !!!!
Merciiiiii !!
Ravi que ce tuto t'ai servi...
SupprimerMerci pour ce tuto, c'est PAR-FAIT !
RépondreSupprimerBandeau installé ! :D
Bonjour.
RépondreSupprimerJ'ai cherché dans mon code, mais je n'ai pas de balise en question
Comment puis-je installer le bandeau svp?
Merci.
http://www.lejournaldeprisci.com
Bonjour !
RépondreSupprimerSuper article, mille mercis pour ton code. Le seul à ce jour qui marche sur mon blog http://www.lemiroirauxessences.com !
Je reviendrai...
Bonne soirée,
A bientôt
Bonjour,
RépondreSupprimerCurieux, hier soir je l'ai installé sur mon blog, il fonctionnait très bien, on voyait la barre en bas, ce matin, la barre a disparu !
Chez moi le code ne tient pas,
Est-ce que tu saurais pourquoi ?
Bonne journée à toi.
Gen
Je suis aller sur ton blog, la bannière est toujours présente et fonctionne bien, toi tu ne le vois plus car tu as mis ok, mais tes nouveaux visiteurs l'auront eux!
SupprimerCoucou, je n'ai pas la balises body, je ne la trouve pas, même en faisant recherche avec Ctrl+F ;/
RépondreSupprimerCoucou,
RépondreSupprimerFranchement je te remercie pour ton super tuto, Ma barre est toute belle grâce à toi. Par contre, je n'arrive pas enlever celle du haut, elle ne veut pas partir :/
Merci beaucoup pour tes explications très simple !
Bisous, bonne soirée ♥
merci pour ce tuto je viens d'installer ma barre de cookies!
RépondreSupprimerMille mercis, tes explications claires m'ont aidé à installer ma barre de cookies, merci!
RépondreSupprimerHello ! Tout d'un coup panique ! Mon joli template n'a pas le bandeau des cookies ... snif, snouf ... Et je suis arrivée ici :-). J'ai copié/collé le colle. Miracle ! La barre est située en bas et dans mes couleurs. Mille mercis !!!
RépondreSupprimerMerciiiiii !!! J'ai bataillé avec plusieurs tuto qui ne fonctionnaient pas et toi, juste copier coller et ça marche ! Merci mille fois !
RépondreSupprimerTon avis m’intéresse!