Una selección de 12 avisos de cookies gratis con HTML, CSS y JavaScript, en distintos colores y formatos, para adaptar a Blogger, WordPress y otros blogs. Incluye imágenes, código completo de cada diseño y una explicación de instalación.
Diseño ilustrativo propio de esta colección.
¿Quieres crear un aviso a tu medida? Prueba nuestro generador gratuito de avisos de cookies: elige colores, diseño y textos, comprueba la vista previa y copia tu código.
Qué encontrarás en esta guía
El objetivo es ayudarte a elegir una ventana que combine con tu blog y a entender qué hace el código antes de instalarlo. Hay tarjetas centrales, barras superiores e inferiores, paneles laterales, esquinas rectas o redondeadas y colores claros y oscuros. No es posible mostrar todas las combinaciones existentes: los colores y el radio de las esquinas son variables que puedes modificar para crear muchas más versiones.
Cada modelo incluye una imagen ilustrativa creada para esta guía y un bloque completo de código. Las imágenes muestran su apariencia orientativa; el resultado final depende de la anchura del navegador, la tipografía y los estilos de la plantilla. Ninguna captura utiliza la ventana Aurora de nuestra web.
Una ventana bonita y un consentimiento que funciona
Un aviso no bloquea una herramienta simplemente porque tenga un botón de rechazo. Si tu plantilla carga un servicio antes de que la persona elija, cambiar el aspecto del aviso no resuelve ese comportamiento. Por eso los ejemplos dejan desactivadas las finalidades opcionales al comenzar y ofrecen una forma explícita de activar scripts externos después del permiso.
El código es una base educativa: guarda preferencias en el navegador, muestra las opciones y activa únicamente scripts previamente etiquetados. No descubre automáticamente las cookies de tu web, no controla plugins que se carguen por su cuenta y no borra todas las cookies de terceros. La integración de cada proveedor debe revisarse por separado.
Cómo funcionan los botones
- Aceptar todo: permite las dos finalidades opcionales incluidas en el ejemplo: estadísticas y publicidad.
- Rechazar todo: mantiene esas finalidades desactivadas; conserva las funciones necesarias.
- Configurar: abre el panel de selección sin aceptar por ese hecho.
- Guardar selección: aplica únicamente las casillas marcadas. Si no marcas ninguna opcional, ambas quedan rechazadas.
- Cookies: permite volver a abrir el panel y cambiar la elección.
Aceptar todo y Guardar selección son acciones diferentes. En el panel, pulsar Aceptar todo permite todas las opciones aunque las casillas estén vacías; pulsar Guardar selección respeta exactamente las casillas. Los nombres completos se mantienen para que la diferencia sea visible.
Las opciones no necesarias empiezan sin marcar. Aceptar y rechazar deben estar a la misma altura y con visibilidad equivalente; la AEPD recoge ese criterio en su explicación sobre cookies y privacidad.
¿Sirven para monetizar con Google?
Estos códigos no son CMP certificadas por Google y no sustituyen una solución certificada cuando esta se exige. Google requiere una CMP certificada integrada con el TCF para servir anuncios personalizados a usuarios del Espacio Económico Europeo, Reino Unido y Suiza. La disponibilidad de otros tipos de anuncios depende de sus condiciones: no debe interpretarse este ejemplo como una integración publicitaria aprobada. Consulta los requisitos oficiales de Google para editores.
La certificación de Google tampoco constituye una garantía general de cumplimiento legal. En otras redes publicitarias debes comprobar sus propios requisitos técnicos, sus proveedores y qué información necesitan sobre la decisión del usuario. Un diseño puede adaptarse a ellas, pero no puede anunciarse como compatible con todas sin probar cada integración.
Compatibilidad con plataformas de blogs
| Plataforma | Forma de instalación | Qué comprobar |
|---|---|---|
| Blogger | Gadget HTML/JavaScript o plantilla. | Que el gadget esté presente en todas las páginas y en móvil; servicios cargados por otros gadgets. |
| WordPress con alojamiento propio | Inserción global autorizada de código o tema hijo. | Permisos, caché, plugins publicitarios y scripts del tema. |
| WordPress.com | Solo cuando las funciones de la cuenta permiten JavaScript personalizado o una integración equivalente. | Las restricciones del plan y del editor. |
| Ghost y otros blogs con inyección de código | Área de código global, si está disponible. | Acceso a esa función y carga antes de herramientas opcionales. |
| Blogs estáticos | Plantilla compartida antes del cierre de body. | Aplicación a todas las rutas y política de seguridad del sitio. |
| Plataformas que eliminan script | El bloque no puede instalarse tal cual en una entrada. | Buscar una función autorizada de código global o la solución que ofrezca la plataforma. |
Son ejemplos de instalación sujetos a las funciones de cada plataforma. No prometemos compatibilidad universal. El elemento decisivo no es que la plataforma se llame blog, sino que permita ejecutar tu HTML, CSS y JavaScript y controlar cómo se cargan los servicios opcionales.
Antes de copiar: preparación en cinco pasos
- Haz una copia de seguridad. Guarda la plantilla o exporta los ajustes antes de modificar nada.
- Localiza tus servicios. Anota estadísticas, anuncios, vídeos, mapas, botones sociales y cualquier componente externo.
- Elige un único modelo. Los doce ejemplos utilizan los mismos identificadores. No instales varios a la vez.
- Cambia los enlaces y textos. Sustituye CAMBIAR-POLITICA-COOKIES y CAMBIAR-PRIVACIDAD por las rutas reales de tus páginas.
- Prepara el bloqueo. Retira la carga anticipada de cada script opcional y comprueba su integración antes de publicar.
No copies el código dentro de una entrada si lo que necesitas es mostrarlo en todo el blog. Una entrada solo afecta normalmente a esa página y algunos editores filtran las etiquetas script. Utiliza el espacio global que permita tu plataforma.
Galería: doce modelos con código completo
Los bloques contienen etiquetas style y script para funcionar como conjunto. Copia el interior de un bloque, sin añadir el título del diseño ni el texto de esta guía. Todos comparten el mismo comportamiento; cambian el color, la posición y las esquinas.
01. Azul editorial
Una ventana centrada, sobria y fácil de reconocer. Encaja en blogs informativos, divulgativos y profesionales. El azul aparece en los dos botones principales con la misma importancia visual.
Formato: ventana central. Color principal: #1d4ed8. Esquinas: 12px.
Imagen ilustrativa propia. Vista orientativa; no es una certificación ni una captura de una instalación real.
Abrir código completo del modelo 01 para copiar y pegar
Para copiar: pulsa dentro del cuadro, selecciona todo y copia. En PC: Ctrl+A y Ctrl+C. En móvil: mantén pulsado y elige Seleccionar todo → Copiar.
Después de pegarlo: cambia los dos enlaces de políticas, revisa las categorías y conecta únicamente los servicios que puedan cargarse después de la elección. No basta con cambiar el nombre del blog.
02. Verde natural
Una barra inferior para blogs de naturaleza, bienestar y proyectos personales. Ocupa menos altura en escritorio; en el móvil los botones se reorganizan para conservar su tamaño y legibilidad.
Formato: barra inferior. Color principal: #047857. Esquinas: 22px.
Imagen ilustrativa propia. Vista orientativa; no es una certificación ni una captura de una instalación real.
Abrir código completo del modelo 02 para copiar y pegar
Para copiar: pulsa dentro del cuadro, selecciona todo y copia. En PC: Ctrl+A y Ctrl+C. En móvil: mantén pulsado y elige Seleccionar todo → Copiar.
Después de pegarlo: cambia los dos enlaces de políticas, revisa las categorías y conecta únicamente los servicios que puedan cargarse después de la elección. No basta con cambiar el nombre del blog.
03. Violeta suave
Una tarjeta central redondeada con un fondo ligeramente violeta. Puede funcionar en blogs creativos, de diseño y divulgación. El color suave pertenece al fondo; el texto mantiene un contraste alto.
Formato: ventana central. Color principal: #6d28d9. Esquinas: 28px.
Imagen ilustrativa propia. Vista orientativa; no es una certificación ni una captura de una instalación real.
Abrir código completo del modelo 03 para copiar y pegar
Para copiar: pulsa dentro del cuadro, selecciona todo y copia. En PC: Ctrl+A y Ctrl+C. En móvil: mantén pulsado y elige Seleccionar todo → Copiar.
Después de pegarlo: cambia los dos enlaces de políticas, revisa las categorías y conecta únicamente los servicios que puedan cargarse después de la elección. No basta con cambiar el nombre del blog.
04. Noche tecnológica
Una ventana oscura para blogs tecnológicos o con temas nocturnos. Aceptar y rechazar tienen la misma superficie clara; los enlaces también se distinguen sobre el fondo oscuro.
Formato: ventana central. Color principal: #a5b4fc. Esquinas: 16px.
Imagen ilustrativa propia. Vista orientativa; no es una certificación ni una captura de una instalación real.
Abrir código completo del modelo 04 para copiar y pegar
Para copiar: pulsa dentro del cuadro, selecciona todo y copia. En PC: Ctrl+A y Ctrl+C. En móvil: mantén pulsado y elige Seleccionar todo → Copiar.
Después de pegarlo: cambia los dos enlaces de políticas, revisa las categorías y conecta únicamente los servicios que puedan cargarse después de la elección. No basta con cambiar el nombre del blog.
05. Ámbar compacto
Una franja superior en tonos cálidos. Es una alternativa para blogs con navegación inferior o lectores que prefieren encontrar los controles al principio de la pantalla.
Formato: barra superior. Color principal: #92400e. Esquinas: 10px.
Imagen ilustrativa propia. Vista orientativa; no es una certificación ni una captura de una instalación real.
Abrir código completo del modelo 05 para copiar y pegar
Para copiar: pulsa dentro del cuadro, selecciona todo y copia. En PC: Ctrl+A y Ctrl+C. En móvil: mantén pulsado y elige Seleccionar todo → Copiar.
Después de pegarlo: cambia los dos enlaces de políticas, revisa las categorías y conecta únicamente los servicios que puedan cargarse después de la elección. No basta con cambiar el nombre del blog.
06. Rosa creativo
Un panel inferior izquierdo de color rosa que se integra en blogs creativos. En pantallas estrechas ocupa el ancho disponible y evita quedar cortado por el borde.
Formato: panel inferior izquierdo. Color principal: #be185d. Esquinas: 24px.
Imagen ilustrativa propia. Vista orientativa; no es una certificación ni una captura de una instalación real.
Abrir código completo del modelo 06 para copiar y pegar
Para copiar: pulsa dentro del cuadro, selecciona todo y copia. En PC: Ctrl+A y Ctrl+C. En móvil: mantén pulsado y elige Seleccionar todo → Copiar.
Después de pegarlo: cambia los dos enlaces de políticas, revisa las categorías y conecta únicamente los servicios que puedan cargarse después de la elección. No basta con cambiar el nombre del blog.
07. Turquesa limpio
Un panel inferior derecho, adecuado para blogs con estética limpia. No requiere imágenes decorativas ni archivos externos para mostrar sus colores y controles.
Formato: panel inferior derecho. Color principal: #0e7490. Esquinas: 18px.
Imagen ilustrativa propia. Vista orientativa; no es una certificación ni una captura de una instalación real.
Abrir código completo del modelo 07 para copiar y pegar
Para copiar: pulsa dentro del cuadro, selecciona todo y copia. En PC: Ctrl+A y Ctrl+C. En móvil: mantén pulsado y elige Seleccionar todo → Copiar.
Después de pegarlo: cambia los dos enlaces de políticas, revisa las categorías y conecta únicamente los servicios que puedan cargarse después de la elección. No basta con cambiar el nombre del blog.
08. Rojo editorial
Una barra inferior casi rectangular con un acento rojo. Puede combinar con revistas y blogs de actualidad. Su apariencia no modifica qué se acepta: mantiene las mismas opciones que los otros modelos.
Formato: barra inferior. Color principal: #b91c1c. Esquinas: 4px.
Imagen ilustrativa propia. Vista orientativa; no es una certificación ni una captura de una instalación real.
Abrir código completo del modelo 08 para copiar y pegar
Para copiar: pulsa dentro del cuadro, selecciona todo y copia. En PC: Ctrl+A y Ctrl+C. En móvil: mantén pulsado y elige Seleccionar todo → Copiar.
Después de pegarlo: cambia los dos enlaces de políticas, revisa las categorías y conecta únicamente los servicios que puedan cargarse después de la elección. No basta con cambiar el nombre del blog.
09. Neón índigo
Una tarjeta oscura con borde y resplandor índigo discretos. Es un diseño independiente de la ventana utilizada en El PulsoTech. El efecto es estático para evitar parpadeos molestos.
Formato: ventana central. Color principal: #a5b4fc. Esquinas: 20px.
Imagen ilustrativa propia. Vista orientativa; no es una certificación ni una captura de una instalación real.
Abrir código completo del modelo 09 para copiar y pegar
Para copiar: pulsa dentro del cuadro, selecciona todo y copia. En PC: Ctrl+A y Ctrl+C. En móvil: mantén pulsado y elige Seleccionar todo → Copiar.
Después de pegarlo: cambia los dos enlaces de políticas, revisa las categorías y conecta únicamente los servicios que puedan cargarse después de la elección. No basta con cambiar el nombre del blog.
10. Gris minimalista
Una barra superior con esquinas rectas y una paleta gris azulada. Prioriza la lectura y se adapta a blogs profesionales que prefieren un aviso sin adornos.
Formato: barra superior. Color principal: #334155. Esquinas: 0px.
Imagen ilustrativa propia. Vista orientativa; no es una certificación ni una captura de una instalación real.
Abrir código completo del modelo 10 para copiar y pegar
Para copiar: pulsa dentro del cuadro, selecciona todo y copia. En PC: Ctrl+A y Ctrl+C. En móvil: mantén pulsado y elige Seleccionar todo → Copiar.
Después de pegarlo: cambia los dos enlaces de políticas, revisa las categorías y conecta únicamente los servicios que puedan cargarse después de la elección. No basta con cambiar el nombre del blog.
11. Terracota cálido
Una tarjeta inferior izquierda con tonos tierra. Combina con blogs de viajes, gastronomía o decoración sin recurrir a fotografías ni logotipos ajenos.
Formato: panel inferior izquierdo. Color principal: #9a3412. Esquinas: 14px.
Imagen ilustrativa propia. Vista orientativa; no es una certificación ni una captura de una instalación real.
Abrir código completo del modelo 11 para copiar y pegar
Para copiar: pulsa dentro del cuadro, selecciona todo y copia. En PC: Ctrl+A y Ctrl+C. En móvil: mantén pulsado y elige Seleccionar todo → Copiar.
Después de pegarlo: cambia los dos enlaces de políticas, revisa las categorías y conecta únicamente los servicios que puedan cargarse después de la elección. No basta con cambiar el nombre del blog.
12. Blanco y negro
Un panel inferior derecho de alto contraste. Es una alternativa neutra cuando el blog cambia de colores con frecuencia o cuando se busca un aviso que combine con casi cualquier cabecera.
Formato: panel inferior derecho. Color principal: #18181b. Esquinas: 8px.
Imagen ilustrativa propia. Vista orientativa; no es una certificación ni una captura de una instalación real.
Abrir código completo del modelo 12 para copiar y pegar
Para copiar: pulsa dentro del cuadro, selecciona todo y copia. En PC: Ctrl+A y Ctrl+C. En móvil: mantén pulsado y elige Seleccionar todo → Copiar.
Después de pegarlo: cambia los dos enlaces de políticas, revisa las categorías y conecta únicamente los servicios que puedan cargarse después de la elección. No basta con cambiar el nombre del blog.
Cómo copiar el código sin perder líneas
Abre el bloque del diseño que hayas elegido y pulsa dentro del cuadro de código. En ordenador, Ctrl+A selecciona todo el contenido de ese cuadro y Ctrl+C lo copia. En móvil, mantén pulsado dentro del cuadro y utiliza Seleccionar todo y Copiar. En ordenador puedes seleccionar el texto desde el principio hasta el final; en móvil utiliza los tiradores de selección dentro del bloque. Los bloques conservan los saltos de línea y permiten desplazamiento horizontal, de modo que una línea larga no obliga a desplazar toda la página.
Guarda también una copia en un archivo de texto. No lo pegues en un procesador que cambie las comillas normales por comillas tipográficas. No instales el bloque dos veces, ni en varios gadgets simultáneos.
Instalación orientativa en Blogger
- Entra en Diseño y busca un lugar de la plantilla que se muestre en todo el blog.
- Añade un gadget HTML/JavaScript y pega un solo bloque completo. La ventana usa una posición fija, por lo que no necesita ocupar una zona central del diseño.
- Guarda el gadget y comprueba la página principal, una entrada y una página estática.
- Revisa también el móvil: algunas plantillas muestran gadgets distintos o los ocultan.
- Si tu plantilla exige instalarlo directamente en su HTML, hazlo solo después de guardar una copia. Una plantilla XML puede necesitar una adaptación adicional; no asumas que un bloque HTML vale sin cambios.
Un gadget no impide que Blogger u otro componente cargue previamente sus propios scripts. Debes localizar esas cargas antes de considerar terminada la instalación. Si ya tienes otro aviso, evita mostrar dos gestores diferentes con decisiones contradictorias.
Instalación orientativa en WordPress
En WordPress con alojamiento propio puedes utilizar una función autorizada de inserción global de código o un tema hijo. La entrada de un artículo no es el lugar adecuado para gestionar todos los visitantes. Algunos bloques de HTML y algunos perfiles de usuario eliminan las etiquetas script por seguridad.
Después de guardar, vacía la caché del sitio y comprueba una sesión nueva. Revisa si los plugins de estadísticas o publicidad siguen insertando sus herramientas por su cuenta. Si un plugin carga antes del permiso, hay que cambiar su configuración o integrar su mecanismo de consentimiento.
En WordPress.com la posibilidad de añadir JavaScript depende de las funciones que tenga tu cuenta. Si el editor lo elimina, el código no funcionará como conjunto. No intentes eludir esas restricciones: utiliza la integración admitida por el servicio.
Cómo conectar un script opcional
Este es el formato previsto por el ejemplo. La URL que aparece es ficticia y debe sustituirse por la dirección oficial que proporcione el servicio. No dejes además una segunda copia normal del mismo script, porque se cargaría sin esperar.
<!-- EJEMPLO: no contiene un proveedor real. -->
<script type="text/plain" data-consent="analytics"
data-src="https://TU-PROVEEDOR.example/estadisticas.js"></script>
<script type="text/plain" data-consent="advertising"
data-src="https://TU-PROVEEDOR.example/publicidad.js"></script>El motor solo procesa los scripts con ese formato. Un iframe de vídeo, un píxel de imagen, un mapa, un gestor de etiquetas o una herramienta que necesita inicialización especial requieren integración adicional. No los introduzcas como si fueran un simple archivo JavaScript.
Las categorías deben escribirse exactamente como analytics y advertising en los atributos técnicos. Los títulos visibles pueden traducirse, pero cambiar esas claves sin modificar el motor rompe la relación con la preferencia guardada.
Cambiar los colores, tamaños y formas
Al comienzo del bloque encontrarás cuatro variables: accent controla el borde, enlaces y botones; surface define el fondo; ink define el texto; radius define las esquinas. Puedes usar un color hexadecimal como #1d4ed8 y un radio como 12px.
Para cambiar la ubicación, modifica data-layout. center muestra una tarjeta central; top, una barra superior; bottom, una inferior; left y right, un panel en una esquina inferior. El tamaño máximo depende de la ubicación, mientras que en móvil el conjunto se adapta al espacio disponible.
No cambies solo el fondo sin revisar el texto de los botones. Un fondo amarillo claro con texto blanco puede resultar difícil de leer. Mantén aceptar y rechazar con el mismo peso visual y evita que una opción parezca deshabilitada cuando no lo está.
Los adornos nunca deben tapar los controles. Si añades brillo, hazlo discreto. Estos ejemplos no usan animaciones intermitentes, imágenes remotas ni fuentes descargadas: el navegador dispone de una fuente de sistema y los efectos se dibujan con CSS.
Qué recuerda el navegador
El ejemplo guarda la selección en localStorage con una versión, dos valores booleanos y la fecha. Su caducidad técnica se ha fijado en 180 días como decisión del ejemplo, no como un plazo legal universal. Puedes modificarla según la revisión de tu proyecto.
La elección pertenece a ese navegador y a ese origen. No se comparte automáticamente entre dispositivos, subdominios o una dirección de prueba y el dominio final. Al borrar los datos del navegador, el aviso volverá a aparecer.
Si el almacenamiento falla, la selección sirve para la sesión actual, pero puede no mantenerse al volver. Si añades finalidades o cambias proveedores, incrementa la versión y revisa si debes pedir otra decisión. Este almacenamiento local no es un sistema centralizado de prueba del consentimiento.
Retirar el permiso: qué hace y qué falta
El botón Cookies reabre las preferencias. Si se retira una finalidad cuyo script fue activado por este motor, el ejemplo recarga la página para evitar conservar ese script en ejecución. No activa de nuevo la categoría que acaba de rechazarse.
La recarga no borra por sí sola las cookies que un proveedor haya escrito. Debes implementar su retirada, eliminar las cookies accesibles cuando corresponda y revisar sus interfaces de revocación. Las cookies de otro dominio no se pueden borrar directamente desde el tuyo. Un sistema que necesite consentimientos más detallados que estas dos categorías requiere adaptar el panel y el motor.
Comprobaciones antes de usarlo en una web real
- Abre una sesión nueva y comprueba que el aviso aparece completo.
- Sin pulsar nada, comprueba que no se activan los servicios opcionales.
- Rechaza todo y revisa que no se cargan estadísticas ni publicidad opcional.
- Marca solo estadísticas y guarda: publicidad debe seguir desactivada.
- Marca solo publicidad y guarda: estadísticas deben seguir desactivadas.
- Reabre, retira la autorización y verifica la recarga y la revocación del proveedor.
- Revisa los enlaces de las políticas y su navegación.
- Prueba móvil, escritorio, zoom y navegación con teclado.
- Comprueba que los botones no quedan debajo de barras del navegador.
- Repite las pruebas con la caché y los plugins de tu web activos.
Que desaparezca la ventana solo demuestra que el botón responde. Para verificar el bloqueo hay que revisar las conexiones y cookies del navegador. Si no sabes hacerlo, utiliza la ayuda técnica de tu plataforma o un profesional antes de dar la instalación por terminada.
Preguntas frecuentes
¿Necesito contratar otro alojamiento?
El bloque puede formar parte del propio blog si este admite código personalizado. No depende de un servidor de esta guía. Las herramientas de anuncios o estadísticas que conectes sí pueden utilizar infraestructura ajena.
¿Tiene límite de visitas?
El código no contiene una cuota ni un contador de impresiones facturables. Tu plataforma y los servicios externos pueden tener límites propios. El hecho de que el ejemplo sea gratuito no modifica sus condiciones.
¿Puedo traducirlo?
Sí. Cambia los textos de los botones, encabezados y explicaciones. Mantén los identificadores y las claves técnicas. Los enlaces deben conducir a políticas en el idioma adecuado para tus lectores.
¿Es legal por tener tres botones?
No puede concluirse eso únicamente por su apariencia. Hay que revisar lo que la web carga, la información facilitada y cómo se aplica la decisión. El aviso es una parte de esa instalación.
¿Puedo usarlo con cualquier red publicitaria?
Debe comprobarse la integración concreta. Algunas redes exigen un formato de consentimiento o una CMP determinada. El código no acredita acuerdos ni certificaciones con ninguna plataforma publicitaria.
¿Puedo conservar mi ventana actual?
Sí. No necesitas sustituir una solución que ya funciona solo para cambiar el color. Si instalas un gestor nuevo, revisa cómo retirar el anterior y cómo mantener las políticas y preferencias coherentes.
Responsabilidad de instalación
Estos diseños y códigos se ofrecen como ayuda. Quien los instale debe comprobar su funcionamiento y adaptarlos a su web y a la normativa aplicable. Su uso queda bajo su responsabilidad. No son CMP certificadas por Google.
Este aviso explica el alcance del recurso y no sustituye obligaciones legales ni una garantía de funcionamiento universal. No se ofrece una revisión individual de cada blog, sus proveedores o sus plugins.
Documentación de las plataformas de blogs
- Blogger: gadgets y cambios de diseño.
- WordPress.com: códigos permitidos y restricciones.
- Ghost: inyección de código en la cabecera y el pie.