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.

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.

Veja mais Dicas e Tutoriais: > CSS > Efeitos > Imagens