14 janeiro 2013

Tutorial: Imagem Magnif

Tumblr_lngeu3vsya1qj27d6o1_500_large

Oi gente!!!
Hoje eu vim trazer um tutorial maravilhoso que eu encontrei no tumblr Single Themes! Mas eu adaptei para o blogger.
É um tutorial ideal para postagens que contém muitas imagens e que não se pode ocupar muito espaço. Então elas são pequenas, quando se clica sobre ela, seu tamanho é aumentado. Veja o exemplo aqui.

Vamos ao tutorial?

Primeiro, é necessário instalar o código no seu HTML. Então, cole o código em um novo gadget Java Script/HTML.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://static.tumblr.com/b1gnlwd/SrMm1i1zt/jquery.magnifier.js"> /*********************************************** * Image Magnifier Wellyson (isetfiretopanem.tumblr.com) * Para disponibilização somente nos Single Themes * Não apague nada no código ***********************************************/ </script>
Feito isso, salve o modelo.

Depois, você vai colar o código abaixo  no lugar que você vai usar, por exemplo, no post.
<img src="URL DA IMAGEM" class="magnify" style="width:200px; height:200px" />
Use o código para cada imagem inserida.
Agora vem a hora da personalização do código. Depois de colocar o url da imagem, repare que a largura e a altura estão 200x200. Caso suas imagens não sejam do mesmo tamanho, use "auto" no lugar de 200 px, ou ainda coloque o tamanho desejado.

Eu AMEI esse tutorial. Vocês vão ver eu usando ele aqui no blog muitas vezes. Super útil!
Beijo!

3 comentários:

  1. Tutorial perfeito. Vou usar no meu blog.

    ResponderExcluir
  2. Que graça*-*
    http://isabellalessa.com/

    ResponderExcluir
  3. Oi, Tem uma tag para você em meu blog, espero que goste - afiliada
    http://republicadasteens.blogspot.com.br/2013/01/tag-11-coisas-recebico-pelo-kawaii.html#more

    ResponderExcluir

© Blog da Nah | Oficial - 2012. Todos os direitos reservados. Criado por: Natália Médice. Tecnologia do Blogger. imagem-logo