Como personalizar Light Box.


Bom Dia chocolates lover's. Desculpem-me não ter postado durante alguns dias, mas estava sem pedidos e sem criatividade para botar alguma postagem aqui. Mas isso, é por realmente falta de ideias.  Mas como recebi um pedido, trouxe aqui um tutorial super bacana para vocês. Eu achei ele aqui, mas a pessoa que postou deu créditos a esse blog.
Quando clicamos na imagens, vemos ela em um tipo de "janela" que se abre no blog, correto? É isso que vamos personalizar hoje. O nome é Light Box. Se você não entendeu o que quis dizer, necessariamente nem eu teria entendido, clique aqui.

Se você não sabe ativar a Light Box, siga o "passo-a-passo" dessa imagem. () Assim, você ativa o comando do visualizador e nós podemos personalizá-lo livremente.
Para começar a personalização, expanda o modelo dos gadgets e procure por: <body>. Acima da tag, cole:
<style>
</styte>
Entre essas tags que colocaremos os códigos da personalização. Não deixe de colocar nenhum deles entre essas duas, o modelo vai dar como incorreto. Experiência própria.
Agora vamos, realmente, para a personalização.
1- Fundo ()
.CSS_LIGHTBOX_BG_MASK {opacity: 0.5 !important;background-color: #222 !important;
Em negrito, está destacado a área que se refere a opacidade do fundo e em itálico a cor do fundo que teremos que personalizar.
2- Barra de Navegação ()

.CSS_LIGHTBOX_FILMSTRIP {
background: #991d1d  !important;;
line-height: 0;
overflow: hidden;
position: relative;
width: 100%;
height: 60px;
}
Destaquei em negrito, onde vocês terão que colocar o código da cor do background da barra de navegação do visualizador.
 3- Botão de Fechar ()

.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;}
Destaquei em itálico aonde terão que colocar a url do botão de fechar e em negrito a largura e altura da imagem que vai servir como botão.

Espero que tenham entendido. Caso não, clique aqui e veja o tutorial do A.N. Tem umas imagens de botão para fechar nele também.
/Ana

17 comentários:

  1. AH eu sempre quis saber como fazer isso *u* Salvei esse post nos favoritos pra usar no proximo layout u.u

    ResponderExcluir
  2. Que lindinho, irei fazer isso no proximo lay!!
    http://chuvasdioutono.blogspot.com.br/

    ResponderExcluir
  3. aaaaah, queria mesmo saber como faz isso (((((((((((:

    Uaau, parabéns pelo seu blog, eu amei aqui, amei sua criatividade, seu modo de falar com os leitores, a forma que você usa nas postagens, o design e etc, eu realmente curti e vou voltar aqui sempre ! Obrigada por ter criado . Parabéns novamente e já estou seguindo ((: Parabéns !!
    http://dezesseteetantos.blogspot.com.br/

    ResponderExcluir
  4. Nya que lindooo, sempre quis aprender, vou usar *---*

    ResponderExcluir
  5. Vou usar agora a Light Box, estava vendo ela em diversos blogs mas nao sabia o que era, agora vou usar &-*

    ResponderExcluir
  6. Sempre quis saber como deixar ela fofa >.<
    quirky-tree.blogspot.com

    ResponderExcluir
  7. Muito boa essa dica,d+!

    ~Será que vocês poderiam me ajudar na meta de 40 seguidores pro meu blog?
    - Little Things

    ResponderExcluir
  8. Nossa eu ainda não sabia que dava para personalizar a Ligth box , tuto muito útil.

    http://fantasy-kawaii.blogspot.com.br/

    ResponderExcluir
  9. Não sabia que dava para personalizar!!! Muito grata, vou usar agora!
    http://garotadabolsa.blogspot.com.br/
    Segue se gostar?

    ResponderExcluir