Olá :3 Tudo bem com vocês?
Gente, o natal está chegando né?
Então, vocês estão participando lá do sorteio? Eu estou rsrs, apesar de que meu layout novo só tem 3 dias né? Vocês não sabem, acredita que o blog tem apenas 13 dias? Tô falando sério, eu pensava que o blog tinha quase 1 mês, mas na verdade temos apenas 1 semana e 6 dias e nós já vamos fazer 2000 visualizações (tenho certeza que quando eu acabar este post vamos ter alcançado a meta).
Hoje trouxe um tutorial de personalizar a Light Box, aquele fundo preto que aparece quando clicamos na imagem da postagem, sabe? Mas se quiserem se aprofundar, cliquem na ilustração da postagem e verifiquem a aréa toda personalizada Ah, muitas pessoas tentaram fazer o tutorial por outros blog mas algumas não conseguiram devido à modificação dos códigos dos modelos! Inclusive eu testei no meu modelo de testes e realmente não achei o código, mas eu descobri uma forma que da certo *-*.
Então se quiserem ler, Continuem =)
É só ir nas suas configurações das postagens e comentários e observar se a opção Lightbox está em "Sim".
Pronto, agora vamos partir para a personalização!
Vá no código HTML do seu blog, dê Ctrl+F e procure por <body> mas, se você não achar, assim como muitos que usaram outros tutoriais, pesquise apenas por <body (sem a seta >).
Achou? acima da tag procurada cole o código a seguir:
Agora irei explicar os códigos, são bem fáceis:
.CSS_LIGHTBOX_BG_MASK { é a area do fundo da lightbox, troque #aaaccc pela cor que você quer em lugar daquele fundo padrão, ou seja o fundo preto.
Fundo padrão da Light Box:
.CSS_LIGHTBOX_FILMSTRIP { Essa parte da Light Box aparece somente quando há mais de 1 imagem da postagem. Mas para não enrolar, é melhor eu mostrar nérsrs?
Fundo padrão da barra aonde mostra todas imagens:
Você pode trocar esse fundo preto por outro, é só modificar #c2a8c7 pela cor que quiser.
E por fim .CSS_LIGHTBOX_BTN_CLOSE { que é o botão de fechar, ou seja, vamos trocar o padrão por outro botãozinho mais bonitinho.
Botão Padrão:
Para trocar o botão de fechar troque URL pela url(link) do botão, no final na postagem deixarei alguns botões. Gostaram do tutorial de hoje? Calminha que ainda tenho uma dica para usar na Light Box ;)
Deixe transparente.
Algumas pessoas devem ter percebido que a minha Light Box está transparente né?
Mas, não, ela não esta transparente, literalmente, pois eu apenas uso a cor do fundo do meu blog no fundo da Light Box e a minha opacidade eu deixo sempre em 0.5 e acaba que parece que o fundo está mesmo transparente!
Obs: se não quiser usar ele tão transparente, no código de transparência que está no código (opacity: 0.5 !important;) troque o 0.5 por um numero mais alto, ou seja, 0.6 até 0.9 ou até mesmo 1.0 (se você deixar em 1.0 não haverá transparência nenhuma, mas use como achar que fica bonito *-*)
E como bônus alguns botoes para fechar:
<style>
.CSS_LIGHTBOX_BG_MASK {
opacity: 0.5 !important;
background-color: #aaaccc !important;
}
.CSS_LIGHTBOX_FILMSTRIP {
background:#c2a8c7 !important;;
line-height: 0;
overflow: hidden;
position: relative;
width: 100%;
height: 60px;
}
.CSS_LIGHTBOX_BTN_CLOSE {
cursor: pointer;
background: url('URL) no-repeat !important;;
width: 32px !important;
height: 32px !important;
top: 3px;
position: absolute;
z-index: 100;
}
</style>
Agora irei explicar os códigos, são bem fáceis:
.CSS_LIGHTBOX_BG_MASK { é a area do fundo da lightbox, troque #aaaccc pela cor que você quer em lugar daquele fundo padrão, ou seja o fundo preto.
Fundo padrão da Light Box:
.CSS_LIGHTBOX_FILMSTRIP { Essa parte da Light Box aparece somente quando há mais de 1 imagem da postagem. Mas para não enrolar, é melhor eu mostrar né
Fundo padrão da barra aonde mostra todas imagens:
Você pode trocar esse fundo preto por outro, é só modificar #c2a8c7 pela cor que quiser.
E por fim .CSS_LIGHTBOX_BTN_CLOSE { que é o botão de fechar, ou seja, vamos trocar o padrão por outro botãozinho mais bonitinho.
Botão Padrão:
Para trocar o botão de fechar troque URL pela url(link) do botão, no final na postagem deixarei alguns botões. Gostaram do tutorial de hoje? Calminha que ainda tenho uma dica para usar na Light Box ;)
Deixe transparente.
Algumas pessoas devem ter percebido que a minha Light Box está transparente né?
Mas, não, ela não esta transparente, literalmente, pois eu apenas uso a cor do fundo do meu blog no fundo da Light Box e a minha opacidade eu deixo sempre em 0.5 e acaba que parece que o fundo está mesmo transparente!
Obs: se não quiser usar ele tão transparente, no código de transparência que está no código (opacity: 0.5 !important;) troque o 0.5 por um numero mais alto, ou seja, 0.6 até 0.9 ou até mesmo 1.0 (se você deixar em 1.0 não haverá transparência nenhuma, mas use como achar que fica bonito *-*)
E como bônus alguns botoes para fechar:
Vocês também podem fazer os seus botões *-*
Créditos (www)
Beijos seus lindos ><
Não conhecia o tutorial, acredita? Ameei, sério, vou usar com certeza!
ResponderExcluirhtmlandresources.blogspot.com
Awh que bom que ajudei *-*!
ExcluirPois é o blog fica super fofinho e sem aquele fundo preto feião né? ^^
Bjs amor ><
humm adoreii muito útil, percebi que esta começando agora na blogosfera, te desejo muito sucesso e que você consiga alcançar seus objetivos, adorei o blog e agora estou seguindo, gostaria muito de saber se você aceita afiliação, se aceitar me avisa linda!!!
ResponderExcluiraguardo sua resposta!!!
http://zombiecutie.blogspot.com.br/
Owti, que bom que você gostou Leslie *-*
ExcluirSim, estou começando agora haha, muito obrigada linda. é muito bom receber estas palavras, você não imagina o quanto eu tô feliz *-*.
Aceito sim, você já está nos afiliados, bota lá também :3
Gente, que bloguinho lindo o Zombie Cutie, amei, seguindo lá ^^.
Beijos Lê *u*
Eu pensava que meu blog tinha um ano, ehueh. Já conhecia, uso no meu blog de avatares, beijos >33<
ResponderExcluirH. Cherry ♡
Ashuahusa, sério? Awn, que boom *-*
ExcluirBeijo Elô *-*
ótimo tutorial :3 seguindo aqui! blog perfeito.
ResponderExcluirhttp://dr-eaming.blogspot.com.br/
Obrigada Yumi :3 Obrigada por seguir, muito obrigada :3
ExcluirNossaa, seu blog é mui lindo, seguindo lá, amei *3*
Beijinho *-*