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.
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?
ResponderExcluirvou fazer alguns testes com aquele código e publicar um tutorial assim que possivel
ResponderExcluirObrigado Fabiano!
ResponderExcluirAguinaldo acabei de publicar um tutorial sobre esse assunto:
ResponderExcluirColocar Gadget Flutuante no Blogger
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
ResponderExcluirnã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
Fabio amigo preciso de uma ajuda sua, estou com um serio problema no meu Lightbox
ResponderExcluirsabe 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
Abina Silva
ResponderExcluirpelo 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