Dicas, truques, tutoriais, reviews, promoções e informação

segunda-feira, 21 de fevereiro de 2011

BigImg.it - Personalize as imagens grandes em seu blog

Esta é uma dica para quem tem um blog ou site em qualquer plataforma (seja Blogger, Wordpress, ou host pago).

Quando inserimos uma imagem grande no blog, temos de ajeitá-la corretamente para ficar proporcional ao post, sidebar e etc. Mas e se você deixasse as imagens grandes de maneira mais personalizadas e dar um efeito a elas, tornando a visualização mais prática ao leitor? Seria interessante, não? Isso é possível com o aplicativo online BigImg.it.

Trata-se de um applet que pode ser usado para deixar as imagens em maior destaque em seu blog. Tudo isso é feito através de um iFrame, que por sua vez virá com a imagem nas dimensões estipuladas por você, e com plena capacidade de zoom e visão panorâmica.

Ou seja, você terá a possibilidade de pegar uma imagem grande e colocá-la em uma janela proporcional ao post para que seus leitores possam dar um zoom in e out a vontade, e visualizar a parte da imagem que eles preferirem. Tudo isso com a intenção de aproveitar ao máximo suas imagens e não ter de esperar uma eternidade para a imagem carregar.

DEMO

Para conferir o resultado, acesse este link para visualizar uma demonstração do efeito que o aplicativo gera nas imagens.

Para navegar na imagem, dê um clique sobre a imagem e vá navegando por ela. Utilize o botão scroll do mouse (aquela rodinha) para dar zoom in e out.

Como Utilizar o BigImg.it

1. Primeiramente, hospede a sua imagem em um servidor de sua preferência e copie o URL da mesma. Recomendo o TinyPic. Dê preferência para imagens grandes.

2. Depois caminhe até o site BigImg.it e cole o URL na caixa Make Your Own. Clique em Next logo em seguida.

zoom-imagens-grandes-blogger

3. Na próxima tela, estipule as dimensões (largura e altura) da sua imagem. Selecione a opção Custom para configurar dimensões personalizadas. Depois clique em Next.

personalizar-imagens-blogger

4. A seguir selecione a posição da imagem na janela. Pessoalmente recomendo que você coloque a opção Center ou Bottom. Mas fica a seu critério. Clique em Next novamente para prosseguir.

imagem-navegavel-blogger

5. Após isso, um código HTML será gerado para você. Copie todo o código.

visualização-panoramica-imagens-blogger

6. Agora faça login em seu perfil no Blogger e cole o código HTML copiado na área desejada do seu blog.

Por exemplo:

► Se for colocar a imagem em um post, clique na aba Editar HTML do post e cole o código lá.

bigimg.i-efeito-nas-imagens-grandes-meu-site

► Se for colocar a imagem na sidebar, vá em Design Elementos de página Adicionar um Gadget Selecione o item HTML/JavaScript e cole o código lá.

customizar-imagens-grandes-blogger

clicar-na-imagem-e-andar-com-mouse

Agora é só apreciar o resultado!

0 comments:

Postar um comentário