Biquínis

Leia mais

Looks All Jeans

Leia mais

DIY: Cropped Boho

Leia mais

- Tutorial: Efeito Light B


  Oie meus amores, para quem percebeu desculpe pelo blog ter ficado um tempo fora de área é que aconteceu um imprevisto (lerdeza minha).. Eu fiz um blog de testes para por o preview dos tutos que irei postar aqui, no entando ia por um layout base nele só pra ficar arrumadinho, porém eu estava com a aba dos dois blogs abertos e adivinhem ??  Coloquei o lay aqui no blog, é isso mesmo fiz uma bagunça total, perdi os códigos e enfim tive que recuperar e procurar e fazer tudo de novo, não está 100% igual a antes mais achei que ficou até melhor assim !! euheuhue 

  Enfim, eu aproveitei que estava mexendo com html e criei um efeito que simplesmente amei que por ser simples coloquei o nome de efeito light border mas efeito light b é mais bonitinho fmaklsdjoiajw mas vamos ao tutorial...

Para visualizar o efeito clique aqui  e para ver o tuto clique em mais informações.. 
Vá em modelo > Editar HTML > Aperte Ctrl + F e procure por : ]]></b:skin>

E acima dessa tag cole o código abaixo :

/*----- EFEITO LIGHT B -----*/
.lala {
height:160px; width:160px;  /*Coloque aqui o tamanho de sua imagem*/
position:fixed;
background:url(URL DA SUA FOTO AQUI); }
.lightb {
border: 2px solid #dcdcdc;
width:100px;
height:auto;
margin-top: 10px; /
padding:3px;
opacity:0;
text-align:center;
margin-left:auto;
margin-right: auto;
line-height:15px;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
.lightb a {
color:#fff;
font-size:10px;
font-family:cambria;
text-transform:uppercase;
display:block; text-decoration:none;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;transition: all 1s ease;
}
.lightb a:hover {
letter-spacing: 5px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
 .lala:hover .lightb {
opacity:1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
/*----- FIM DO CODE -----*/

Não modifique nada do código apenas coloque o tamanho de sua imagem e o url aonde se pede.

Vá agora em Layout > Adicionar um gadget > E aonde quiser que apareça o efeito cole o código abaixo :

<div class="lala">
<div class="lightb">
<a href="LINK">nome1</a><br>
<a href="LINK">nome2</a><br>
<a href="LINK">nome3</a><br>
<a href="LINK">nome4</a><br>
</div>
     E pronto ! Facil e lindo espero que tenham gostado, se usar ou postar esse tuto credite !! Beijinhos e até o próximo post 


28 comentários:

  1. Bom dia amore ♥
    tenha um ótimo dia
    uma excelente semana
    Beijão ✿◠‿◠)✿
    /(.”)__☆
    /||\
    _||_
    www.coisasdeladdy.com

    ResponderExcluir
  2. Amei <33

    http://historiaimperfeita.blogspot.com/

    ResponderExcluir
  3. Lindo blog, adorei o efeito. vou tentar fazer
    bjus
    ja estou seguindo aqui, pode retribuir?
    http://dieinydicas.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Brigadinhaa, tenta sim rs
      Ok, retribuo sim beijoss ♥

      Excluir
  4. Nossa sei como é isso .
    Por isso que criei um outro perfil so para os blogs de teste e.e
    Nossa que lindo esse efeito u.u fiquei com vontade de usa no novo layout , mas ainda tenho que arrumar espaço .

    Geekegirlie.blogspot.com|| ✖G²Official ✝

    ResponderExcluir
    Respostas
    1. Pois é, eu ja sou bem lerda ai ajuda eheuheuheuh.
      Brigadinhaa, se arrumar o espaço fique avontade :33 Beijinhoss

      Excluir
  5. Ameii esse efeito *--------------*
    Muito criativo da sua parte, realmente ficou bem legal.
    ~ Beijinhos

    s-ugarcubes.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Eu também *-------* Brigada flor, beijosss ♥

      Excluir
  6. Que lindo o efeito! amei o post, e essa de perder os códigos já aconteceu comigo então é normal :3 Kissus.

    www.k-awaiicherry.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigadaa, pois é acontece euheuheue

      BEIJOSS ♥

      Excluir
  7. Adorei; seria legal se você colocasse imagens pra mostrar o antes e depois. :) Beijos.

    www.nahboa.com

    ResponderExcluir
    Respostas
    1. Obg, realmente :/ mas n tenho fotos do blog antes desculpa..
      Beijoss ♥

      Excluir
  8. Olá flor , amei o efeito , to te retribuindo , agr faz o mesmo , bjss
    http://coffeecomsugar.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi amr, brigadinhaa vou seguir sim..
      Beijoss ♥

      Excluir
  9. Ótimo tutorial! Adorei o efeito!

    www.simplekawaii.blogspot.com

    Kiss | Danielle

    ResponderExcluir
  10. Adorei seu blog *O* já estou seguindo e você pode seguir meu blog?
    http://umdiariosobremoda.blogspot.com.br/

    beijoos <3

    ResponderExcluir
    Respostas
    1. Obrigadaaa, to indo seguir o seu agora ok !? Beijinhoss ♥

      Excluir
  11. Oi Layla,eu te agradeço pela sua visita no blog,mas esse não é meu estilo de blog :( Mas mesmo assim parabéns,ele é muito lindo ^^
    www.divadecristal.blogspot.com

    ResponderExcluir
    Respostas
    1. Oie tudo bem flor entendo, obrigada mesmo assim beijoss <33

      Excluir
  12. Obg pelo comentário em meu blog, te seguindo :D Espero sua retribuição :)
    coisasuteisoufuteis.blogspot.com.br

    ResponderExcluir
    Respostas
    1. De nada e obrigada por seguir. já estou seguindo seu blog de volta..
      Beijinhoss ♥

      Excluir
  13. Lindo seu blog ! Já to seguindo, retribui ? bjs
    papodemeninasaer.com

    ResponderExcluir
    Respostas
    1. Obrigada, já estou seguindo de volta !! Beijoss ♥

      Excluir
  14. Amei esse tutorial!

    Tô te seguindo, vou voltar sempre pra acompanhar as novidades.
    Blog: http://www.papodemeninasaer.com/
    Sorteio: http://www.papodemeninasaer.com/2014/01/sorteio-ofertas-da-semana-da-loja-tudo.html

    ResponderExcluir