Personalizar Efeito Lightbox no Blogger: Mudar Cores e Estilo

É possível modificar o efeito light Box no seu blog trocando as cores de fundo, colocando bordas e até mudando o botão fechar. Para personalizar o lightbox das imagens você apenas precisa adicionar ao HTML do seu blog algumas linhas de estilos CSS para fazer as alterações e depois é só escolher as cores que desejar. Mas é claro como vamos editar o HTML do blogspot é recomendável fazer um backup do blog antes de começar.

Personalizar Efeito Lightbox no Blogger: Mudar Cores e Estilo

Primeiro vamos falar sobre o código que vamos utilizar. Veja na imagem acima os nomes dos estilos e o que cada um deles faz então você pode trocar os códigos das cores para deixar o lightbox com a aparência que desejar.

/* Cor de fundo */
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
background-image: url(image-url-address) !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}
/* Borda da Imagem*/
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}
/* Botao Fechar */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(link da imagem) no-repeat !important;
width: 24px !important;
height: 24px !important;
}
/* Barra com miniaturas */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
}
/* Cor do Texto */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}
/* Numeros das imagens */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;}

O trecho .CSS_LIGHTBOX_SCALED_IMAGE_IMG usa códigos para arredondar os cantos das imagens e colocar sombra nas imagens infelizmente em alguns navegadores isso pode não funcionar corretamente por isso se quiser trocar esses efeitos na imagem por uma borda pode fazer isso apagando esse código que está entre as chaves e usando um código de borda comum: border: solid 1px #000, veja aqui outros estilos de bordas para utilizar no lightbox.

Esse trecho do CSS personaliza (troca) o botão fechar por outra imagem por isso se não quiser modificar o botão não coloque esse trecho do código.

.CSS_LIGHTBOX_BTN_CLOSE {
background: url(link da imagem) no-repeat !important;
width: 24px !important;
height: 24px !important;
}

E claro troque o texto link da imagem pelo endereço de uma imagem para usar como botão fechar, veja abaixo alguns links sobre criar e hospedar a imagens:
Hospedar Imagens no Blogger
Dicas sobre Colocar Efeitos em Fotos/Imagens e Como Fazer Banners
Criar Banner para Blogs: Programas e Sites para Editar Imagens

Colocar Códigos do LightBox no Blogger

Depois que fizer suas alterações no código entre na pagina modelo > editar html (faça um backup antes de modificar o HTML do blog), procure por ]]></b:skin> e coloque o código que mostramos antes dele. Veja aqui como fazer o backup e como achar códigos no HTML usando essa nova pagina (abril/2013) de edição de HTML.

Agora é só fazer alguns testes no blog e descobrir qual a melhor forma de aproveitar essas personalizações do lightbox para combinar com o template e cores do seu blog.

7 comentários :

  1. Fabiano, tem efeito legal que as pessoas estão fazendo com banner do adsense ou qualquer outra coisa importante no blog, para nçao sair de vista do usuario, exemplo esse blog fez a caixa social do face não sair de vista por mais que o usuara role para baixo, esse blog, http://www.ferramentadigital.com/ sabe qual é o nome dessa propriedade no css?

    ResponderExcluir
  2. vou fazer alguns testes com aquele código e publicar um tutorial assim que possivel

    ResponderExcluir
  3. Aguinaldo acabei de publicar um tutorial sobre esse assunto:
    Colocar Gadget Flutuante no Blogger

    ResponderExcluir
  4. Fabiano sabe em algum blogs quando vc entra pra ler uma história ver uma foto ou vídeo a tela fica preta em volta,tipo cinema,pra vc focar só no vídeo,ou imagem e tals
    não sei se vc ja viu
    no caso eu queria fazer para vídeo ai quando colocassem o mouse em cima do vídeo aconteceria o efeito
    se já não tiver um post aqui falando disse,seria até uma boa sugestão

    vlw

    ResponderExcluir
  5. Fabio amigo preciso de uma ajuda sua, estou com um serio problema no meu Lightbox
    sabe o que acontece quando clicamos na imagem ela aparece por trás do site dessa forma http://2.bp.blogspot.com/-du9bG7yvd0s/Uvwo5o_1ZsI/AAAAAAAABJ0/f2dNUrkI8Jk/s1600/cats.jpg tem como ser resolvida, algum código ? eu ficaria grato de me desse uma dica obg

    ResponderExcluir
  6. Abina Silva

    pelo que vi na imagem seu template é personalizado então é complicado corrigir erros porque precisa fazer muitos testes, ou seja, é tentar alterar partes do html até achar o erro.

    acho que seria mais fácil trocar o template ou desativar o lightbox

    ResponderExcluir