sexta-feira, 2 de dezembro de 2011

Personalizando lightbox padrão do blogger

Lightbox blogger

Introdução

Há alguns meses atrás, o blogger disponibilizou e oficialmente liberou um novo recurso para a plataforma, o lightbox padrão. O lightbox, por sua vez, é o mais básico possível, mas não deixa de cumprir a função de uma lightbox normal. Apesar de apresentar um barra de navegação entre as imagens bem básica, o recurso conta um sistema bem leve e compatível com os demais navegadores. Mas na minha opnião, o que realmente faltou foi um efeito de transição entre as imagens.

Mas até então não me manifestei em fazer alguma coisa pra mudar isso, porém, hoje vou mostrar como dar uma personalizada na lightbox nativa do blogger e deixar no seu jeito, como por exemplo trocar a cor do fundo da lightbox, aumentar a barra de navegação e etc. Lembrando que iremos usar apenas CSS.

Sendo assim, vamos ao tutorial e fique atento a cada passo para fazer tudo direitinho. Mas antes faça o seguinte:

1. Acesse o Painel principal do seu blog e vá em: Configurações -> Postagens e comentários -> ative a opção para mostrar imagens com a lightbox.

Permitir lightbox

 2. Entre no “Editar HTML” do seu blog e procure por:

 <body>

Agora acima dela cole:

<style>

</style>

Todos os códigos que estiverem mais abaixo vão ser colados entres essas duas tags: Ex:  <style>  Aqui vãos os códigos  </style>.

Agora vamos aos códigos para personalização:

Trocando a cor do fundo da lightbox

Alterar cor de fundo 
Vamos começar pelo fundo, trocando sua cor e seu nível de transparência. Para isso, cole o código abaixo entre as tags <style> e em seguida veja como modificar através da legenda.

.CSS_LIGHTBOX_BG_MASK {
opacity: 0.5 !important;
background-color: #222 !important;
} 

Legenda:

Vemelho: Nível de transparência (0.0 retira o fundio e o valor 1 deixa-o sem transparência).
Azul:Cor do fundo em hexadecimal.

Colocando sombra e borda nas imagens da lightbox

Alterar imagem da galeria borda e sombra
Este aplica sombra nas imagens da lighbox juntamente com uma borda. Cole o código abaixo entre as tags <style>.

.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
cursor: pointer;
outline: 5px solid #fff  !important;
box-shadow: 0px 0px 19px 5px #111;
}

Legenda:

Vermelho: Espessura da borda, quando maior mais grossa e vice-versa.
Azul: Cor da borda em hexadecimal.
Verde: Cor da sombra em hexadecimal.

Personalizando a barra de navegação entre as imagens

Alterar barra de navegação

Este trecho de código abaixo permitirá que você altere a barra de navegação da lightbox. Cole o código entre as tags <style>

.CSS_LIGHTBOX_FILMSTRIP {
background:#991d1d  !important;;
line-height: 0;
overflow: hidden;
position: relative;
width: 100%;
height: 60px;
}

Legenda:

Vermeho: Cor do fundo da barra de navegação em hexadecimal.
Azul: Altura da barra (quanto maior o número mais alto a barra e vice-versa).

Trocando a imagem do botão “Fechar”

Alterar botão Fechar

O código abaixo permitirá que você altere aquele pequeno botão “Fechar” na parte superior ao canto direito da lightbox. Cole o código entre as tags <style>.

.CSS_LIGHTBOX_BTN_CLOSE {
cursor: pointer;
background: url(&#39;http://icons.iconarchive.com/icons/custom-icon-design/mini/32/Close-icon.png&#39;) no-repeat  !important;;
width: 32px !important;
height: 32px !important;
top: 3px;
position: absolute;
z-index: 100;
}

Legenda:

Vermelho:
URL do ícone fechar.
Azul: Largura do botão (recomendo colocar a largura da imagem do ícone)
Laranja: Altura do botão (recomendo colocar a altura da imagem do ícone)
Verde: Espaçamento no topo (quanto maior, mais espaçamento)

Personalizando a barra de informação da lightbox

Alterar barra de informação

O trecho de código CSS abaixo vai permitira a personalização daquela barrinha onde fica a informação de quantas imagens tem na galeria. Cole o código abaixo entre as tags <style>.

.CSS_LIGHTBOX_INDEX_INFO {
color: #fff;
font-size: 17px  !important;;
line-height: normal;
min-height: 1em;
position: relative;
text-align: center;
top: 6px;
background: #333;
border-radius: 5px;
margin-bottom: 10px;
padding: 8px;
text-shadow: 1px 1px 1px #000;
border: 1px #fff solid;
}

Legenda:

Vermelho: Cor da letra da barrinha.
Azul: Tamanho da fonte do texto.
Verde: Cor do fundo da barrinha:
Laranja: Nível de arredondamento da borda.
Marrom: Cor da sombra do texto.
Rosa: Espessura da borda da barrinha.
Lima: Cor da borda.

Observações finais

No final ficará algo assim:

<style>

.CSS_LIGHTBOX_BG_MASK {
opacity: 0.5 !important;
background-color:  #222 !important;
}

.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
cursor: pointer;
outline: 5px solid #fff  !important;
box-shadow: 0px 0px 19px 5px #111;
}
.CSS_LIGHTBOX_FILMSTRIP {
background:#991d1d  !important;;
line-height: 0;
overflow: hidden;
position: relative;
width: 100%;
height: 59px;
}

