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 :*
Fiz isso ontem, e adoreeei o resultado!!
ResponderExcluirsuper beijo
Mania de Bruna
@ManiaDeBruna
Amei a dica, eu estava super precisando disso :)
ResponderExcluirbeijos
barradosno-baile.blogspot.com
Oi!
ResponderExcluirAdorei o tutorial e quero fazer no meu blog!
Só queria saber qual as dimensões que tu usou nos teus ícones, pois quero deixar mais ou menos no mesmo tamanho.
Obrigada!!
http://www.bahguria.com.br/
Aaaaah, adorei, adorei, adorei! To me sentindo super "importante" por ter tirado minha dúvida haha
ResponderExcluirMuito obrigada, vou tentar fazer no meu agora!
Adoro seu blog! Beijos
Muito bem explicado, adorei o tutorial, com certeza muito útil tbm *-*
ResponderExcluirxoxo'
imaginebelleblog.blogspot.com.br
https://www.facebook.com/blogimaginebelle
aaaai eu amei esse post, eu estava procurando em sites como fazer essas barrinhas e nada encontrava, agora vou utilizar essas dicas, vai me ajudar bastante, obrigada Lari! :D
ResponderExcluir:*
Obrigada , estava desesperada :)
ResponderExcluirEu queria que saber se você pode me enviar um icon igual a esses do seu instagram , facebook , só que do ask . Obrigado :)
Não achei do ask assim Luana :/
ExcluirTe aconselho a pegar o ícone do ask e tentar alterar a cor para cinza, assim fica mais parecido.
Vi o resultado no seu blog. Ficou ótimo!
Adorei a dica!!
ResponderExcluirnn entendi o passo 4 :(
ResponderExcluirA parte dos códigos, Lívia?
Excluireu consegui colocar, mas nn apareceu a imagem :( olha aí: http://blogpartiubeleza.blogspot.com.br/
ExcluirMuito bom ,obrigada pela dica !
ResponderExcluirPor nada ^^
ExcluirEstava precisando de algo diferente !
ResponderExcluirhttp://mimosasfashionk123.blogspot.com.br/
Espero ter ajudado ^^
ExcluirAmei a dica! Ajudou pra caramba.- olha como ficou: http://livreregistro.blogspot.com.br/
ResponderExcluir;)
Ficou ótimo Helô!!!
ExcluirQue bom que ajudei.
Beijos
Nao entendi o passo 4, o que é o ENDEREÇO DE IMAGEM?
ResponderExcluirO endereço da imagem é o link que nos leva àquela imagem. :)
ExcluirEle é como qualquer endereço de site da internet, mas geralmente termina com ".jpg", ".png" ou ".gif". No Google Chrome, se você clicar com o botão direito sobre uma imagem e selecionar a opção "Copiar URL da Imagem", consegue o endereço da imagem e bastará dar "CTRL+V" no local indicado no tutorial.
Como vc faz para colocar os icones na horizontal, um do lado do outro?
ResponderExcluirEles ficam naturalmente na horizontal, desde que haja espaço suficiente. Na coluna da direita do meu blog, por exemplo, eles couberam. :)
ExcluirQuando o espaço é insuficiente, há quebra de linha.
ola!td bem?tenho uma duvida na verdade msm eu to pedindo ajuda kkkk então o template que eu tenho no meu blog ja vem com essa barra social mas quando eu clico aparece que a pagina nao foi encontrada e quanddo eu tento colocar os links para aparecer minhas redes sociais não vai!!o que eu faço se quiser ver o link ta aqui
ResponderExcluirhttp://princessimperfect014.blogspot.com.br
Olá! :)
ExcluirBom, vamos por partes. Tome como exemplo o link do facebook.
Neste trecho:
<a href="LINKDOSEUFACEBOOK"
Quando for colocar o seu perfil do facebook, substitua o trecho entre aspas LINKDOSEUFACEBOOK pelo link do seu perfil. Comece por http:// (link completo).
Só não se esqueça de que as aspas em volta de LINKDOSEUFACEBOOK no código devem ser mantidas. Se você não colocar o link completo, inclusive com http no começo, o link pode não ser reconhecido.
Qualquer coisa, me avise! :)
Não entendi e não consegui colocar!!
ResponderExcluirQue pena Bianca, mas é só seguir o passo a passo. As outras meninas estão conseguindo. Qualquer dúvida é só você deixar explicadinha aqui que tento te ajudar.
ExcluirAdorei a dica!!! Otimo blog!
ResponderExcluirAmei a dica, fiz isso no meu blog :) *-*
ResponderExcluirEu até consegui linkar,porém as imagens não aparecem, e os ícones também não ficam um do lado do outro assim como os do seu Blog. O que quer dizer com link da imagem, como consigo esse link?
ResponderExcluirBeijos:*
Algumas coisas podem mudar, já que você usa um template free, mas não aparecerá nenhuma imagem até que você coloque seus links. É só achar um ícone que você queira usar, clicar com botão direito e "copiar url da imagem". Esse é o link.
ExcluirE como coloco esse box de comentário no meu blog? tenho no blogger e baixei um templete free.
ResponderExcluirQual box Ana? O do facebook foi uma mistura de vários tutoriais, mas tem alguns muito bons no Youtube.
ExcluirEu coloquei mas aparece um em cima do outro e não alinhados os dois na horizontal.
ResponderExcluirProvavelmente tem relação com a largura da lateral do seu blog ou com a largura dos ícones.
ExcluirVery thank
ResponderExcluirQue show amei seu blog, parabéns flor! E obrigada pelas dicas!
ResponderExcluirOi eu de novo , como faço pra por aquela barrinha completa mas ao clicar em cada icone vai pra pagina correta? ou como por um do lado do outro?
ResponderExcluirFoi muito útil. obrigada
ResponderExcluir