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ê!^^
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ê!^^
consegui:
ResponderExcluirwww.cantinhodopoderfeminino.blogspot.com.br
=D
Obrigada!!
que bom, fico feliz =D
ResponderExcluirde nada! hehe
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
ResponderExcluirno 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