El aviso de cookies es una parte importante para cualquier web que quiera informar a sus usuarios lo que le hacen a sus datos y aceptar lo que se haga con ellos.
Este articulo lo hago principalmente para Blogger por que en WordPress puedes instalar extensiones y no necesitas este tipo de códigos.
El código es completamente funcional, pero hay que mencionar que a veces aparece 2 veces el mensaje, nada grave.
El diseño utiliza las variables CSS para hacerlo practico y si tu blog tiene estos estilos es fácil que se adapte al diseño de tu blog.
El tema funciona en todos los dispositivos, tiene diseño responsivo por lo que no tienes que preocuparte por si quedara bien etc.
Próximamente agregare un script que te lo agrega automáticamente el código para facilitar el proceso de instalación. por ahora para instalarlo lo tienes que pegar antes de la etiqueta de cierre </body> y simplemente lo guardas.
<style>
:root {
--text-color: #67676a;
--green-color: #217dd4;
--green-hover-color: #2573a6;
--blue-color: #2980b9;
--blue-hover-color: #2573a6;
--box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
--box-color: #fff;
}
@media (prefers-color-scheme: dark) {
:root {
--text-color: #ffffff;
--green-color: #217dd4;
--green-hover-color: #2573a6;
--blue-color: #2980b9;
--blue-hover-color: #2573a6;
--box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
--box-color: rgba(0, 0, 0, 0.7);
}
}
.cookie-bubble {
position: fixed;
width: 100%;
max-width: 400px;
min-height: 100px;
background-color: var(--box-color);
box-shadow: var(--box-shadow);
z-index: 990;
border-radius: 6px;
display: none;
}
.cookie-bubble.bottom-right {
right: 15px;
bottom: 15px
}
.cookie-bubble.bottom-left {
left: 15px;
bottom: 15px
}
.cookie-bubble.show.bottom-left,
.cookie-bubble.show.bottom-right {
-webkit-animation-name: popInBottom;
animation-name: popInBottom;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: cubic-bezier(.19, 1, .22, 1);
animation-timing-function: cubic-bezier(.19, 1, .22, 1);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards
}
.cookie-bubble.hide {
display: none
}
.cookie-bubble .cb-wrapper {
position: relative;
display: inline-block;
padding: 15px
}
.cookie-bubble .cb-wrapper .cb-row {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: left
}
.cookie-bubble .cb-wrapper .cb-row .cb-row-content .message {
position: relative;
width: 100%;
display: inline-block;
font-size: 15px;
color: var(--text-color);
margin-top: 0
}
.cookie-bubble .cb-wrapper .cb-row .cb-row-content .cb-controls {
position: relative;
width: 100%;
float: left;
margin-top: 15px
}
.cookie-bubble .cb-wrapper .cb-row .cb-image {
padding-right: 23px
}
.cookie-bubble .cb-wrapper .cb-row .cb-image .cookie-inner-color {
fill: var(--green-color)
}
.cookie-bubble .cb-wrapper .cb-row .cb-image svg {
width: 60px
}
.cookie-bubble .cb-wrapper .cb-row .agreement-btn {
float: left;
background-color: var(--green-color);
font-family: inherit;
font-size: 14px;
color: #fff;
text-decoration: none;
opacity: 1;
border: none;
cursor: pointer;
font-weight: 500;
padding: 10px 20px;
margin: 0 10px 0 0;
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 6px
}
.cookie-bubble .cb-wrapper .cb-row .agreement-btn:hover {
background-color: var(--green-hover-color)
}
.cookie-bubble .cb-wrapper .cb-row .cookie-policy-btn {
float: left;
color: var(--blue-color);
padding: 10px 0;
font-size: 14px;
opacity: .95;
border: none;
cursor: pointer;
font-weight: 400;
margin: 0
}
.cookie-bubble .cb-wrapper .cb-row .cookie-policy-btn:hover {
opacity: 1;
text-decoration: underline
}
@media screen and (max-width: 440px) {
.aff_svg {
width: 80%
}
.cookie-bubble.show {
border-radius: 0;
width: 100%;
max-width: 100%;
left: 0 !important;
bottom: 0 !important
}
.cookie-bubble .cb-wrapper {
padding: 20px 15px
}
}
</style>
<div class="cookie-bubble bottom-left show">
<div class="cb-wrapper">
<div class="cb-row">
<div class="cb-image"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.93 97.93">
<defs>
<style>
.cookie-inner-color {
fill: undefined !important
}
</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<path d="M44,23.76a2.47,2.47,0,1,0,.91,3.37A2.47,2.47,0,0,0,44,23.76Z"></path>
<path d="M25.9,40.32a2.47,2.47,0,0,0,0,4.93h0a2.47,2.47,0,1,0,0-4.93Z"></path>
<circle cx="32.08" cy="65.86" r="2.47"></circle>
<path d="M56.38,69.91a2.47,2.47,0,1,0,1.14,1.49A2.47,2.47,0,0,0,56.38,69.91Z"></path>
<path
d="M72,52.68a2.47,2.47,0,0,0-2.38,1.83,2.44,2.44,0,0,0,.25,1.87,2.47,2.47,0,0,0,4.52-.59,2.44,2.44,0,0,0-.25-1.87A2.47,2.47,0,0,0,72,52.68Z">
</path>
<path class="cookie-inner-color"
d="M89.51,52.86A14,14,0,0,1,81,47.2,14.09,14.09,0,0,1,61,35.68,14.09,14.09,0,0,1,49.49,15.73a14,14,0,0,1-5.66-8.55,44,44,0,0,0-21.09,6.15A44.26,44.26,0,0,0,71.46,87.08,44.24,44.24,0,0,0,89.51,52.86ZM28.28,43.42a2.47,2.47,0,0,1-2.38,1.83h0a2.47,2.47,0,1,1,2.38-1.83Zm3.8,24.9a2.47,2.47,0,1,1,2.47-2.47A2.47,2.47,0,0,1,32.08,68.32ZM44.92,27.13A2.47,2.47,0,1,1,44,23.76,2.47,2.47,0,0,1,44.92,27.13ZM57.28,73.27a2.47,2.47,0,1,1-.9-3.36,2.47,2.47,0,0,1,.9,3.36ZM74.42,55.79a2.47,2.47,0,1,1-.25-1.87A2.45,2.45,0,0,1,74.42,55.79Z">
</path>
<path
d="M97.93,48.52v-.2A2.35,2.35,0,0,0,95.7,46a9.37,9.37,0,0,1-8-5.45,2.35,2.35,0,0,0-3.49-.93,9.51,9.51,0,0,1-5.44,1.72A9.4,9.4,0,0,1,69.39,31.1a2.35,2.35,0,0,0-2.55-2.55c-.28,0-.57,0-.85,0a9.39,9.39,0,0,1-7.68-14.81,2.35,2.35,0,0,0-.93-3.49,9.37,9.37,0,0,1-5.45-8A2.35,2.35,0,0,0,49.61,0H49a49,49,0,1,0,49,49C97.93,48.82,97.93,48.67,97.93,48.52ZM71.46,87.08A44.26,44.26,0,0,1,22.74,13.33,44,44,0,0,1,47.53,4.72a14,14,0,0,0,5.66,8.55A14.09,14.09,0,0,0,64.71,33.22,14.09,14.09,0,0,0,84.66,44.75a14,14,0,0,0,8.56,5.66A44.3,44.3,0,0,1,71.46,87.08Z">
</path>
</g>
</g>
</svg></div>
<div class="cb-row-content"><span class="message">Este sitio utiliza cookies de Google para ofrecer sus
servicios y analizar el tráfico.</span>
<div class="cb-controls"><a class="agreement-btn" href='javascript:void(0);' onclick="PonerCookie()">¡Aceptar!</a><a class="cookie-policy-btn"
href="https://policies.google.com/technologies/cookies" target="_blank"
rel="noopener noreferrer">Politica de cookies</a></div>
</div>
</div>
</div>
</div>
<script type='text/javascript'>
function getCookie(c_name) {
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1) {
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1) {
c_value = null;
} else {
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", 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) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
document.querySelector(".cookie-bubble").style.display = "none";
}
if (getCookie('aviso') != "1") {
document.querySelector(".cookie-bubble").style.display = "block";
}
function PonerCookie() {
setCookie('aviso', '1', 365);
}
</script>
No hay comentarios:
Publicar un comentario