17 de nov de 2012

Tutorial: Elite Candy


Oii minhas gracinhas, tudo bem?!
Perceberam a nova roupinha né? Não magina. Dessa vez a Aninha trabalhou duro, afinal ela não chegava em um conceito com as cores, de jeito nenhum...e quem aguentava era eu hehe' Tentei ajudar, mas ela é independente com certeza, fazendo tudo sem ajuda alguma. Porém as tentativas foram muitas.

Hoje eu vim postar um tutorial, que eu devia ter postado faz tempo. É um exclusivo que eu fiz *u* e usava aqui no Pincelando. A Elite Candy.
Eu acho super fofo o resultado,  vou deixar um live preview.


Seguinte, vá em Desing ~> Editar HTML ~> Dê um Ctrl+F ou F3 e procure por:

]]></b:skin>

Achou? Bem acima dessa Tag, cole o seguinte:

.elitecandy{
-webkit-transition-duration: .360s;
border:1px ridge  #faa7c6;
padding: 1px;
}
.elitecandy:hover{
border:1px ridge #FFF3F3;
padding: 1px;
moz-opacity:.80;
opacity:.80 ;
}
----------------------------------------------------------------------------------------------------
Vamos agora entender o código...

Em -webkit-transition-duration: .360s; é o efeito, a duração do hover. Opte por não mexer, mas se você souber...

Em border:1px ridge #faa7c6; é a primeira borda e seu estilo. 1px(expessura), ridge(estilo) e #faa7c6 sua cor. Altere o que quiser :)

Em border:1px ridge #FFF3F3; é o estilo da borda no hover. Altere como quiser também.

E por último, moz-opacity:.80; opacity:.80 ; é a opacidade no hover. Também aviso para não mexer, só se souber ;]

Agora, para usar a sua elite....
Vá em Layout ~> Adicionar Gadget ~> HTML Java Script e cole:

<a href="LINK" title="NOME DO BLOG"><img src="LINK DA SUA IMAGEM" class="elitecandy"/></a>

Perfeito! Tudo certinho? Eu acho super fofo o efeito!
Lembre-se: credite se usar, se der avise também!

Acho que é só isso, útil, rápido e...kawaii.
Qualquer coisa avise por comentário.

Kisses for you :3



8 comentários:

  1. OMG' Que foofa! Adorei o tutorial, esse efeito da elite é lindo. ♥

    Castelos que Recomendo | Meu Mundinho Colorido

    ResponderExcluir
  2. Efeito aprovadissimoo! \o/ muuito fofo, alias seu blog de testes tá impecável, beijinhoos!

    ResponderExcluir
  3. Que elite mais linda *-*
    Adoro efeitos assim bem simples ~

    @Kawaii World.

    ResponderExcluir
  4. Olá será que você poderia seguir o meu seria uma honra se segise agradço muito
    nome:Super kawaii
    url:http://wwwsuper-kawaii.blogspot.com.br/

    ResponderExcluir
  5. Oii fofa, tudo bom ?
    Eu amei seu blog, ele é realmente lindo, amei o layout e o conteúdo, parabéns, você tem talento ^^
    Estou seguindo, segue de volta ?

    http://she-dream-with-paradise.blogspot.com.br/

    ResponderExcluir
  6. Amei o tuto, fica lindo demais o resultado, parabéns :)

    Adolescente Nerd

    ResponderExcluir
  7. OMG' fica tudo mt lindo e fofoo! -de maais- adorei e super fácil ...Bom criei um blog sweet cloud , na verdade ganhei e espero que você visite e deixe sua marca lá comentando e seguindo bjos. *seguindo* sweetcloud-oficial

    ResponderExcluir

Olá, aqui temos uma Mini F.a.q pra te auxiliar:

-Não aceitamos Tags e Selinhos
-Precisa de uma Postagem? Pode comentar :)
-Afiliação? Somente na página sobre como se afiliar. Pedidos nos comentários serão desconsiderados
-Por favor, sem xingamentos para o bem de todos
-Nunca deixe a URL do seu blog no final do comentário, o blogger considera isso SPAN e exclui seu blog :(
-Por favor não plageie.
Mais alguma pergunta? Comente aqui ou Leia nossa F.a.q completa

Obrigada