Mettre un bandeau cookies sur ton blog [tuto]

By 18.12.14 , ,

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.



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(&quot; &quot; + c_name + &quot;=&quot;);
 if (c_start == -1){
  c_start = c_value.indexOf(c_name + &quot;=&quot;);
 }
 if (c_start == -1){
  c_value = null;
 }else{
  c_start = c_value.indexOf(&quot;=&quot;, c_start) + 1;
  var c_end = c_value.indexOf(&quot;;&quot;, 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) ? &quot;&quot; : &quot;; expires=&quot;+exdate.toUTCString());
 document.cookie=c_name + &quot;=&quot; + c_value;
}
if(getCookie(&#39;aviso&#39;)!=&quot;1&quot;){
 document.getElementById(&quot;barritaloca&quot;).style.display=&quot;block&quot;;
}
function PonerCookie(){
 setCookie(&#39;aviso&#39;,&#39;1&#39;,365);
 document.getElementById(&quot;barritaloca&quot;).style.display=&quot;none&quot;;
}
</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?


Tu aimeras peut-être aussi

51 commentaires

  1. Merci 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épondreSupprimer
    Réponses
    1. Tu fait comme tu veux! Tu peux mettre l'article en lien si tu veux

      Supprimer
  2. merci énormément, j'adore cette présentation et le tuto est super simple <3

    RépondreSupprimer
  3. Bonjour. 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épondreSupprimer
    Réponses
    1. Je suis insomniaque et j'écris mes articles le plus souvent, la nuit, alors il arrive que malgré mes relectures, il manque des mots.

      Supprimer
  4. Ohlala 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épondreSupprimer
    Réponses
    1. de rien, j'ai plein d'autre tuto en stock, si ça interesse mes lectrices, je pense faire ce genre d'article plus souvent.

      Supprimer
  5. Rohlalala, génial merci beaucoup. J'ai repensé à ton article juste après celui de Beautifullaw sur la loi et les blogs ;-).

    RépondreSupprimer
    Réponses
    1. C justement son article qui m'as fait penser que je pouvais faire partager mes petites connaissances et trouvaille

      Supprimer
  6. Ton article me sauve la vie, je n'avais strictement aucune idée de comment faire et en 5min c'est fait ! Mille mercis :)

    RépondreSupprimer
  7. Erf, 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.
    Enfin soit, merci pour ton article, je le partagerai en même temps que j'expliquerai pour Wordpress moi. :D
    ++

    RépondreSupprimer
    Réponses
    1. C vrai que c'est vraiment chiant, surtout sur un blog, ou on ne récupére pas vraiment d'info...

      Supprimer
  8. Merci beaucoup pour ton article qui m'a été bien utile! Je viens tout juste de mettre ma barre!

    RépondreSupprimer
  9. Merci pour le tuto, je n'avais vraiment aucune idée de comment mettre ma barre !
    Et oui, ce genre d'articles me plaît beaucoup !

    RépondreSupprimer
  10. C'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 ...
    A 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 ...

    RépondreSupprimer
    Réponses
    1. Pour ceux qui ne savait pas, là au moins ils sont au courant ^^

      Supprimer
  11. Merci beaucoup pour cet article. Je viens de mettre le code en place, personnalisé pour mon blog et il marche parfaitement. :)

    RépondreSupprimer
  12. Super 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.
    Bisou

    RépondreSupprimer
  13. Merciiii mille fois pour ce tuto très simple mais je n'aurais jamais pu faire ça toute seule sans ton aide !
    Bisous

    RépondreSupprimer
  14. Gé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épondreSupprimer
  15. Bonjour ! 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 ! ^^
    Tu 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 !

    RépondreSupprimer
  16. coucou,
    Je 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

    RépondreSupprimer
    Réponses
    1. Euh non normalement tu dois avoir un body, recherche le avec ctrl+ F

      Supprimer
    2. Bah non, enfin j'en ai 3 à la suite mais il ressemble pas au tien avec </..

      Supprimer
  17. Je te remercie, c'était exactement ce dont j'avais besoin ! je l'ai installé sur mon blog, donc encore merci !

    RépondreSupprimer
  18. Je n'ai qu'une chose à dire !
    Merci 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 !!

    RépondreSupprimer
  19. Merci pour ce tuto, c'est PAR-FAIT !
    Bandeau installé ! :D

    RépondreSupprimer
  20. Bonjour.
    J'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

    RépondreSupprimer
  21. Bonjour !
    Super 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

    RépondreSupprimer
  22. Bonjour,
    Curieux, 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

    RépondreSupprimer
    Réponses
    1. 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!

      Supprimer
  23. Coucou, je n'ai pas la balises body, je ne la trouve pas, même en faisant recherche avec Ctrl+F ;/

    RépondreSupprimer
  24. Coucou,
    Franchement 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 ♥

    RépondreSupprimer
  25. merci pour ce tuto je viens d'installer ma barre de cookies!

    RépondreSupprimer
  26. Mille mercis, tes explications claires m'ont aidé à installer ma barre de cookies, merci!

    RépondreSupprimer
  27. Hello ! 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épondreSupprimer

Ton avis m’intéresse!