Colocar Imagem na barra do Blog

Muitos que estão começando a blogar têm dificuldades com coisas relativamente simples, mas que é natural que se tenha dificuldades no início para aprender. Eu mesmo tive minha muitas dificuldades que hoje me parecem coisas simples. Para não esquecer daqueles que estão começando, vou tentar escrever mais artigos para iniciantes também. Esse é para ensinar como colocar imagens na barra lateral do blog (sidebar).

Já criamos diversos tutoriais e dicas para seu blog e que tratam apenas de como tratar as imagens em seus artigos, cabeçalho e até onde adicionar essas imagens na internet para obter um link dela, uma URL. Veja o nosso marcador “Imagens” para ver todos os artigos.

Existem duas maneira para colocar imagens na barra do blog. Uma mais fácil que a outra, então, vamos começar pela mais difícil.

Opção 1 – Usando o Gadget “HTML/JavaScript”.

Inserindo um novo gadget em sua barra lateral (veja detalhes aqui: Gadgets e Elementos – TUb Ferramentas Parte 4) escolha a opção “HTML/JavaScript” na janela que abrir.

No painel que abre, é possível adicionar códigos HTML, mas antes, será preciso colocar a sua imagem, que está no PC, hospedada na internet, dentro de um host para gerar um endereço URL.

Esse será o primeiro passo para se colocar qualquer imagem na barra lateral do seu blog: armazenar a imagem em algum host na internet. Para isso indicamos o mais simples que é o padrão do Blogger: PicasaWeb. Ele gera um endereço automático para toda imagem que você enviar para ser hospedada lá e você já tem uma conta ativa no serviço que é GRATUITO e tem todo o espaço que você precisa. Veja nosso artigo que ensina passo-a-passo com usar esse serviço básico:

• Armazenar Imagens na Internet – PicasaWeb

Com a imagem colocada lá no PicasaWeb e o endereço URL dela, volte à janela do Painel de adicionar “HTML/JavaScript” e ensira o seguinte código HTML para adicionar imagens:

<img src=”http://URL_da_Imagem/nome_da_imagem.XXX” />

Altere apenas o indicado em vermelho colando o endereço da imagem na internet. Pode ser qualquer tipo de imagem, seja JPG, BMP etc. Para colocar mais de uma imagem, seja lado-a-lado ou uma abaixo da outra, basta apenas repetir o código um para cada imagem que quer adicionar.

E para a imagem ficar centralizada na barra lateral, basta adicionar o código HTML para isso, conforme indicado abaixo:

<p align="center">
<img src=”http://URL_da_Imagem/nome_da_imagem.XXX” />
</p>

Esse é o método que mais gosto e considero mais interessante por me dar controle total sobre a imagem. É bom lembrar que você terá de criar e colocar imagens que caibam nas dimensões da sua barra lateral. O código HTML indicado acima serve para ser adicionado em qualquer parte do seu blog, até no código-fonte e dentro dos artigos.

Se você quiser usar a imagem como link para algum outro endereço ou para outra página do seu blog, basta adicionar o seguinte código, onde URL_de_destino é o endereço da página ou local que o clique direcionará:

<a href=”http://URL_de_destino”>
<img src=”http://URL_da_Imagem/nome_da_imagem.XXX” />
</a>

Opção 2 – Usando o Gadget “Imagem”

Esse é o modelo mais básico e simples de usar.

Da mesma forma que você adiciona qualquer gadget (elemento de página) na barra do layout do seu blog, procure na janela que abre pela opção “Imagem”.

E, na janela que abrir, você só precisa preencher o que está pedindo.

A grande facilidade é que você não precisa de nenhum código, pode adicionar qualquer imagem, mesmo uma que ainda esteja em seu PC e o Blogger ainda ajusta a imagem para o tamanho adequado que caberá na sua barra lateral (sidebar).

Outras dicas para imagens.

Se quiser saber mais sobre imagens em seu blog, veja nossos artigos relacionados que poderão te ajudar a dar um aspecto mais profissional para suas suas imagens, cabeçalho e link:

• 70 Tutoriais para criar logotipo
• 10 sites para editar imagens on-line
• Editor de Imagens gratuito
• Criando Cabeçalho para o Blog
• Trocar Imagem de fundo do Blog – background
• Imagem no Cabeçalho do blog

Tenha sempre o máximo de cuidado com o layout de seu blog, pois é a sua cara, a porta de entrada de seu conteúdo.