domingo, 21 de setembro de 2008

Como colocar imagens em colunas do Wordpress

Iniciei recentemenmte no Wordpress e estava querendo implementar algumas mudanças no visual do blog.

Apesar de muito pesquisar, não encontrei nada muito didático e fácil para colocar uma simples imagem na coluna direita do meu diário.

Esta dica pode parecer fácil para quem domina os truques no Wordpress, o que não é o meu caso.

Assim, com o objetivo de auxiliar os que encontram a mesma, digamos, dificuldade, reproduzo na íntegra o post que encontrei no Quixotexto (do Cochise César de Divinópolis, MG), que gentilmente me atendeu e autorizou sua publicação.

"Vou atender ao pedido do ditado popular e desenhar... um guia ilustrado de adicionar selos e botões em blogs do Wordpress e Blogger.

Mas antes qual a diferença entre selo botão?

À esquerda tem um botão da campanha Quixote de coração e alma. Ele tem um link que remete para uma página, assim como os botões das campanhas alí à direita.
Ainda à direita você tem um selo que recebi da Maíra do Paradoxalmente ser. Não tem link para lugar nenhum...
Um selo é um presente, uma condecoração, uma medalha... Um botão faz propaganda de um site e em o link para a sua origem... (Se bem se espalharem a bandeira de Quixote sem o link eu não me incomodo nem um pouco...)

Wordpress

Vá na aba "Design" e dentro dela em "Complementos":


Após isso encontra na coluna da esquerda um elemento de texto e adicione-o:


Dentro desse elemento que vai aparecer na coluna da direita coloque o código é é muito simples:

<a href="LINK"><img src="Endereço da imagem" width="100%" /></a> Para botões e:

<img src="Endereço da imagem" width="100%" /> Para selos.


O Atributo width define a largura da imagem... você pode definir em pixels (100, 200, 756, etc.) ou em porcentagem. Se usar 100% ela vai ocupar a maio área possível dentro da coluna.

Depois de adicionada não se esqueça de salvar as alterações...


Após isso é necessário salvar as altrações de novo, mas dessa vez da página, e não do widget:


Pronto.

Blogger:

Escolha a opção "Layout" e escolha "Adicionar um Elemento de Página":


Na janela que abre escolha "HTML/JavaScript" (Note que existe uma opção "Imagem" que é mais prática para selos e para imagens que você tenha no seu computador. Essa opção é a mais adequada para botões).


Na janela que vai abrir coloque o código é é muito simples:

<a href="LINK"><img src="Endereço da imagem" width="100%" /></a> Para botões e:

<img src="Endereço da imagem" width="100%" /> Para selos.


O Atributo width define a largura da imagem... você pode definir em pixels (100, 200, 756, etc.) ou em porcentagem. Se usar 100% ela vai ocupar a maio área possível dentro da coluna.

Salve as alterações.


Pronto.
"
Share/Save/Bookmark

5 comentários:

Daniela Ferpe disse...

Fiz tudo direitinho, mas não consegui. Me ajudaaaaaaaa!

Lunar - Jorge Oliveira disse...

Daniela.

Acredito que você não esteja conseguindo colocar as imagens porque não está se utilizando de um servidor para a hospedagem.
Veja como é minha página no Wordpress (http://abobado.wordpress.com/), levando em conta que para a colocação de imagens nessa coluna é necessário colocar a imagem em algum servidor para que a URL a puxe para o seu site, como um link.
Mais dúvidas, por favor entre em contato.

Jorge Oliveira

SABRINA TASSAN disse...

Ei..eu realmente preciso de ajuda!!!Mesmo seguindo o passo-a-passo não consigo colocar os selos, a única coisa que aparece é um espaço no meu blog com uma caixinha com um "x" dentro e escrito:para selos..?????????

Lunar - Jorge Oliveira disse...

Sabrina.

Conforme orientação passada para a Daniela (ver comentário acima), talvez você não esteja conseguindo porque não está colocando a imagem em um servidor, ou seja, para que a imagem possa aparecer obrigatoriamente ela deve estar hospedada em algum servidor da internet.
Se você está tentando inserir imagens que estão no seu computador, com certeza elas não irão aparecer, por isso a imagem não carrega e aparece com esse "x" que você mencionou no seu comentário.
Caso sua dúvida persista, poste novo comentário que tentarei ajudá-la.

Abraços.

Jorge Oliveira

Anônimo disse...

Muito obrigado pela dica funciona 100% abraço...