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..
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
Amei <33
ResponderExcluirhttp://historiaimperfeita.blogspot.com/
Obrigada :3
ExcluirLindo blog, adorei o efeito. vou tentar fazer
ResponderExcluirbjus
ja estou seguindo aqui, pode retribuir?
http://dieinydicas.blogspot.com.br
Brigadinhaa, tenta sim rs
ExcluirOk, retribuo sim beijoss ♥
Nossa sei como é isso .
ResponderExcluirPor 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 ✝
Pois é, eu ja sou bem lerda ai ajuda eheuheuheuh.
ExcluirBrigadinhaa, se arrumar o espaço fique avontade :33 Beijinhoss
Ameii esse efeito *--------------*
ResponderExcluirMuito criativo da sua parte, realmente ficou bem legal.
~ Beijinhos
s-ugarcubes.blogspot.com.br
Eu também *-------* Brigada flor, beijosss ♥
ExcluirQue lindo o efeito! amei o post, e essa de perder os códigos já aconteceu comigo então é normal :3 Kissus.
ResponderExcluirwww.k-awaiicherry.blogspot.com
Obrigadaa, pois é acontece euheuheue
ExcluirBEIJOSS ♥
Bom dia flor ♥ você também, beijoss
ResponderExcluirAdorei; seria legal se você colocasse imagens pra mostrar o antes e depois. :) Beijos.
ResponderExcluirwww.nahboa.com
Obg, realmente :/ mas n tenho fotos do blog antes desculpa..
ExcluirBeijoss ♥
Olá flor , amei o efeito , to te retribuindo , agr faz o mesmo , bjss
ResponderExcluirhttp://coffeecomsugar.blogspot.com.br/
Oi amr, brigadinhaa vou seguir sim..
ExcluirBeijoss ♥
Ótimo tutorial! Adorei o efeito!
ResponderExcluirwww.simplekawaii.blogspot.com
Kiss | Danielle
Obrigada amr, beijosss ♥
ExcluirAdorei seu blog *O* já estou seguindo e você pode seguir meu blog?
ResponderExcluirhttp://umdiariosobremoda.blogspot.com.br/
beijoos <3
Obrigadaaa, to indo seguir o seu agora ok !? Beijinhoss ♥
ExcluirOi 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 ^^
ResponderExcluirwww.divadecristal.blogspot.com
Oie tudo bem flor entendo, obrigada mesmo assim beijoss <33
ExcluirObg pelo comentário em meu blog, te seguindo :D Espero sua retribuição :)
ResponderExcluircoisasuteisoufuteis.blogspot.com.br
De nada e obrigada por seguir. já estou seguindo seu blog de volta..
ExcluirBeijinhoss ♥
Lindo seu blog ! Já to seguindo, retribui ? bjs
ResponderExcluirpapodemeninasaer.com
Obrigada, já estou seguindo de volta !! Beijoss ♥
ExcluirAmei esse tutorial!
ResponderExcluirTô 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
Obgg, volta sim >< Beijinhoss ♥
Excluir