5.9.15

Cómo personalizar el anuncio de cookies en 5 minutos | Tutorial



¡Hola a todos, lectores! Como os dije hace un par de días, voy a iniciar una nueva sección, que irá sobre TUTORIALES. Es todo un experimento para mí, puesto que no sé cómo irá ni qué repercusión tendrá. Pero es mejor pedir perdón que permiso, ¿no? ¡Allá vamos!

Como ya sabréis, hace tiempo que Google ha puesto un anuncio sobre el uso de cookies. Seguro que pensáis que este anuncio es demasiado grande y feo, y muchas veces ocupa casi la totalidad de la cabecera del blog, que tanto nos ha costado crear. Antes se podía quitar, pero ahora Google obliga a todos los blogs a anunciar que utilizan cookies, y si no lo tenemos, nos puede caer una multa.




Por ello, nuestro primer tutorial será, tal y como dice el título, sobre cómo modificar la BARRA OBLIGATORIA DE COOKIES.


Recordad que antes de cambiar nada, lo mejor es hacer una copia de seguridad del blog o, en su defecto, crear un blog de pruebas y probarlo allí.


El primer paso para modificar la barra es ELIMINARLA. Sí, como leéis, vamos a eliminar la anterior barra.
1.  Entra en tu plantilla HTML. Haz click dentro de la plantilla para poder activar el buscador interno, y abre el buscador pulsando Control + F.

2. Tienes que buscar </head> y justo antes debes pegar el siguiente código:

<script>cookieChoices = {};</script>

3. Comprueba en la Vista Previa que todo está bien (es decir, que ya no sale la barra) y guarda los cambios.



¡Ya hemos eliminado la barra! Si te quieres arriesgar a no poner la barrita informativa, este es lo único que tienes que hacer. Pero recuerda que aunque tú no veas el anuncio, los lectores sí lo harán. Por ello recomiendo dejar la barra de cookies y modificarla para que esté acorde con tu blog, y para ello vamos a teclear unos cuantos códigos más:
1. Tal y como hemos hecho antes, entra en tu plantilla HTML. Haz click dentro de la plantilla para poder activar el buscador interno, y abre el buscador pulsando Control + F.

2. Tienes que buscar </body> y justo antes debes pegar el siguiente código:

