The Last Patrol

0

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

Aviso Cookies Original

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

ver código
imprimir?
01<!-- /* CSS AVISO COOKIES */ -->
02#cookieChoiceInfo {
03    background-color: rgba(0, 0, 0, 0.8) !important;
04    border-radius: 20px !important;
05    border: 2px ridge silver;
06    color: #fff !important;
07    font-size: 85% !important;
08    font-weight: normal !important;
09    right: 0;
10    line-height: 170% !important;
11    margin: 0 !important;
12    padding: 0 !important;
13    position: fixed !important;
14    text-align: center !important;
15    text-shadow: 2px 2px 2px #000, 0 1px 1px #000, 1px 0 1px #000, -1px 0 1px #000, 0 -1px 1px #000 !important;
16    bottom: 0!important;
17    width: 20% !important;
18    z-index: 4000 !important;
19    height: 18%;
20    top: 82%!important;
21    left: 81%!important;
22}
23#cookieChoiceInfo span {
24    display: block;
25}
26#cookieChoiceInfo a {
27    background: red !important;
28    display: inline-block !important;
29    opacity: 0.6 !important;
30    border: 1px ridge #ccc!important;
31    box-shadow: 3px 3px 5px #000!important;
32}
33#cookieChoiceInfo a:hover {
34    background: lime !important;
35    display: inline-block !important;
36    opacity: 1 !important;
37}

Demonstração

Exemplo 2

ver código
imprimir?
01<!-- /* CSS AVISO COOKIES */ -->
02#cookieChoiceInfo {
03    background-color: rgba(155, 105, 255, 0.5) !important;
04    color: #fff !important;
05    font-size: 95% !important;
06    font-weight: normal !important;
07    left: 50% !important;
08    line-height: 160% !important;
09    margin: 0 !important;
10    padding:0px 10px 20px !important;
11    position: fixed !important;
12    text-align: center !important;
13    top: 50% !important;
14    width: 20% !important;
15    z-index: 4000 !important;
16    box-shadow: 0 0 20px yellow, inset 0 0 50px #000!important;
17    border-radius: 20px!important;
18    text-shadow: 2px 2px 2px #000, 0px 1px 1px #000, 1px 0px 1px #000, -1px 0px 1px #000, 0px -1px 1px #000!important;
19}
20#cookieChoiceInfo span {
21    display: block;
22}
23#cookieChoiceInfo a {
24    background: red !important;
25    display: inline-block !important;
26    opacity: 0.6 !important;
27    border: 1px ridge #ccc!important;
28    box-shadow: 3px 3px 5px #000!important;
29}
30#cookieChoiceInfo a:hover {
31    background: lime !important;
32    display: inline-block !important;
33    opacity: 1 !important;
34}

Demonstração

Exemplo 3

ver código
imprimir?
01<!-- /* CSS AVISO COOKIES */ -->
02#cookieChoiceInfo {
03    background-color: rgba(0, 0, 255, 0.5) !important;
04    border-radius: 0px !important;
05    top: 93% !important;
06    box-shadow: 0 0 5px blue, 0 0 100px #000 inset !important;
07    color: #fff !important;
08    display: none;
09    font-size: 75% !important;
10    font-weight: normal !important;
11    left: 0 !important;
12    line-height: 160% !important;
13    margin: 0 !important;
14    padding: 0 10px 20px !important;
15    position: fixed !important;
16    text-align: center !important;
17    text-shadow: 2px 2px 2px #000, 0 1px 1px #000, 1px 0 1px #000, -1px 0 1px #000, 0 -1px 1px #000 !important;
18    width: 100% !important;
19    z-index: 4000 !important;
20}
21#cookieChoiceInfo span {
22    display: inline-block;
23}
24#cookieChoiceInfo a {
25 -moz-box-shadow: 0px 1px 0px 0px #fff6af!important;
26 -webkit-box-shadow: 0px 1px 0px 0px #fff6af!important;
27 box-shadow: 0px 1px 0px 0px #fff6af!important;
28 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23))!important;
29 background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%)!important;
30 background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%)!important;
31 background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%)!important;
32 background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%)!important;
33 background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%)!important;
34 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0)!important;
35 background-color:#ffec64!important;
36 -moz-border-radius:6px!important;
37 -webkit-border-radius:6px;
38 border-radius:6px!important;
39 border:1px solid #ffaa22!important;
40 display:inline-block!important;
41 color:#333333!important;
42 font-family:Arial!important;
43 font-size:12px!important;
44 font-weight:bold!important;
45 padding:6px 24px!important;
46 text-decoration:none!important;
47 text-shadow: 1px 0 1px #000, 0px 1px 0px #ffee66!important;
48}
49#cookieChoiceInfo a:hover {
50 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64))!important;
51 background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%)!important;
52 background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%)!important;
53 background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%)!important;
54 background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%)!important;
55 background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%)!important;
56 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0)!important;
57 background-color:#ffab23!important;
58}
59#cookieChoiceInfo a:active {
60 position:relative!important;
61 top:1px!important;
62}

