Fazer barra com redes sociais

Fala galerinha, hoje vou tentar ser rápido, porque estou com pressa e já vou dormir.
Já fiz isso algumas vezes pra amigos, mas se você ainda não me tem como amigo, mas acessa o blog ou quer aprender como fazer pode seguir esse tutorialzinho.
Primeiro você entra em: http://www.iconfinder.com/
Busque os ícones das redes sociais que você quer colocar em sua barra.
Você não precisa baixá-los, basta apertar com o botão direito sobre ele e abrir a imagem em uma nova guia, isso te dará o link do ícone.
Tente escolher ícones com o mesmo padrão, isso é, se um tiver borda arredondada, é recomendável que todos sejam iguais para não dar diferença.
Mesma coisa é a proporção, se um é quadrado os outros também tem que ser...
Se for possível todos serem do mesmo tamanho é melhor, senão pegue sempre de um tamanho maior, assim poderá diminuir...
Depois de escolher os ícones, e ter seus respectivos links, você monta a barra.

<style>
.sb img{
width:64px !important;
height:64px !important;
margin:2px !important;
float:left;
border:0px !important;
padding:0px !important;
}
</style>

<div class="sb">
<a href="http://www.facebook.com"><img src="http://cdn2.iconfinder.com/data/icons/web2/Icons/FaceBook_128x128.png"></a>
<a href="http://www.twitter.com"><img src="http://cdn5.iconfinder.com/data/icons/social_media%20icons_mydesign_myidea/128/twitter.png"></a>
<a href="link"><img src="http://cdn5.iconfinder.com/data/icons/GooglePlus_IconSet/128x128/1.png"></a>
</div>

Na tag style definimos que a imagem tem 64px de largura e de altura, 2px de margem de todos os lados, não tem borda, e fica posicionado uma a esquerda da outra.
Embaixo vemos que a tag "<a ..." demonstra que dentro dela há um objeto clicável(no caso o ícone), em href="" devemos colocar entre as áspas o link que desejamos que o usuário seja redirecionado quando clicar na imagem.
Na tag "<img ... " basta colocarmos em src="" o link do ícone entre as áspas e pronto.
O exemplo acima pode ser copiado dessa forma que funcionará normalmente, deve ser colado no modo de edição HTML.
Abaixo o resultado de como ficará em sua página.



Obrigado pela atenção e espero ter ajudado, em caso de dúvidas, posta aê!^^


Comentários

  1. consegui:
    www.cantinhodopoderfeminino.blogspot.com.br
    =D
    Obrigada!!

    ResponderExcluir
  2. que bom, fico feliz =D
    de nada! hehe

    ResponderExcluir
  3. eu nao entendi onde eu colo esse link e se é logo no começo ou eu posso colar em qualquer lugar tipo a ordem ... sei la to perdida sou nova nesse ramo de blogs haha

    ResponderExcluir
    Respostas
    1. no menu de administração, vá na seção layout, depois crie um gadget do tipo html/javascript , aí é só colar o código... mas se você quiser colocar em um lugar onde não tem como criar gadgets, você terá que pedir ajuda a alguém que consiga colocar isso manualmente pelo editor de modelos...

      Excluir

Postar um comentário

Postagens mais visitadas deste blog

Stayfilm - Avaliação

Como zerar Drag Racing do Android

Cordão em crochê