Todo blog geralmente possui uma barra de ícones com endereços para os perfis nas redes sociais nas quais o blog está presente. Um exemplo de barrinha é mostrado na imagem abaixo (seta branca). Nela, podemos ver a barrinha utilizada atualmente pelo Moda na Janela.
Para criar esta barrinha, devemos seguir os passos abaixo:
Primeiro, entre em sua conta do Blogger e, no menu à esquerda, clique na opção "Layout" (na imagem abaixo, destacado em vermelho).
Na página que se abre, selecione a opção "Adicionar um Gadget", conforme imagem abaixo:
Uma janela pop-up se abrirá, oferecendo diversas opções de gadget. Role a página até encontrar a opção "HTML/JavaScript" (retângulo vermelho) e clique no botão com sinal de "mais" (indicado, na imagem, pela seta branca).
Na nova janela, você pode escolher adicionar um título ou deixar em branco, como no Moda na Janela. No campo conteúdo (destacado em vermelho), adicione o código HTML que explicaremos a seguir.
O código HTML deve ser construído seguindo este modelo:
<center>
<a href="endereço do site de destino" target="_blank"><img src="endereço da imagem" alt="texto alternativo" title="texto que descreva a imagem" height="altura da imagem" width="largura da imagem" /></a>
</center>
<a href="endereço do site de destino" target="_blank"><img src="endereço da imagem" alt="texto alternativo" title="texto que descreva a imagem" height="altura da imagem" width="largura da imagem" /></a>
</center>
Explicando o código:
- Os trechos em azul são os trechos que precisam ser alterados.
- As tags <center> e </center> fazem com que tudo que estiver entre elas fique centralizado na horizontal. Caso prefira a barra alinhada à esquerda, remova estas tags.
- Substitua endereço do site de destino pela URL (endereço da rede social) para onde o usuário deve ser levado quando clicar no link. Não remova as aspas!
- endereço da imagem é onde deve ser colocado o endereço da imagem, ou seja, o caminho para ela (geralmente termina em .gif, .jpg ou .png).
- texto alternativo é o texto que será carregado caso a imagem não carregue. Coloque um texto curto que represente a imagem.
- texto que descreva a imagem é aquele texto que aparece quando passamos o mouse sobre uma imagem na Internet. Personalize-o com algo que descreva o link de destino ou a imagem.
- Os trechos altura da imagem e largura da imagem devem ser preenchidos com as dimensões do ícone de rede social que você escolheu, em pixels. Ex.: 200px. Caso não queira determinar, digite 100% em cada um deles.
- O trecho entre as tags <center> e </center> (começando em <a e terminando em </a>) é para inserção de uma imagem com link e deve ser repetido para cada ícone de rede social a ser inserido.
Espero que esse post ajude vocês.
* Esse post foi feito à pedido de uma leitora, a Monique. Tem uma dúvida, sugestão ou crítica? Não deixe de enviar um e-mail para contato@modanajanela.com .*
Beiiijos :*