<!--Inicio barra cookies-->
<div id='barracookies' style='display:none; position:fixed; left:0px; right:0px; top:0px; width:100%; min-height:30px; background: #415A5E; color:#ffffff; z-index: fcaaaa;'>
<div style='width:100%; position:absolute; padding-left:4px; font-family:verdana; font-size:12px; top:25%; text-align:center;'>
<span>Este sitio emplea cookies de Google. Si continúas navegando consideramos que aceptas el uso de cookies.</span>
<a href='javascript:void(0);' onclick='PonerCookie();' style='padding:5px;background:#fafbf3; text-decoration:none;color: #415A5E; border-radius:3px;'><b>OK</b></a>
<a href='https://www.google.com/policies/technologies/cookies/' rel='nofollow' style='padding-left:5px; text-decoration:none; color:#ffffff;' target='_blank'>Más información</a>
</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;barracookies&quot;).style.display=&quot;block&quot;;
}
function PonerCookie(){
 setCookie(&#39;aviso&#39;,&#39;1&#39;,365);
 document.getElementById(&quot;barracookies&quot;).style.display=&quot;none&quot;;
}
</script>
<!--Fin barra cookies-->



Con este código, la barra de las cookies os quedaría tal y como yo la tengo. Pero evidentemente todo se puede editar. A continuación os pongo las partes más importantes que necesitaréis cambiar para acomodarla a vuestro blog:


1. Lo que está negrita COLOR ROJO son las características de la barra de cookies:

o   Top: es donde irá la barra. En este caso, está a 0 píxeles de la barra superior del blog. Si tenéis el menú en la barra superior del blog, os recomiendo cambiarlo, porque si no lo tapará. Para poner la barra de cookies en la barra inferior solo tenéis que cambiar el valor top por bottom, y así quedará abajo. Cuantos más píxeles le añadáis, más separado estará de la barra inferior o de la superior.
o   min-height: la altura de la barra en píxeles. Yo creo que la altura a la que está ya es la correcta, pero si ponéis la fuente de la letra más grande, vais a tener que cambiarla
o   Background: el color de fondo de la barra
o   Color: el color del texto
o   Font-family: la fuente del texto
o   Font-size: el tamaño de la letra
o Text-align: es la alineación del texto. Ahora está centrado (center) pero también podéis alinearlo a la derecha (right)  o a la izquierda (left)
2. El texto EN NEGRITA (Este sitio emplea cookies de Google…) es el texto que se verá en el aviso. Podéis modificarlo a vuestro gusto, para que sea más corto o más simple, siempre que notifiquéis el uso de cookies de Google en el blog.

Asimismo, también se puede modificar el OK y el Más información: podéis poner lo que queráis, como “De acuerdo/Acepto” o “Leer más/Más info.” ¡Vosotros tenéis el poder!

3. El texto que está en negrita COLOR AZUL son las características del recuadro del OK, y podéis cambiar lo siguiente:
o   Background: el fondo del recuadro
o   Color: el color del texto “OK”
o   Border-radius: la redondez de los bordes del recuadro
4. Finalmente, el texto en negrita COLOR VERDE es la característica del color del texto Más información. Este texto tiene un enlace a la página de uso de cookies de Google, que creo que es mejor dejar.
COSAS A TENER EN CUENTA:

  • Os recomiendo tener a mano el código de los colores que queréis poner, código que podéis buscar en la página HTML COLOR CODES, donde también podréis buscar el color por su nombre
  • Si no os sale el mensaje de las cookies, es porque en algún momento le habéis dado a aceptar en vuestro blog o en cualquier otro, por lo que el mensaje se borra hasta que volvéis a tener el historial del navegador limpio y el anuncio se restituya (o al menos así ocurre en mi ordenador)
  • Recordad que si cambiáis algo en la plantilla, siempre podéis ir mirando en la Vista Previa como va quedando

¡Y esto es todo! Si habéis seguido estos pasos, ahora tenéis el mensaje de las cookies totalmente a juego con vuestro blog.

Si tenéis alguna duda, estaré encantada de ayudaros, así como también estaré encantada de ver cómo han quedado vuestros mensajes :D Espero que os haya gustado este primer tutorial. ¡Nos leemos!




18 comentarios:

  1. La verdad es que la barra esa no me gusta... pero ya que no se puede quitar, supongo que editarla no estaría mal... gracias por el tutorial! ^^

    ResponderEliminar
  2. La he ido editando mientras leía la entrada, es genial! Ya lo he puesto y prefiero eso que lo que había antes hahaha me encanta que hayas abierto esta sección ya que yo no tengo ni idea de html
    Un saludo!!

    ResponderEliminar
  3. ¡¡Muchas gracias por el tutorial!!
    Ha venido genial porque encontrarse esa barra gorda molestaba ya que a veces impedía ver bien los blogs,


    Besos ^^

    ResponderEliminar
  4. ¡Hola, Cristina!
    Pues la barra esta me da un poco igual, pero sí que es verdad que es muy grande por defecto -_-" Ahora no me pilla bien, pero cuando tenga un rato me leo entero el tuto y algún apaño le haré :D

    ResponderEliminar
  5. ¡Hola!
    Muy buen y útil tutorial, la verdad es que es demasiado grande la barra. Ya la podían haber hecho más pequeñita de primeras ¬¬.
    Un beso

    ResponderEliminar
  6. GRACIAS POR ESTA ENTRADA! Para mi muy necesaria, y la aplicaré cuando tenga tiempo para ponerme con ello. Me la dejo guardada en marcadores, mil gracias. Un besin^^

    ResponderEliminar
  7. Hola :)
    Me apunto tu entrada para hacerlo todo más adelante (cuando no me dé pereza tocar cosas del blog xD). Se agrade mucho este tipo de entradas y estaré pendiente de tus siguientes tutoriales.
    Saludos.

    ResponderEliminar
  8. ¡Hola! Gracias por el tutorial :D De verdad me parece muy útil y seguro que lo pongo en práctica :D
    Un besazo, guapa.

    ResponderEliminar
  9. Interesante, muy bueno esto de los tutoriales. La barra es un rollo, la verdad, aunque me gusta como la tienes tú. A ver si saco un rato y la modifico yo también.
    Besos!

    ResponderEliminar
  10. Oh, este tuto viene muy pero que muy bien. Odio la barra que te ocupa media pantalla >.<
    Lo probaré ;)

    Un beso ^^

    ResponderEliminar
  11. Hola, te hemos nominado a unos premios: http://lectorasanonimas2014.blogspot.com.es/2015/09/premios-acumulados.html

    ResponderEliminar
  12. Gracias por el tutorial tan detallado, me ha venido de lujo porque no tenía ni idea de como ponerlo a mi gusto ;_;
    Un saludo <3

    ResponderEliminar
  13. Hola! (✿◠‿◠)
    Me encantó el tutorial, no sabía que se podía hacer esto :3
    Besos.

    ⏃♥ Arya ♥⏃

    ResponderEliminar
  14. ¡Sí! Me encantan los tutoriales porque aprendo mucho con ellos, por favor continua con esto :). Ahora, sobre la barra de cookies, es algo nuevo para mí. Estuve ausente durante unas semanas y cuando regreso, veo que varios blogs la tienen. En un principio creí que era algo a elección porque a mí no me salía nada pero ahora entiendo mejor lo que está sucediendo, no obstante, a mí no me aparece la barra ni entrando como si fuera lector a mi propio blog :c
    Igual no importa, que hago esto por si las dudas de que sí salga y no pueda verla por otra razón. Gracias por el tutorial <3

    ResponderEliminar
  15. ¡Hola guapa!
    Cuando vi tu post pensé: tengo que hacerlo :3
    Y como yo soy muy manca con esto del html le pedí ayuda a una amiga que de paso también lo ha puesto.
    En serio nos ha ayudado muchísimo ^^
    Muchas gracias!

    ResponderEliminar
  16. La verdad es que la barra normal es feísima, gracias por los datos que das, he podido cambiar la mía y al menos hacer que no sea tan exagerada.

    ¡Saludos!

    ResponderEliminar
  17. me sale esto
    Se ha producido un error al analizar el XML, línea 2430, columna 2: The markup in the document following the root element must be well-formed.

    ResponderEliminar
  18. me sale esto
    Se ha producido un error al analizar el XML, línea 2430, columna 2: The markup in the document following the root element must be well-formed.

    ResponderEliminar

Muchas gracias por tomarte el tiempo de comentar. Un blog se alimenta de tus comentarios. Y todos los comentarios son una gran alegría para mí ^^