Como inserir imagem centralizada e com link na lateral do blog

em 27 de maio de 2014

Há alguns dias uma leitora do blog comentou comigo sobre a dificuldade que estava tendo em inserir imagens com link na lateral do blog.
Também outra me perguntou como eu faço pra que as imagens que uso na lateral de meu blog e nos blogs que personalizo  fiquem sempre centralizadas. Prometi para ambas um tutorial explicando, então eis aqui o cumprimento da promessa.

Antes, vamos entender algumas coisas:
Por padrão o Blogger posiciona as imagens que inserimos na lateral do blog via gadget Imagens sempre do lado esquerdo (left).
Acontece que se a imagem for menor que a área da coluna lateral isso fica feio e desalinhado.
A solução então é centralizar a imagem.
Como gadget Imagem isso não é possível, então precisamos usar o gadget HTML/JAVASCRIPT para centralizar e deixar bem alinhado.

Outra coisa para entender:
Recentemente o Blogger tem apresentado alguns erros nos gadgets. Alguns sumiram, e o gadget Imagem vem apresentando erro na hora de ser inserido, em especial se queremos colocar link na imagem.

Para ambos os casos citados acima tenho a mesma solução: ao invés de inserir a imagem como gadget Imagem vamos inseri-la como gadget html/javascript.
Preste atenção, é bem simples de fazer.

Antes de mais nada você precisa ter a imagem pronta, no tamanho correto, que caiba em sua coluna lateral. Isso você faz em qualquer editor de imagem, até mesmo no Paint.
Lembre sempre de salvar a imagem como .png pois o Blogger tem colocado um fundo cinza estranho em imagens no formato .jpeg

A seguir, depois da imagem pronta, abra uma postagem de rascunho em seu blog, uma postagem que nunca será publicada de fato.
Carregue a imagem que deseja inserir na lateral do seu log.
Assim que a imagem carregar pare o mouse sobre ela e clique. Ela vai ficar "esmaecida".
Clique então no item Link, no alto de seu editor de imagem.
Assim:


Clicou em Link?
Então clique de novo sobre a imagem, e clique de novo em Link.
Essa ação fará abrir essa caixinha:


No campo onde marquei COLOQUE AQUI O ENDEREÇO DO LINK você coloca, claro, o endereço para onde a imagem deve direcionar.
No meu exemplo, que é o selo da parceria com a HigieTopp, fica assim:

Marque a caixinha Abrir este link em uma nova janela e clique em Ok.

Agora o truque:
Clique no alto de seu editor de texto, no campo HTML.
Essa ação reverterá a imagem para o formato HTML.


Copie todo o código; ele contém o endereço de sua imagem e o link para onde ela direciona
Vá ao seu painel do blog e clique em Layout.
Clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT.
Na janela que expandir cole o código da imagem. Coloque título no gadget caso queira e salve. Arraste para onde deseja que fique e salve as alterações do layout.

Viu que simples?
Gostou a acha que pode ser útil pra mais pessoas?
Clique em Curtir/Compartilhar, ou clique para recomendar no Google+.
Isso ajuda o blog a crescer e ser cada vez mais útil!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

15 comentários , comente também!

  1. Amei! Sempre quis saber como fazer isso!
    Seu blog é uma inspiração!
    Fabi

    ResponderExcluir
  2. Eu gostei! Essa de postar na lateral com HTML eu não sabia. Valeu, Elaine! bjs,

    ResponderExcluir
  3. Elaine voce sempre muito gentil, admiro muito voce

    ResponderExcluir
  4. Como faço para entrar em contato com você?preciso muito da sua ajuda!!

    ResponderExcluir
    Respostas
    1. Emanuelle,você pode entrar em contato comigo através do formulário de contato presente no menu do blog.
      bjsss

      Excluir
  5. Bem explicado, gostei.
    joturquezzamundial.
    Beijos.

    ResponderExcluir
  6. Elaine, esse tutorial tá ótimo!! Adorei por que isso acontece sempre comigo. Fico na dúvida, acho que assim desse jeito carrega mais rápido né? Os blogs hoje têm que ser ligeiros que ninguém tem tempo nem paciência pra ficar esperando.

    E vale como resenha rsrsrs

    Obrigada. Vc sabe.

    beijos

    ResponderExcluir
  7. Oi Elaine,
    adorei a dica e favoritei. Sabe o que eu gostaria muito de saber? Como colocar um banner de um anunciante no blog e esta abrir em nova página sem que quem clicou saia da página do meu blog... Será que me fiz entender?
    Bjs

    ResponderExcluir
  8. Adorei a dica... Você explicou de uma maneira super simples!!

    Beijos
    Nessa Luzardo
    www.espacosemprebella.blogspot.com

    ResponderExcluir
  9. Adorei a dica Elaine! No lugar da música que tenho no meu blog tem um fundo cinza e não sei como consertar isto vc sabe?
    vc é tudo de bom na nossa vida!
    Beijinhos no coração...

    ResponderExcluir
  10. Elaine...
    Venho utilizando suas dicas para deixar meu blog bonitinho, me sinto bem com o resultado rsrsrsrs gostaria de agradecer por esse trabalho maravilhoso!
    Meu blog agora esta a minha cara e do meu jeitinho rsrsrs

    Com carinho Maiara...
    http://maiaraangels.blogspot.com.br/

    ResponderExcluir
  11. Oi, Elaine!
    Para que as imagens não sofram modificação e esse fundo cinza que se referiu não apareça, é preciso ir na configuração de imagens do G+ e desabilitar o editor automático de imagens. Simples assim! Vale um postezito explicando para seus leitores, inclusive, tem muita gente reclamando das imagens do cabeçalho modificadas.
    Beijus,

    ResponderExcluir
  12. Eu já fiz isso e havia esquecido pois não fiz mais essa ação e agora encontrei novamente aqui no teu blog a dica.
    Super super.
    Beijinhos
    Deus abençõe

    ResponderExcluir
  13. Muito bom,bem explicadinho.
    Obrigada,boa tarde!

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…