.CSS_LIGHTBOX_BTN_CLOSE {
cursor: pointer;
background: url(&#39;http://icons.iconarchive.com/icons/custom-icon-design/mini/32/Close-icon.png&#39;) no-repeat  !important;;
width: 32px !important;
height: 32px !important;
top: 3px;
position: absolute;
z-index: 100;
}

.CSS_LIGHTBOX_INDEX_INFO {
color: white;
font-size: 17px  !important;;
line-height: normal;
min-height: 1em;
position: relative;
text-align: center;
top: 6px;
background: #333;
border-radius: 5px;
margin-bottom: 10px;
padding: 8px;
text-shadow: 1px 1px 1px black;
border-top: 3px white solid;
}

</style>

Após o término da personalização, salve. Caso tenha alguma dúvida ou sugestão para alterar o visual da lightbox, deixe um comentário. Espero que tenham gostado e até mais!

Marcadores: , , ,

13 Comentários:

Às 2 de dezembro de 2011 13:21 , Blogger Matheussm disse...

Sera que tem como colocar button de voltar é avançar?
www.simsgaleria.com

 
Às 2 de dezembro de 2011 23:59 , Blogger Free Step Tube disse...

ae vc poderia ensinar a fazer lightbox com vídeos?

 
Às 3 de dezembro de 2011 10:57 , Blogger Códigos Blogger disse...

Clique aqui e veja como

 
Às 15 de dezembro de 2011 18:59 , Blogger Santiago Régis disse...

Nossa, muito bom mesmo!
o tutorial mais completo que encontrei a este respeito na web =)

um dúvida: é possível colocar um gif de carregamento enquanto imagem não aparece?

de qualquer forma, ótimo tutorial!!

 
Às 16 de dezembro de 2011 15:24 , Blogger Códigos Blogger disse...

Infelizmente não descobri como colocar. Mas obrigado pelo comentários!

 
Às 25 de dezembro de 2011 02:23 , Blogger imagem DT disse...

Este comentário foi removido pelo autor.

 
Às 25 de dezembro de 2011 13:29 , Blogger Vleger disse...

Gostaria de saber se há algum modo de podermos adicionar um botão de zoom já que muitas vezes o blogger redirenciona a imagem pelo seu tamanho excessivo.Obrigado.

 
Às 29 de dezembro de 2011 10:16 , Blogger Shanna Capell disse...

O LightBox não funciona em todos os templates. Sabe algum código para fazê-lo funcionar?

 
Às 8 de janeiro de 2012 21:32 , Blogger Colorindo o 7 disse...

ola eu criei um template com o artistter 3.0 mais o efeito lightbox padrão do blogger não funciona mesmo já tendo configurado no painel de controle.

vc tem um tutorial subre esse assunto? já procurei muito na net e não achei ainda

 
Às 7 de agosto de 2012 00:23 , Blogger Dawn Justin disse...

Gostaria de saber se tem como inseir caixa de informação e compartilhamento dentro do lightbox do blogger. Por exemplo: Igual do facebook.
Isso com as informações da imagem, link, e comentários que a pessoa queiram fazer conforme o seu gosto...
Eu volto aqui para ver se tem resposta. Ok...

 
Às 21 de agosto de 2012 11:22 , Blogger SAIT Informática disse...

Dica ótima de implantação!

Curiosidade, como você busca o id de CSS para implementar códigos dessa forma? Isso é realmente muito interessante! :)

Dessa forma é possível alinhar o lightbox com o tema do site! Muito bom!

Aproveitando, todos os seus links estão sendo redirecionados para o site "www.cblogger.net"

Por exemplo, no link do comentario fui encaminhado para:
"http://www.cblogger.net/2011/10/lightbox-no-seu-blog-pirobox.html"

Tive que alterar manualmente para:
"http://codigos-blogger.blogspot.com.br/2011/10/lightbox-no-seu-blog-pirobox.html"

Novamente, parabéns pela postagem!

www.saitinformatica.com.br

 
Às 5 de março de 2013 18:45 , Blogger Ibalada Net disse...

Muito bom, mas infelizmente meu template é personalisado e não aceita a Lightbox, tu sabe o que pode ser??? Tem como coloca-lo de volta????

 
Às 18 de novembro de 2013 12:48 , Blogger Ringlis Luan disse...

Seguinte eu instalei um template a algum tempo mas, veio sem a lightbox, eu preciso dos códigos da lightbox padrão do blogger será que alguém pode me passar.

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial