{"id":2748,"date":"2014-09-08T14:50:34","date_gmt":"2014-09-08T12:50:34","guid":{"rendered":"http:\/\/intercambia.net\/temas\/?p=2748"},"modified":"2014-09-08T17:42:30","modified_gmt":"2014-09-08T15:42:30","slug":"como-configurar-la-posicion-de-cookiechoices-js","status":"publish","type":"post","link":"https:\/\/www.intercambia.net\/temas\/index.php\/como-configurar-la-posicion-de-cookiechoices-js\/","title":{"rendered":"C\u00f3mo configurar la posici\u00f3n de cookiechoices.js"},"content":{"rendered":"<p><em>Si quieres pasar directamente a la informaci\u00f3n que explica c\u00f3mo cambiar la posici\u00f3n de la barra de alerta de cookies de Google <a href=\"#cookiechoices.js\">clica aqu\u00ed<\/a>. Inicio del art\u00edculo:<\/em><\/p>\n<p>Recientemente Google public\u00f3 un peque\u00f1o c\u00f3digo (<a href=\"http:\/\/www.cookiechoices.org\/\">cookiechoices.js<\/a>) que permite a\u00f1adir, f\u00e1cilmente, la alerta de que tu sitio web usa Cookies. <\/p>\n<p>Para poner este c\u00f3digo y que se muestre a tus usuarios has de poner el archivo <strong>cookiechoices.js<\/strong> en la carpeta ra\u00edz de tu web. Descomprime el zip que te descargas y dale permisos de lectura al archivo .js que viene dentro (seguramente con el comando chmod 755 \/ruta\/a\/tu\/web\/cookiechoices.js) y despu\u00e9s has de a\u00f1adir un c\u00f3digo similar a este en todas tus p\u00e1ginas:<\/p>\n<blockquote><p>\n<code>&lt;script src=\"\/cookiechoices.js\">&lt;\/script><br \/>\n&lt;script><br \/>\n  document.addEventListener('DOMContentLoaded', function(event) {<br \/>\n    cookieChoices.showCookieConsentBar('Al usar los servicios de esta web entendemos que aceptas nuestra pol\\u00edtica de Cookies',<br \/>\n      'Entendido', 'M\\u00e1s informaci\\u00f3n', 'http:\/\/intercambia.net\/temas\/cookies#politica-cookies');<br \/>\n  });<br \/>\n&lt;\/script><\/code>\n<\/p><\/blockquote>\n<p>Seguramente tu sitio web funciona con plantillas y a\u00f1adiendo este c\u00f3digo a un archivo (por ejemplo el footer.php) se ver\u00e1 en toda tu web. Recuerda poner el texto que creas conveniente y poner tu url (no la de intercambia.net)<\/p>\n<p><center><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/intercambia.net\/temas\/wp-content\/uploads\/2014\/09\/cookie-alert.png\" alt=\"cookie-alert\" width=\"500\" height=\"360\" class=\"alignnone size-full wp-image-2760\" srcset=\"https:\/\/www.intercambia.net\/temas\/wp-content\/uploads\/2014\/09\/cookie-alert.png 500w, https:\/\/www.intercambia.net\/temas\/wp-content\/uploads\/2014\/09\/cookie-alert-300x216.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/center><\/p>\n<p>Quiz\u00e1s te preguntes que son los car\u00e1cteres raros que ves en el texto de arriba, estos sirven para poner acentos en c\u00f3digos javascript. Estas son las equivalencias entre javascript y lenguaje humano&#8230;:<\/p>\n<blockquote><p>\n\\u00e1 -> \u00e1<br \/>\n\\u00e9 -> \u00e9<br \/>\n\\u00ed -> \u00ed<br \/>\n\\u00f3 -> \u00f3<br \/>\n\\u00fa -> \u00fa<br \/>\n\\u00c1 -> \u00c1<br \/>\n\\u00c9 -> \u00c9<br \/>\n\\u00cd -> \u00cd<br \/>\n\\u00d3 -> \u00d3<br \/>\n\\u00da -> \u00da<br \/>\n\\u00f1 -> \u00f1<br \/>\n\\u00d1 -> \u00d1\n<\/p><\/blockquote>\n<p>Por \u00faltimo te explico <strong id=\"cookiechoices.js\">c\u00f3mo cambiar la posici\u00f3n<\/strong> que define por defecto cookiechoices.js (pegado arriba). Quiz\u00e1s la barra tapa alg\u00fan men\u00fa y prefieres que est\u00e9 abajo en vez de tocar la hoja de estilos de tu web para cambiar el tama\u00f1o de ese men\u00fa, por ejemplo. En todos los casos tendr\u00e1s que abrir el archivo cookiechoices.js con un editor. <\/p>\n<p>Si quieres que la barra en vez de estar pegada arriba est\u00e9 <strong>pegada abajo y que no se mueva<\/strong>. Es decir, que cuando el usuario que visita tu web la vea siempre pegada a la parte de abajo de su navegador, haga scroll o no. Entonces has de cambiar esta l\u00ednea (la n\u00famero 35):<\/p>\n<blockquote><p>      var butterBarStyles = &#8216;position:fixed;width:100%;background-color:#eee;&#8217; +<br \/>\n          &#8216;margin:0; left:0;<strong><font color=red>top<\/font><\/strong>:0;padding:4px;z-index:1000;text-align:center;&#8217;;\n<\/p><\/blockquote>\n<p>Por esta otra:<\/p>\n<blockquote><p>      var butterBarStyles = &#8216;position:fixed;width:100%;background-color:#eee;&#8217; +<br \/>\n          &#8216;margin:0; left:0;<strong><font color=green>bottom<\/font><\/strong>:0;padding:4px;z-index:1000;text-align:center;&#8217;;\n<\/p><\/blockquote>\n<p>Por \u00faltimo, si lo que quieres es que la <strong>barra de alerta est\u00e9 arriba de tu web fijada<\/strong>, es decir, que cuando el usuario se desplace hacia abajo la barra se quede en la parte de arriba de tu web y \u00e9l la pierda de vista en el navegador, entonces has de cambiar este c\u00f3digo (l\u00ednea 34):<\/p>\n<blockquote><p>      var butterBarStyles = &#8216;position:<strong><font color=red>fixed<\/font><\/strong>;width:100%;background-color:#eee;&#8217; +<br \/>\n          &#8216;margin:0; left:0;top:0;padding:4px;z-index:1000;text-align:center;&#8217;;\n<\/p><\/blockquote>\n<p>Por este: <\/p>\n<blockquote><p>      var butterBarStyles = &#8216;position:<strong><font color=green>absolute<\/font><\/strong>;width:100%;background-color:#eee;&#8217; +<br \/>\n          &#8216;margin:0; left:0;top:0;padding:4px;z-index:1000;text-align:center;&#8217;;\n<\/p><\/blockquote>\n<p>Hay que tener en cuenta que dependiendo de la hoja de estilos de tu sitio web o del navegador estas configuraciones pueden no hacer lo previsto.<\/p>\n<p>Ahora, para acabar, lo que queda es que escribas tu aviso de cookies y enlaces ese texto desde el c\u00f3digo de arriba del todo que pusiste en tu web.<\/p>\n<p>Suerte!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si quieres pasar directamente a la informaci\u00f3n que explica c\u00f3mo cambiar la posici\u00f3n de la barra de alerta de cookies de Google clica aqu\u00ed. Inicio del art\u00edculo: Recientemente Google public\u00f3 un peque\u00f1o c\u00f3digo (cookiechoices.js) que permite a\u00f1adir, f\u00e1cilmente, la alerta de que tu sitio web usa Cookies. Para poner este c\u00f3digo y que se muestre [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[51],"tags":[824],"class_list":["post-2748","post","type-post","status-publish","format-standard","hentry","category-internet","tag-cookies"],"_links":{"self":[{"href":"https:\/\/www.intercambia.net\/temas\/index.php\/wp-json\/wp\/v2\/posts\/2748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.intercambia.net\/temas\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.intercambia.net\/temas\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.intercambia.net\/temas\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.intercambia.net\/temas\/index.php\/wp-json\/wp\/v2\/comments?post=2748"}],"version-history":[{"count":14,"href":"https:\/\/www.intercambia.net\/temas\/index.php\/wp-json\/wp\/v2\/posts\/2748\/revisions"}],"predecessor-version":[{"id":2763,"href":"https:\/\/www.intercambia.net\/temas\/index.php\/wp-json\/wp\/v2\/posts\/2748\/revisions\/2763"}],"wp:attachment":[{"href":"https:\/\/www.intercambia.net\/temas\/index.php\/wp-json\/wp\/v2\/media?parent=2748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.intercambia.net\/temas\/index.php\/wp-json\/wp\/v2\/categories?post=2748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.intercambia.net\/temas\/index.php\/wp-json\/wp\/v2\/tags?post=2748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}