03 março 2013

Efeito Just Jump

| |

Bom dia ^-^
Eu estava vendo o post passado sobre como dividir uma foto em várias partes e coloca-las na elite de afiliados e aquele efeito ficou bem cru. Foi algo simples, apenas para destacar a foto, então decidi fazer um efeito mais elaborado me inspirando no último post.

Agora ao tutorial, veja a preview. Gostaram? Então, leia mais ;p


No HTML do seu blog, aperte F3 e procure por ]]></b:skin> e acima cole isso. Se você procura vai ver width: 50px; que é o tamanho da imagem, antes de mudar algo siga essa dica:
Se você quiser uma elite com imagens de 50px procure imagens de 70px ou 80px, pois como viram a imagem vai aumentar e, se você usar imagens de 50 e no width:50px, quando isso acontecer a imagem vai ficar desfocada, por isso é melhor usar imagens maiores e quadradas.

Visualize para ver se nada desconfigurou, e depois salve.

Agora vá em layout • adiconar gadget • HTML/JavaScript e cole:

<div class="jumping-isa">
<a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a>
<a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a>
<a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a>
<a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a>
<a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a>
<a href="Link" title="Nome"><img src="URL DA IMAGEM" class="jump-isa"></a>
</div>

13 comentários:

  1. Adorei o tutorial,lindo o theme.

    Beijos
    Amora R.

    ResponderExcluir
  2. O preview do efeito não abriu... :/ Tem outro jeito de vê-lo?
    Ana~ thesecretdiar-y.blogspot.com

    ResponderExcluir
    Respostas
    1. Meu Deus que efeito lindo! Adorei! Serio!
      Amei, amei, amei!
      Ana~ thesecretdiar-y.blogspot.com

      Excluir
  3. Amore, estou curiosa, o link do preview está quebrado.
    http://yogo-berry-official.blogspot.com.br/

    ResponderExcluir
  4. Não dá mesmo pra ver o preview, flor ):
    Mas com certeza deve ser um dos seus códigos diwos *-*
    E eu queria saber fazer html para tumblr, o seu de goodies é lindíssimo ^^

    Beijos
    Too Kawaii

    ResponderExcluir
  5. Amo seu blog, é um dos que visito todos os dias pra ver as novidades, pensando nisso coloquei seu blog na lista do SIGO E RECOMENDO, confira:

    http://leyahff.blogspot.com.br/

    Bjiinhuss Cariinhosos ♥

    ResponderExcluir
  6. Não consegui ver o efeito, mas fiz em um blog de teste e ficou lindooo, adoreiiii
    Bjinhos
    http://chuvadesonhooficial.blogspot.com.br/

    ResponderExcluir
  7. Pena que não eu para ver o preview pois está com uns códigos, mais o efeito deve ser lindérrimo :)

    Ah, afiliado, eu queria avisar que o Adolescente Nerd está com um novo layout, poderia dar sua opinião? conto com você.

    ResponderExcluir
  8. Eu adorei o theme lindo u.u
    itsrockmore.blogspot.com

    ResponderExcluir
  9. Oii... eu queria te dar uma dica, eu adoro seu blog mas acho um saco ter que ficar abaixando todos os comentarios... teria como vc tirar?
    Obrigaada (:

    ResponderExcluir
  10. Adorei a postagem e também o achei muito prático, aliás não encontrei imagens de 70px e 80px por isso peguei aquelas que havia no preview, O.K.?
    Beijos

    ResponderExcluir
  11. Adoro este efeito,, ele é verdadeiramente perfeito >3<

    kawaii-unlike.blogspot.com

    ResponderExcluir

« »