Como fazer com que uma foto aumente ao ser clicada no Blogger

Escrito por kevin lee | Traduzido por aline kachel araujo
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer com que uma foto aumente ao ser clicada no Blogger
Permita que seus visitantes deem zoom nas fotos do seu blog (Pixland/Pixland/Getty Images)

O Google Blogger fornece várias maneiras de adicionar conteúdo a blogs. Você pode digitar textos no editor de textos, editar HTML em publicações individuais ou ainda atualizar o código que mude o visual de todo o Blogger. Uma forma rápida de tirar proveito da possibilidade de edição de HTML do Blogger é adicionar uma foto que possa ser clicada em uma publicação. Quando os visitantes clicam em uma versão pequena de uma imagem em sua publicação, o navegador deles a redimensiona para fornecer uma visão maior.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o seu navegador e vá à página do Blogger. Clique no botão "Nova publicação" que aparece ao lado de um de seus blogs. O site vai abrir a página Nova página. Digite um título para a sua publicação na caixa de texto "Título" que aparece.

  2. 2

    Clique no botão "Editar HTML" e cole o código abaixo no editor que aparece abaixo da caixa de texto "Título": <img id="imagem1" src="INSERIR O ENDEREÇO DA IMAGEM AQUI" style="height:20%; width:20%;"

    Esse código cria uma etiqueta "img" em HTML. O valor da "id" da etiqueta é "imagem1". Os atributos altura e largura (height e width, respectivamente) têm o valor de 20%. Esses valores definem a altura inicial da imagem. Esse é o tamanho que os visitantes visualizam a imagem em sua publicação no Blogger. Mude o "20%" para outro valor de sua escolha, como, por exemplo, "50%". Substitua "INSERIR O ENDEREÇO DA IMAGEM AQUI" com o endereço de internet da foto que você deseja usar.

  3. 3

    Cole o código abaixo depois do código do passo anterior:

    onclick="javascript: document.getElementById('imagem1').style.height='100%'; document.getElementById('imagem1').style.width='100%';" />

    Esse código HTML faz com que a imagem aumente quando é clicada. Clique em "Publicar" e depois em "Ver publicação". Sua foto vai aparecer na publicação, clique nela para aumentá-la.

Dicas & Advertências

  • Note que, neste exemplo, o valor do atributo id da imagem é "imagem1". Você pode usar qualquer nome que queira como id. Se você mudar o nome, lembre-se de mudar sempre que ele aparecer no código. Ele aparece mais duas vezes na declaração "document.getElementById".
  • Você não precisa deixar o valor da imagem ampliada em "100%". Caso você queira exibir uma versão menor da imagem, substitua o "100%" por algum outro valor, como "80%".
  • Adicione quantas imagens ampliáveis na sua publicação do Blogger quanto você quiser. Dê uma id diferente para cada imagem.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível