Hoje veremos como incluir um efeito diferente nas imagens dos posts.
Trata-se de um efeito de pré-visualização em movimento das imagens dos posts, que funciona a base de um script desenvolvido por Alen Grakalic, autor do site CSS Globe em conjunto com o JQuery.
Com base no efeito que o script gera, eu fiz uma adaptação na chamada do código HTML e acrescentei um pouco de CSS para ter um melhor funcionamento no Blogger.
Neste efeito, quando passamos o mouse em cima de cada imagem miniatura, o script faz com que se abra uma "pop up" para visualização da imagem em tamanho maior.
Demo
Para conseguir este efeito, é necessário a incorporação de javascript à base da biblioteca JQuery e inserção de códigos CSS em seu template.
Segurança nunca é demais, portanto, recomendo que faça um Backup do seu template antes de prosseguir para evitar transtornos.
1. Instalar o arquivo Javascript:
Este script funciona em conjunto com a biblioteca do JQuery na versão 1.4.2, caso você já tenha esta biblioteca instalada em seu blog, não será necessário repetir a chamada dela( linha destacada na cor azul no código)
Vá na aba "design" em "Editar HTML" e procure pela tag
E cole logo ACIMA dela o código no link a seguir:
2. Aplicar estilos CSS:
Vá na aba "design", entre na edição HTML do seu template, não precisa clicar em "expandir modelos de widgets" e procure pela tag
e cole o seguinte código logo ACIMA dela:
Obs: Todos os trechos editáveis já estão identificados e destacados no código.
3. Ativar o efeito nas imagens:
Para usar o Efeito em Imagens dentro do post, é necessário que você hospede a imagem que vai utilizar, em algum servidor de imagem qualquer, como o Picasa Web, por exemplo.
Lembrando que o código a seguir deve ser inserido dentro da postagem a ser publicada, através da aba "editar html" no próprio editor de postagens do Blogger.
Para chamar o efeito em imagens utilize o seguinte código, e cole o endereço da sua imagem nos locais indicados:
No código acima, as partes destacadas em vermelho correspondem a largura e altura da imagem miniatura do post. Se preferir, você pode ajustar esses valores.
Trata-se de um efeito de pré-visualização em movimento das imagens dos posts, que funciona a base de um script desenvolvido por Alen Grakalic, autor do site CSS Globe em conjunto com o JQuery.
Com base no efeito que o script gera, eu fiz uma adaptação na chamada do código HTML e acrescentei um pouco de CSS para ter um melhor funcionamento no Blogger.
Neste efeito, quando passamos o mouse em cima de cada imagem miniatura, o script faz com que se abra uma "pop up" para visualização da imagem em tamanho maior.
Para conseguir este efeito, é necessário a incorporação de javascript à base da biblioteca JQuery e inserção de códigos CSS em seu template.
Segurança nunca é demais, portanto, recomendo que faça um Backup do seu template antes de prosseguir para evitar transtornos.
1. Instalar o arquivo Javascript:
Este script funciona em conjunto com a biblioteca do JQuery na versão 1.4.2, caso você já tenha esta biblioteca instalada em seu blog, não será necessário repetir a chamada dela( linha destacada na cor azul no código)
Vá na aba "design" em "Editar HTML" e procure pela tag
E cole logo ACIMA dela o código no link a seguir:
2. Aplicar estilos CSS:
Vá na aba "design", entre na edição HTML do seu template, não precisa clicar em "expandir modelos de widgets" e procure pela tag
e cole o seguinte código logo ACIMA dela:
Obs: Todos os trechos editáveis já estão identificados e destacados no código.
3. Ativar o efeito nas imagens:
Para usar o Efeito em Imagens dentro do post, é necessário que você hospede a imagem que vai utilizar, em algum servidor de imagem qualquer, como o Picasa Web, por exemplo.
Lembrando que o código a seguir deve ser inserido dentro da postagem a ser publicada, através da aba "editar html" no próprio editor de postagens do Blogger.
Para chamar o efeito em imagens utilize o seguinte código, e cole o endereço da sua imagem nos locais indicados:
No código acima, as partes destacadas em vermelho correspondem a largura e altura da imagem miniatura do post. Se preferir, você pode ajustar esses valores.
0 comentários:
Postar um comentário