25 de fev de 2013

como criar e adicionar etiquetas para o layout do blog


Sabe aquelas etiquetas dos blogs que denominam os gadgets de seguidores, arquivo, categorias etc? É fácil personalizar o layout do blog usando essas etiquetas ao invés de usar um simples texto. Basta se inspirar e o tutorial não exige alterações de html no modelo do blog, apenas se adiciona as imagens por meio de um gadget no layout do Blogger mesmo.

Para personalizar só é necessário refletir sobre as cores, fontes e formas pretendidas no conjunto do layout do blog. Usando PicMonkey, Picasa, Photobucket ou outro editor de imagens, é só carregar uma imagem em branco (como a imagem do programa Paint salva no computador) em um desses sites e trabalhar em cima. 


Verifique o tamanho da largura da sua barra lateral do blog (Painel do Blogger / Layout / Designer de modelo / Ajustar larguras) e considere ela para redimensionar a imagem da etiqueta que será personalizada.


Por exemplo, a minha barra lateral do blog tem 330 pixels de largura. Portanto, usarei essa largura para redimensionar uma etiqueta de seguidores. Vou redimensionar a imagem em branco então, para 330 pixels de largura x 40 pixels de altura.

♥ Dica 1: Redimensione a altura das etiquetas em até no máximo 50 pixels. Mais do que isso fica muito grande e desproporcional.
♥ Dica 2: Redimensione a imagem em branco desabilitando a opção de manter a proporção da imagem, afinal é uma imagem em branco. Não há nada a ser distorcido quando redimensionado.



Utilize os recursos do editor de imagens para personalizar as suas etiquetas. Retângulos ou só o texto sobre a imagem branca mesmo, elementos para decorar (corações, formas, mini logomarca...) 
E aqui vão mais dicas:

♥ Mantenha a mesma fonte, sempre da mesma cor e tamanho para dar uniformidade ao seu layout.
♥ Mantenha pelo mesmo motivo, a mesma cor de fundo em todas as etiquetas. Procure usar uma cor já usada no blog ou de tons parecidos.
♥ Cuidado ao escolher a fonte para o texto, para seu blog não virar uma salada de fontes e ficar assim, poluído ao invés de personalizado.
♥ Aproveite e repense que gadgets são realmente necessários no seu blog. Se ponha no lugar dos visitantes e veja a real importância dele estar ali, o quanto ele é indispensável ou não e se o seu blog está claro para quem visita. É um bom momento para repensar a necessidade de cada um.


Carregue a imagem em sites de hospedagem de imagens como o Photobucket ou Tinypic.
Copie o código abaixo e cole em um novo gadget aberto no layout (Painel do Blogger / Layout / Adicionar um gadget / HTML/Javascript ):

<div align="center"><img src="URL DA IMAGEM"></div>



- Substitua a palavra center por left caso queira a imagem da sua etiqueta ajustada para a esquerda ou right caso a queira para a direita.
- Substitua a mensagem em azul URL da imagem pelo Direct Link fornecido pelo site de hospedagem de imagens.


Agora é só salvar. Posicione os gadgets com as imagens das etiquetas já personalizadas imediatamente acima dos gadgets correspondentes (p. ex.: etiqueta do arquivo acima do gadget do arquivo). Visualize e corrija a organização dos gadgets e verifique se estão como gostaria. 
Caso queira mudar a aparência deles ou começar de novo, por se tratar apenas de um gadget e não interferir no html do modelo do blog, você pode refazê-lo ou até excluí-lo.

Dúvidas ainda? Deixe sua pergunta nos comentários abaixo ou escreva para costuramor@gmail.com.



12 comentários :

  1. Claro que vou fazer, né Pri!! =)
    Obrigada por compartilhar... bjs

    ResponderExcluir
  2. Muito boa a dica! Ficam lindos!

    Beijo.

    ResponderExcluir
  3. Oi Priscila!
    Bem lá no início do blog, eu fiz...
    Depois fui limpando tudo, e elas sumiram rs
    Gosto assim como as suas, sem 'frufru' :)
    Eu qualquer hora sumo com a logo do blog, e deixo só título.
    Estou inquieta com as cores rs
    Deve ser fase!rs
    bjsss

    ResponderExcluir
  4. Pri,adoro vim aqui pois eu sempre aprendo alguma coisa.Goste muito desse Post!Tem uma informação muito bacana!Quero fazer!vou tentar rs
    xerOo

    ResponderExcluir
    Respostas
    1. Voltando ao post lá no bloguinho:De fato se eu estivesse sozinha ficaria bem nervosa rs
      Pode deixar que as minhas aventuras sempre vou postar no bloguinho.Acho que nesse domingo terá mais :)
      Xeroo
      Obrigada pela palavras de Carinho no bloguinho,viu?

      Excluir
  5. Será que eu consigo?!?!?! Acho q ainda vou esperar um momento para estar mais segura e não atrapalhar nada. Mais um tutorial incrível Pri. Obrigada pela generosidade.

    ResponderExcluir
  6. Realmente, vc é expert! Seu blog é lindo e vc ainda passa as dicas.
    Queria mudar muita coisa no meu layout, mas não entendo nada!
    Mas obrigada por compartilhar!
    Beijos

    ResponderExcluir
  7. ADOREI ! esse seu cantinho aqui...quero ainda poder aprender muito por aqui!
    bj

    ResponderExcluir
  8. Oi Pri! Saudades das suas postagens. Sempre venho aqui pra saber se voltou rs.
    Fiz uma postagem no blog sobre este DIY. Quando der, passa lá pra ver, mencionei você.
    Beijos.

    ResponderExcluir
  9. Muito boa explicação!!
    Gstava apenas de saber como devo fazer se quiser que as etiquetas apareçam seguidas (horizontalmente) logo após o header
    Consegue ajudar-me?
    Obrigada

    ResponderExcluir
  10. Muito boa explicação!!
    Gstava apenas de saber como devo fazer se quiser que as etiquetas apareçam seguidas (horizontalmente) logo após o header
    Consegue ajudar-me?
    Obrigada

    ResponderExcluir
  11. Oie Priscila! Muuito bom esse post, já fiz tudo!! Valeu de verdade pela ajuda, explica tudo muito bem e ficou tudo facinho, facinho!
    Beijoss

    ResponderExcluir

Obrigada por costurar seu comentário aqui no bloguinho! ♥
Perguntas são respondidas no seu blog.