• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

27 de dezembro de 2012

Como personalizar a Light Box

Tumblr_mes04yx9mg1qkz46ko1_500_large

Olá gente!
Estou feliz pois abriu um restaurante japonês perto da minha casa, mais ao mesmo tempo estou pasma em saber que tivemos mais plágios...ainda bem que sempre credito os blogs quando pego alguma coisa deles, é, mais eu trouxe um tutorial muito útil que achei no O Meu Brilhante Mundo faz um tempo, e usei aqui no blog várias vezes, o resultado fica ótimo então resolvi postar, e para quem não sabe o que é uma light box, clique na imagem:


viram o visualizador como é?! vamos aprender como modificar seu visualizador para ficar assim, claro que você poderá escolher todas as cores, é mais fácil do que imaginam, vamos aprender?
Primeiro, siga os passos explicados nessa imagem que encontrei no O.M.B.M


Depois entre no seu editar HTML e procure por:
</head>
Agora cole abaixo dele:
<style>

</style>
Todos os códigos de personalização vão ser colados entres essas duas tags: 
Ex:  <style>  Aqui vãos os códigos  </style>.

Agora chegou a hora de personalizar!
Fundo:


Cole entre as tags o seguinte código:
.CSS_LIGHTBOX_BG_MASK {
opacity: 0.5 !important;
background-color: #222 !important;
}
Verde: Código da cor
Rosa: O tanto de opacidade

Barra de navegação:


Cole entre as tag's:
.CSS_LIGHTBOX_FILMSTRIP {
background:#991d1d !important;;
line-height: 0;
overflow: hidden;
position: relative;
width: 100%;
height: 60px;
}

Só edite oque está de verde.
Botão de fechar:


Cole entre as tag's:
.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;
}
E no URL substitua pelo botão que quiser, achei no google alguns botões para vocês:

              
imageimageimageimageimageimage
imageimageimage


créditos secundários: www
ah, e não se esqueçam de curtir nossa chocopágina do facebook clicando aqui, depois irei postar jogos legais lá para vocês!

13 comentários:

  1. Acabei de testar o efeito, fica bem legal sim *_*
    Já conhecia mas a personalização era um pouco mais diferente.

    Beijocas, Anna || @_Lovers_HP
    http://world-cutest.blogspot.com.br/

    ResponderExcluir
  2. Obrigadeiro por visitar o Big Brigadeiro. :B
    Amo de montão o Adolescente Nerd! Sempre que posso, venho aqui!
    Tuto muito legal!!

    Peall, do Big Brigadeiro.

    ResponderExcluir
  3. Flor, já te botei nos afiliados, havia esquecido.. é que houve uma confusão e no próximo lay eu irei repor todos. Depois explico a confusão.. :/

    Nossa, adorei o tutorial! Não conhecia, irei usar com certeza e talvez até reblogar. Com a permissão, é claro. :)

    ResponderExcluir
    Respostas
    1. claro que pode reblogar né flor, esse tutorial é ótimo, e todos tem que conhecê-lo! Tenho vários outros tutos maneiros para trazer pra cá ;D

      obg por colocar na elite :3

      Excluir
  4. Fica bem fofo *--* , sempre achei o modelo padrão do blog muito feio kkk
    www.s-ummertimes-adness.blogspot.com

    ResponderExcluir
  5. Adorei o tutorial,estava procurando!Vocês são demais!
    sckittyworld.blogspot.com

    ResponderExcluir
  6. Acabei de criar um blog, essa era a única coisa que estava me incomodando >.<
    www.fcks-harrystyles.blogspot.com

    ResponderExcluir
  7. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Escrevi o link errado, mas ai em baixo está certo, rsrs.
      ( DESASTRADA :/ )

      Excluir
  8. Amei, amei, amei! Estou usando lá no meu bloguinho mais coloquei uma caixinha de créditos nele,ok? Podem conferir? Espero que gostem:
    http://teenagethiings.blogspot.com.br/

    ResponderExcluir
  9. Muito bom! Apesar de ser coisa pequena incomoda bastante aquele fundo preto que fica atrás ><
    Estou usando no meu blog!
    Kisses ♥ || Don't-Blink

    ResponderExcluir