sábado, 5 de janeiro de 2013

Bem Vindos + Tutorial - Efeito Nebulla


Olá pessoal, Sejam bem-vindos ao World Sweet !!
 Eu me chamou Aléxia Martins e tenho 15 anos, sou estudante do 2° ano do ensino médio e amo navegar na Web.. Agora, que já me apresentei vamos falar um pouco sobre o blog. Eu amo esse mundo da blogosfera por isso criei o World Sweet. ele vai sempre ter tutorias, dicas para o seu blog, e é claro que também não irá faltar muita diversãooo ..
Espero que gostem do blog, porque tudo o que farei será dedicado á vocês, meus leitores ^^

Bom, agora vamos ao primeiro post do nosso blog né. Hoje, escolhi o tutorial com o Efeito Nebulla. É aquele que parasse uma plaquinha quando você passa o mosse encima da imagem. Veja a foto com o efeito abaixo:


 Vá até Modelo  Editar HTML  aperte Ctrl + F e procure por:

 ]]></b:skin>
Acima dessa tag, cole:
figure {    margin: 3px;    width: LARGURApx;    height: ALTURApx;    overflow: hidden;    position: relative;    border: 3px solid #CORDABORDA;    margin-right: 3px;    float: left;}figcaption {    font-family: verdana;    font-size: 11px;    position: absolute;    display: block;    width: 111px;    height: 20px;    left: 267px; bottom: 6px; text-align: center; color: #CORDAFONTE;    text-shadow: none; background: url(http://i1234.photobucket.com/albums/ff411/SweetLG/78-1.png); border: 3px solid #CORDABORDADAFAIXA; line-height: 20px;    box-shadow: rgba(0,0,0,.5) 0 2px 8px; -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);    -o-transform: rotate(-45deg); transition-duration: 60s; -webkit-transition-duration: .60s;}figure:hover figcaption { left: 35px;bottom: 10px;}
Nesse código a muita coisa para ser editada, mais para facilitar, destaquei os mais importantes em ROXO.  Recomendo que a largura e altura sejam ambas 108px, pois se você mudar, vai ter que trocar o left e bottom da faixa. Após editar tudo que está em negrito, salve. 

 Agora vá em, Layout  e adicione um gadget de HTML/JavaScript e cole:
<a href="SEULINK"><figure><img src="LINKDAFOTO" width="108px" alt=""/>
<figcaption>NOME</figcaption>
</figure></a>
  Edite agora os códigos em negrito e Salve. Agora, seu gadget estará pronto. 
Créditos ao Kawaii World 

Espero que tenham gostado..

8 comentários:

  1. Bem legal o tutorial eu aprendi no KW, eu usei bastante é bem útil.

    ~Beijos

    crazy--designer.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que bom que gostou Vitoria. Foi lá que eu peguei o tutorial rs'
      Beijos ~

      Excluir
  2. Seja bem vinda flor ^-^
    Boa sorte com o blog .
    Seguindo , me segue ?

    Beijos :*

    http://pensamento-jhenny.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada linda ^^
      Claro, será um prazer!
      ~Beijos

      Excluir
  3. Nossa, seja bem vinda guria (:
    O tutorial é bem legal tb rs.
    Obrigada pela sua visita viu? Eu amei o seu blog <3' e eu tô te esperando lá de novo! Beijos!

    www.soentreamigas15.blospot.com

    ResponderExcluir
    Respostas
    1. Obrigada flor, que bom que você gostou ^^
      Claro que irei visitar!
      ~Beijos

      Excluir
  4. Ainw amor, também estou começando. Amei seu blog oq achou do meu?

    ResponderExcluir
    Respostas
    1. Obrigada linda, então seja bem vinda ^^
      O seu blog também é um amor !
      ~Beijos

      Excluir