Demonstração

Exemplo 4

ver código
imprimir?
01<!-- /* CSS AVISO COOKIES */ -->
02#cookieChoiceInfo {
03    background-color: rgba(0, 102, 204, 0.5) !important;
04    border-radius: 0px !important;
05    top: 0 !important;
06    box-shadow: 0 0 5px blue, 0 0 100px #000 inset !important;
07    color: #fff !important;
08    display: none;
09    font-size: 75% !important;
10    font-weight: normal !important;
11    left: 0 !important;
12    line-height: 160% !important;
13    margin: 0 !important;
14    padding: 0!important;
15    position: fixed !important;
16    text-align: center !important;
17    text-shadow: 2px 2px 2px #000, 0 1px 1px #000, 1px 0 1px #000, -1px 0 1px #000, 0 -1px 1px #000 !important;
18    width: 100% !important;
19    z-index: 4000 !important;
20}
21#cookieChoiceInfo span {
22    display: inline-block;
23}
24#cookieChoiceInfo a {
25 -moz-box-shadow:inset 0px 1px 0px 0px #97c4fe!important;
26 -webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe!important;
27 box-shadow:inset 0px 1px 0px 0px #97c4fe!important;
28 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0))!important;
29 background:-moz-linear-gradient(top, #3d94f6 5%, #1e62d0 100%)!important;
30 background:-webkit-linear-gradient(top, #3d94f6 5%, #1e62d0 100%)!important;
31 background:-o-linear-gradient(top, #3d94f6 5%, #1e62d0 100%)!important;
32 background:-ms-linear-gradient(top, #3d94f6 5%, #1e62d0 100%)!important;
33 background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%)!important;
34 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0',GradientType=0)!important;
35 background-color:#3d94f6!important;
36 -moz-border-radius:6px!important;
37 -webkit-border-radius:6px!important;
38 border-radius:6px!important;
39 border:1px solid #337fed!important;
40 display:inline-block!important;
41 color:#ffffff!important;
42 font-family:Arial!important;
43 font-size:12px!important;
44 font-weight:bold!important;
45 padding:6px 24px!important;
46 text-decoration:none!important;
47 text-shadow:0px 1px 0px #1570cd!important;
48}
49#cookieChoiceInfo a:hover {
50 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6))!important;
51 background:-moz-linear-gradient(top, #1e62d0 5%, #3d94f6 100%)!important;
52 background:-webkit-linear-gradient(top, #1e62d0 5%, #3d94f6 100%)!important;
53 background:-o-linear-gradient(top, #1e62d0 5%, #3d94f6 100%)!important;
54 background:-ms-linear-gradient(top, #1e62d0 5%, #3d94f6 100%)!important;
55 background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%)!important;
56 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6',GradientType=0)!important;
57 background-color:#1e62d0!important;
58}
59#cookieChoiceInfo a:active {
60 position:relative!important;
61 top:1px!important;
62}

Demonstração

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

Aspirante a Artista Digital, Moderador no site Heromorph desde 2007. Um dos fundadores do Quadradinhos inK, projecto de BD com artistas de Portugal e Brasil.
Gosto de BD, Cinema. Jogos e códigos HTML, CSS e Javascript.
Autor do Coisas K Aprendi por Aí, um blogue sobre nada e mais alguma coisa.
BloggerTwitterFacebookPinterestStackOverflowNexusModsGOG.comSteamContactoPaypal

Comentários

Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.

Mas antes de comentarem, leiam as minhas Regras dos Comentários.

Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.

Caso prefiras comentar numa nova janela, ou se o formulário abaixo estiver nos dias ruins, podes clicar aqui.

Enviar um comentário