Este sitio web usa cookies, puedes ver la política de cookies, aquí -
Política de cookies +
Código

Código

En Pressero debes insertar todo el código en SITES --> CONFIGURACIÓN --> SEO/HEAD --> HEAD

El código tiene tres partes y se ha de desarrollar una página donde expondremos nuestra política de cookies.

La primera parte es un código JavaScript que podemos incluir entre el código HEAD de nuestra página web, o mejor aún, incluirlo en los ficheros .js que nuestra web utiliza.

  1. <!-- SCRIPT CONTROL DE COOKIES -->
  2. <script type="text/javascript">
  3. function controlcookies() {
  4. // si variable no existe se crea (al clicar en Aceptar)
  5. localStorage.controlcookie = (localStorage.controlcookie || 0);
  6.  
  7. localStorage.controlcookie++; // incrementamos cuenta de la cookie
  8. cookie1.style.display='none'; // Esconde la política de cookies
  9. }
  10. </script>

La segunda parte incluye un código CSS que podemos variar para adaptarlo a la estética de nuestro portal y que hace la animación del aviso. He hecho especialmente complejo este código incluyendo algunas funcionalidades de animación de HTML5 pero cualquier webmaster podrá adaptarlo de forma sencilla. Este código también lo incluiremos en el HEAD de la página o bien, mejor, en el CSS de nuestra web.

  1. <!--- Codigo para la política de cookies-->
  2. <style type="text/css">
  3.  
  4. /* CSS para la animación y localización de los DIV de cookies */
  5. @keyframes desaparecer
  6. {
  7. 0% {bottom: 0px;}
  8. 80% {bottom: 0px;}
  9. 100% {bottom: -50px;}
  10. }
  11. @-webkit-keyframes desaparecer /* Safari and Chrome */
  12. {
  13. 0% {bottom: 0px;}
  14. 80% {bottom: 0px;}
  15. 100% {bottom: -50px;}
  16. }
  17. @keyframes aparecer
  18. {
  19. 0% {bottom: -38px;}
  20. 10% {bottom: 0px;}
  21. 90% {bottom: 0px;}
  22. 100% {bottom: -38px;}
  23. }
  24. @-webkit-keyframes aparecer /* Safari and Chrome */
  25. {
  26. 0% {bottom: -38px;}
  27. 10% {bottom: 0px;}
  28. 90% {bottom: 0px;}
  29. 100% {bottom: -38px;}
  30. }
  31. #cookiesms1:target {
  32. display: none;
  33. }
  34. .cookiesms{
  35. width:100%;
  36. height:43px;
  37. margin:0 auto;
  38. padding-left:1%;
  39. padding-top:5px;
  40. font-size:20px;
  41. clear:both;
  42. font-weight: strong;
  43. color: #333;
  44. bottom:-50px;
  45. position:fixed;
  46. left: 0px;
  47. background-color: #FFF;
  48. opacity:0.7;
  49. filter:alpha(opacity=70); /* For IE8 and earlier */
  50. transition: bottom 1s;
  51. -webkit-transition:bottom 1s; /* Safari */
  52. -webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
  53. -moz-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
  54. box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
  55. z-index:999999999;
  56. }
  57. .cookiesms:hover{
  58. bottom:0px;
  59. }
  60. .cookies2{
  61. background-color: #FFF;
  62. display:inline;
  63. opacity:0.95;
  64. filter:alpha(opacity=95);
  65. position:absolute;
  66. left:1%;
  67. top:-30px;
  68. font-size:15px;
  69. height:30px;
  70. padding-left:25px;
  71. padding-right:25px;
  72. -webkit-border-top-right-radius: 15px;
  73. -webkit-border-top-left-radius: 15px;
  74. -moz-border-radius-topright: 15px;
  75. -moz-border-radius-topleft: 15px;
  76. border-top-right-radius: 15px;
  77. border-top-left-radius: 15px;
  78. -webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
  79. -moz-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
  80. box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
  81. }
  82.  
  83. /* Fin del CSS para cookies */
  84.  
  85. </style>

Por último incluiremos este pequeño código en el BODY para tener la marquesina flotante para indicar nuestra política de cookies.

  1. <!--Código HTML de la política de cookies -->
  2. <!--La URL incluida es la parte que se ha de modificar -->
  3. <div class="cookiesms" id="cookie1">
  4. Este sitio web usa cookies, puedes ver <a href=http://www.joserodriguez.info/bloc/politica-de-cookies/>la política de cookies, aquí</a> -
  5. <button onclick="controlcookies()">Aceptar</button>
  6. <div class="cookies2">Política de cookies + </div>
  7. </div>
  8. <script type="text/javascript">
  9. if (!localStorage.controlcookie>0){
  10. cookie1.setAttribute("style","animation: desaparecer 5s;-webkit-animation: desaparecer 5s;");
  11. }
  12. </script>
  13. <!-- Fin del código de cookies --->

Tienes que crear una página a donde apuntar la política de cookies donde informas de las cookies que estás utilizando.

Este código es propiedad de José Rodriguez y puedes verlo aquí