Alterar a aparência do Aviso de Cookies do Blogger

Alguns podem até achar que este espaço está ao abandono... e em parte até pode ser verdade.

Existem muitas razões para esta falta de actividade: a vida real (que tem sempre prioridade e ultimamente tem ocupado muito do meu tempo livre), falta de inspiração (tanto na criação de novas fotomontagens/desenhos como na elaboração de novos artigos/tutoriais), falta de resposta/feedback (não que seja muito importante ou que eu ligue muito a isso mas a verdade é que também serve de motivação), e por fim o aumento das redes sociais (por si só é matéria para um outro artigo quando eu ter a inspiração para o escrever :-` ).

Mas só para mostrar que ainda por cá ando, cá vai mais um artigo sobre algo que ultimamente ando a ver em praticamente todos os sites e blogues que visito: o aviso de cookies, obrigatório que seja visível por residentes na União Europeia. x-P

Basicamente a União Europeia diz (traduzido livremente do artigo na ligação anterior) é o seguinte:

Os sites devem seguir as orientações da Comissão em matéria de privacidade e protecção de dados e informar aos utilizadores que os cookies não estão a ser usados ​​para recolher informações desnecessariamente.
A directiva Privacidade e Comunicações Electrónicas - mais especificamente o artigo 5.3 - requer o consentimento prévio e informado do utilizador ao armazenamento de informação armazenada no equipamento terminal de um utilizador. Por outras palavras, o site deve perguntar aos utilizadores se eles concordam com os cookies e tecnologias similares (por exemplo, web beacons, cookies Flash, etc.) antes do site começar a usá-los.
Para que o consentimento seja válido, ele deve ser informado, específico, consentido livremente e deve constituir uma indicação real de desejos do indivíduo.

O Blogger não é excepção a esta lei que pelo que tenho lido em alguns blogues, isso tem ver com a apresentação de anúncios ou lá o que é que a UE quer controlar que se veja...

Não que isso tenha interesse para este artigo onde o meu objectivo é simplesmente dar a conhecer como alterar a aparência horrível e cinzenta dos avisos de cookies disponibilizados pelo Blogger porque sejamos sinceros, uma faixa cinzenta e foleira ao cimo da pagina não é muito agradável esteticamente principalmente para quem tem modelos personalizados e com um certo estilo. :D

Então e para contribuir para alterar um pouco essa situação, vou mostrar alguns exemplos de avisos de cookies para serem instalados no blogue do Blogger bem como os respectivos códigos.

Basta copiarem o código do exemplo que pretendem ter no vosso blogue e colarem numa nova mini-aplicação de HTML/javascript.

Cliquem onde diz Demonstração ao lado de cada código para visualizarem como o aviso vai aparecer no blogue e cliquem em Entendi (tal como o fariam se fosse um aviso real) para que o exemplo desapareça.

Exemplo 1

#cookieChoiceInfo {
    background-color: rgba(0, 0, 0, 0.8) !important;
    border-radius: 20px !important;
    border: 2px ridge silver;
    color: #fff !important;
    font-size: 85% !important;
    font-weight: normal !important;
    right: 0;
    line-height: 170% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    text-align: center !important;
    text-shadow: 2px 2px 2px #000, 0 1px 1px #000, 1px 0 1px #000, -1px 0 1px #000, 0 -1px 1px #000 !important;
    bottom: 0!important;
    width: 20% !important;
    z-index: 4000 !important;
    height: 18%;
    top: 82%!important;
    left: 81%!important;
}
#cookieChoiceInfo span {
    display: block;
}
#cookieChoiceInfo a {
    background: red !important;
    display: inline-block !important;
    opacity: 0.6 !important;
    border: 1px ridge #ccc!important;
    box-shadow: 3px 3px 5px #000!important;
}
#cookieChoiceInfo a:hover {
    background: lime !important;
    display: inline-block !important;
    opacity: 1 !important;
}

Demonstração

Este site utiliza cookies para ajudar a disponibilizar os respetivos serviços, para personalizar anúncios e analisar o tráfego. As informações sobre a sua utilização deste site são partilhadas com a Google. Ao utilizar este site, concorda que o mesmo utilize cookies.Obter mais informaçõesEntendi

Exemplo 2

#cookieChoiceInfo {
    background-color: rgba(155, 105, 255, 0.5) !important;
    color: #fff !important;
    font-size: 95% !important;
    font-weight: normal !important;
    left: 50% !important;
    line-height: 160% !important;
    margin: 0 !important;
    padding:0px 10px 20px !important;
    position: fixed !important;
    text-align: center !important;
    top: 50% !important;
    width: 20% !important;
    z-index: 4000 !important;
    box-shadow: 0 0 20px yellow, inset 0 0 50px #000!important;
    border-radius: 20px!important;
    text-shadow: 2px 2px 2px #000, 0px 1px 1px #000, 1px 0px 1px #000, -1px 0px 1px #000, 0px -1px 1px #000!important;
}
#cookieChoiceInfo span {
    display: block;
}
#cookieChoiceInfo a {
    background: red !important;
    display: inline-block !important;
    opacity: 0.6 !important;
    border: 1px ridge #ccc!important;
    box-shadow: 3px 3px 5px #000!important;
}
#cookieChoiceInfo a:hover {
    background: lime !important;
    display: inline-block !important;
    opacity: 1 !important;
}

Demonstração

Este site utiliza cookies para ajudar a disponibilizar os respetivos serviços, para personalizar anúncios e analisar o tráfego. As informações sobre a sua utilização deste site são partilhadas com a Google. Ao utilizar este site, concorda que o mesmo utilize cookies.Obter mais informaçõesEntendi

Exemplo 3

#cookieChoiceInfo {
    background-color: rgba(0, 0, 255, 0.5) !important;
    border-radius: 0px !important;
    top: 93% !important;
    box-shadow: 0 0 5px blue, 0 0 100px #000 inset !important;
    color: #fff !important;
    display: none;
    font-size: 75% !important;
    font-weight: normal !important;
    left: 0 !important;
    line-height: 160% !important;
    margin: 0 !important;
    padding: 0 10px 20px !important;
    position: fixed !important;
    text-align: center !important;
    text-shadow: 2px 2px 2px #000, 0 1px 1px #000, 1px 0 1px #000, -1px 0 1px #000, 0 -1px 1px #000 !important;
    width: 100% !important;
    z-index: 4000 !important;
}
#cookieChoiceInfo span {
    display: inline-block;
}
#cookieChoiceInfo a {
 -moz-box-shadow: 0px 1px 0px 0px #fff6af!important;
 -webkit-box-shadow: 0px 1px 0px 0px #fff6af!important;
 box-shadow: 0px 1px 0px 0px #fff6af!important;
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23))!important;
 background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%)!important;
 background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%)!important;
 background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%)!important;
 background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%)!important;
 background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%)!important;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0)!important;
 background-color:#ffec64!important;
 -moz-border-radius:6px!important;
 -webkit-border-radius:6px;
 border-radius:6px!important;
 border:1px solid #ffaa22!important;
 display:inline-block!important;
 color:#333333!important;
 font-family:Arial!important;
 font-size:12px!important;
 font-weight:bold!important;
 padding:6px 24px!important;
 text-decoration:none!important;
 text-shadow: 1px 0 1px #000, 0px 1px 0px #ffee66!important;
}
#cookieChoiceInfo a:hover {
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64))!important;
 background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%)!important;
 background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%)!important;
 background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%)!important;
 background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%)!important;
 background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%)!important;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0)!important;
 background-color:#ffab23!important;
}
#cookieChoiceInfo a:active {
 position:relative!important;
 top:1px!important;
}

Demonstração

Este site utiliza cookies para ajudar a disponibilizar os respetivos serviços, para personalizar anúncios e analisar o tráfego. As informações sobre a sua utilização deste site são partilhadas com a Google. Ao utilizar este site, concorda que o mesmo utilize cookies.Obter mais informaçõesEntendi

Exemplo 4

#cookieChoiceInfo {
    background-color: rgba(0, 102, 204, 0.5) !important;
    border-radius: 0px !important;
    top: 0 !important;
    box-shadow: 0 0 5px blue, 0 0 100px #000 inset !important;
    color: #fff !important;
    display: none;
    font-size: 75% !important;
    font-weight: normal !important;
    left: 0 !important;
    line-height: 160% !important;
    margin: 0 !important;
    padding: 0!important;
    position: fixed !important;
    text-align: center !important;
    text-shadow: 2px 2px 2px #000, 0 1px 1px #000, 1px 0 1px #000, -1px 0 1px #000, 0 -1px 1px #000 !important;
    width: 100% !important;
    z-index: 4000 !important;
}
#cookieChoiceInfo span {
    display: inline-block;
}
#cookieChoiceInfo a {
 -moz-box-shadow:inset 0px 1px 0px 0px #97c4fe!important;
 -webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe!important;
 box-shadow:inset 0px 1px 0px 0px #97c4fe!important;
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0))!important;
 background:-moz-linear-gradient(top, #3d94f6 5%, #1e62d0 100%)!important;
 background:-webkit-linear-gradient(top, #3d94f6 5%, #1e62d0 100%)!important;
 background:-o-linear-gradient(top, #3d94f6 5%, #1e62d0 100%)!important;
 background:-ms-linear-gradient(top, #3d94f6 5%, #1e62d0 100%)!important;
 background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%)!important;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0',GradientType=0)!important;
 background-color:#3d94f6!important;
 -moz-border-radius:6px!important;
 -webkit-border-radius:6px!important;
 border-radius:6px!important;
 border:1px solid #337fed!important;
 display:inline-block!important;
 color:#ffffff!important;
 font-family:Arial!important;
 font-size:12px!important;
 font-weight:bold!important;
 padding:6px 24px!important;
 text-decoration:none!important;
 text-shadow:0px 1px 0px #1570cd!important;
}
#cookieChoiceInfo a:hover {
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6))!important;
 background:-moz-linear-gradient(top, #1e62d0 5%, #3d94f6 100%)!important;
 background:-webkit-linear-gradient(top, #1e62d0 5%, #3d94f6 100%)!important;
 background:-o-linear-gradient(top, #1e62d0 5%, #3d94f6 100%)!important;
 background:-ms-linear-gradient(top, #1e62d0 5%, #3d94f6 100%)!important;
 background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%)!important;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6',GradientType=0)!important;
 background-color:#1e62d0!important;
}
#cookieChoiceInfo a:active {
 position:relative!important;
 top:1px!important;
}

Demonstração

Este site utiliza cookies para ajudar a disponibilizar os respetivos serviços, para personalizar anúncios e analisar o tráfego. As informações sobre a sua utilização deste site são partilhadas com a Google. Ao utilizar este site, concorda que o mesmo utilize cookies.Obter mais informaçõesEntendi

Como mencionei antes os códigos acima podem ser colados numa nova mini-aplicação, mas se estarem à vontade para editar o HTML do vosso blogue também podem ir a Modelo » Editar HTML e colar o código escolhido junto com os outros estilos CSS.

Também podem ir a Modelo » Personalizar » Avançadas » Adicionar CSS personalizado e colar o código aí, MAS ESTE MÉTODO não testei por isso não o posso garantir.

De qualquer maneira é SEMPRE recomendado antes de fazer qualquer alteração na codificação do blogue que se faça alguns testes num blogue criado para o efeito.

Existem mais algumas modificações que podemos fazer ao aviso do Blogger tal como o Oloblogger explica no artigo Nuevo aviso sobre cookies en Blogger. Cómo modificarlo o incluso eliminarlo, incluindo como eliminar o aviso embora eu não o recomende...

As modificações que envolvem adicionar javascript personalizado também não o recomendo pela simples razão de serve para modificar o que está escrito no aviso e nesse caso iria aparecer na linguagem da nossa preferência, no meu caso seria o português tal como no exemplo do Oloblogger está em espanhol. Ou seja poderá não ser essa a linguagem dum eventual visitante.

Por isso todos os exemplos que apresentei neste artigo são somente modificações do CSS para alterar a aparência do aviso sem alterar nada do que lá está escrito pelo Blogger.

Por hoje fico por aqui. Se alguém criar novos estilos para o aviso de cookies e quiser que eu o acrescente a este artigo com os devidos créditos, pode sempre contactar-me. ;)

Até breve. :-F

Queres ler outro artigo ao calhas?