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.
- <!-- SCRIPT CONTROL DE COOKIES -->
- <script type="text/javascript">
- function controlcookies() {
- // si variable no existe se crea (al clicar en Aceptar)
- localStorage.controlcookie = (localStorage.controlcookie || 0);
-
- localStorage.controlcookie++; // incrementamos cuenta de la cookie
- cookie1.style.display='none'; // Esconde la política de cookies
- }
- </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.
- <!--- Codigo para la política de cookies-->
-
- <style type="text/css">
-
- /* CSS para la animación y localización de los DIV de cookies */
-
- @keyframes desaparecer
- {
- 0% {bottom: 0px;}
- 80% {bottom: 0px;}
- 100% {bottom: -50px;}
- }
-
- @-webkit-keyframes desaparecer /* Safari and Chrome */
- {
- 0% {bottom: 0px;}
- 80% {bottom: 0px;}
- 100% {bottom: -50px;}
- }
-
- @keyframes aparecer
- {
- 0% {bottom: -38px;}
- 10% {bottom: 0px;}
- 90% {bottom: 0px;}
- 100% {bottom: -38px;}
- }
-
- @-webkit-keyframes aparecer /* Safari and Chrome */
- {
- 0% {bottom: -38px;}
- 10% {bottom: 0px;}
- 90% {bottom: 0px;}
- 100% {bottom: -38px;}
- }
- #cookiesms1:target {
- display: none;
- }
- .cookiesms{
- width:100%;
- height:43px;
- margin:0 auto;
- padding-left:1%;
- padding-top:5px;
- font-size:20px;
- clear:both;
- font-weight: strong;
- color: #333;
- bottom:-50px;
- position:fixed;
- left: 0px;
- background-color: #FFF;
- opacity:0.7;
- filter:alpha(opacity=70); /* For IE8 and earlier */
- transition: bottom 1s;
- -webkit-transition:bottom 1s; /* Safari */
- -webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
- -moz-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
- box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
- z-index:999999999;
- }
-
- .cookiesms:hover{
- bottom:0px;
- }
- .cookies2{
- background-color: #FFF;
- display:inline;
- opacity:0.95;
- filter:alpha(opacity=95);
- position:absolute;
- left:1%;
- top:-30px;
- font-size:15px;
- height:30px;
- padding-left:25px;
- padding-right:25px;
- -webkit-border-top-right-radius: 15px;
- -webkit-border-top-left-radius: 15px;
- -moz-border-radius-topright: 15px;
- -moz-border-radius-topleft: 15px;
- border-top-right-radius: 15px;
- border-top-left-radius: 15px;
- -webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
- -moz-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
- box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
- }
-
- /* Fin del CSS para cookies */
-
- </style>
Por último incluiremos este pequeño
código en el BODY para tener la marquesina flotante para indicar nuestra
política de cookies.
- <!--Código HTML de la política de cookies -->
-
- <!--La URL incluida es la parte que se ha de modificar -->
-
- <div class="cookiesms" id="cookie1">
- Este sitio web usa cookies, puedes ver <a href=http://www.joserodriguez.info/bloc/politica-de-cookies/>la política de cookies, aquí</a> -
- <button onclick="controlcookies()">Aceptar</button>
- <div class="cookies2">Política de cookies + </div>
- </div>
- <script type="text/javascript">
- if (!localStorage.controlcookie>0){
- cookie1.setAttribute("style","animation: desaparecer 5s;-webkit-animation: desaparecer 5s;");
- }
- </script>
-
- <!-- 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í