9 Estilos de Aviso de Cookies para Blogger / HTML

Bienvenidos a SeoBlogAriel.Online, en donde, voy a desvelarte como agregar un aviso de cookies flotante para Blogger o HTML. No necesitas tener experiencia previa en CSS o JS, pues, aquí te enseño como ponerlo en tu blog de forma sencilla.

poner aviso de cookies en blog / html

Video Explicativo: Cómo Poner Aviso de Cookies para BLOGGER / HTML

¿Por que poner un aviso de cookies en mi Web?

Es necesario colocarlo si tu contenido esta dirigido hacia Europa porque dentro de las leyes expuestas por estos países exigen que todos los usuarios que ingresen a tu Web sean notificado que se implementara en su navegador una cookie que guardara sus preferencias para futuras visitas hacia esta información, producto o servicio que ofreces en tu sitio.

Pasos Para Colocar un Aviso de Cookies en Blogger / HTML

Para integrar el banner flotante que será nuestro aviso de cookies resaltando que esta web utiliza cookies para una mejor experiencia de navegación a futuras visitas deberemos tener lo siguiente:

Estilo de hoja CSS

Para añadir el estilo de hoja vamos a copiar el siguiente código antes del tag </head> para darle el estilo a nuestro notificación de cookie.


<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/xm1ev67idl2h9vd/iCookie.css"/>

Función JavaScript

Para darle vida al estilo de hojas que mostrara el aviso de cookies en nuestro blog(Blogger o Html) para eso debemos colocar las funciones JS para que resulte correctamente. Copia el siguiente codigo antes del tag </body>

<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/2f8rxpq5ognqfr3/iCookie.js"></script>

<script type="text/javascript">
$(function(){
	var options={
		theme:"default",
		position:"bottom",
		distance:20,
		borderRadius:4,
		background:"#000",
		backgroundOpacity:"0.8",
		fontSize:14,
		text:"<img src=\"./iCookie/images/cookie1.png\"/><h1>Have<br/> a cookie</h1>We use cookies to ensure that we give you the best experience on our website",
		html:true,
		textColor:"#FFF",
		showButton:true,
		buttonText:"Ok, got it",
		buttonColor:"#FFF",
		buttonBgColor:"#000",
		moreButtonText:"more information",
		moreButtonColor:"#b2ee31",
		moreButtonLink:"#link",
		showCloseButton:false,
		cookieDays:365}
	$("body").iCookie(options);});
</script>

Estilos de Cookies para Mostrar

Puedes escoger entre 9 estilos para colocar tu aviso de cookies flotante y en diferentes posiciones, solo debes reemplazar en la sección de theme y position por alguna de tu preferencia.

Theme: default, black, white, grey, red, blue, purple, whitered, whitegreen, whitepurple
position: bottom-right, bottom, bottom-right, bottom-left, bottom-center, top, top-right, top-left, top-center.

Descargar Archivos

Pueden alojar los archivos en donde ustedes gusten para una mejor personalización.

Descargar Aquí.

https://dl.dropboxusercontent.com/s/22q5wncw3prxp87/iCookie.rar

Publicar un comentario

Déjame un mensaje.

Artículo Anterior Artículo Siguiente

نموذج الاتصال

// Cargamos el SDK de Facebook window.fbAsyncInit = function() { FB.init({ appId : '570341645200786', cookie : true, xfbml : true, version : 'v11.0' }); // Evento que se ejecuta al dar clic en el botón Me Gusta FB.Event.subscribe('edge.create', function(response) { document.getElementById("contenido").style.display = "block"; document.getElementById("boton-fb").style.display = "none"; }); }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v11.0&appId=570341645200786&autoLogAppEvents=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));