5 de fevereiro de 2012

4

Como Criar uma Lista de Ícones de Redes Sociais

Olá pessoal, hoje vamos aprender a como criar o seu próprio modelo de uma lista de ícones de redes sociais para colocar em seu blog. O mais aconselhado é você colocar na barra lateral (sidebar) do blog, pois assim terá uma visualização melhor de seus visitantes e garantindo mais cliques nos botões e assim conseguindo seguidores para o seu Twitter, uma "curtida' em sua página no Facebook e se inscrever no Feed do seu blog.

Os modelos de ícone serão os mesmo da imagem que está ilustrando este post, mas você pode mudar. Mais adiante desse artigo, irei dar uma dica de um site que disponibiliza estes ícones de alta qualidade. Então, vamos aprender?


O código é simples de se estender, veja abaixo o código:
<!-- Icones sociais inicio --><div align='right'><table border='0' cellpadding='2' cellspacing='0' width='260'><tbody><tr><td width='65'><a href='URL-DO-FEED' title='Assine nosso Feed'><img src='http://dl.dropbox.com/u/49685791/rss.png'/> </a></td><td width='65'><a href='URL-DO-SEU-TWITTER' title='Siga-nos no Twitter'><img src='http://dl.dropbox.com/u/49685791/twitter.png'/></a></td><td width='65'><a href='URL-DO-SEU-FACEBOOK' title='Curta nossa página no Facebook'><img src='http://dl.dropbox.com/u/49685791/facebook.png'/></a></td></tbody></table></div><!-- Icones sociais final -->
Vamos entender as partes destacadas: 
• URL-DO-FEED: Neste local temos que colocar o URL do Feed de seu blog, por exemplo: http://feeds.feedburner.com/UtilizandoBlogger ← Troque a parte "UtilizandoBlogger" pelo nome de seu blog.
• URL-DO-SEU-TWITTER: Neste local temos que colocar o URL do seu Twitter, por exemplo: http://www.twitter.com/ub_oficial ← Troque a parte "ub_oficial" pelo seu username.
• URL-DO-SEU-FACEBOOK: Neste local temos que colocar o URL do perfil de seu Facebook. Você tem que ir até a sua página e copiar o link dele e colocar neste local.

E as partes destacadas em verde? Essa parte está hospedado a imagem correspondente a cada rede social. Se você quiser trocar de imagem, basta hospedar em um local e substituir.
Uma dúvida, o que significa title='Assinar nosso Feed' e outros? Simples, quando esta parte significa que quando ao passarmos o mouse por cima do ícone, irá aparecer este título que você citou.

ENCONTRE ÍCONES PARA O SEU BLOG
Já citei aqui no UB, várias vezes um serviço gratuito onde achamos diversos ícones para o nosso blog. A maioria são de altíssima qualidade. O serviço se chama Icon Finder, procure por "icon social media", você encontrará ícones do Twitter, Facebook, Youtube e entre outros.
Como Colocar Links em uma Imagem?
É simples, basta você modificar este código → <a href=”URL-DE-DESTINO”><img src=”URL-DA-IMAGEM-DESEJADA”/></a> Agora é só modificar as partes que estão em caixa alta, pelos URL's correspondentes a cada.


Espero que tenha ajudado, essa foi uma 'aula' básica de como criar uma lista de ícones de redes sociais para o seu blog. Até a próxima!

4 Comentários:

Arrison Theis disse... [Responder Comentário]

Muito bom, Parabéns BrunA !!

Bruna T. Marques disse... [Responder Comentário]

@Arrison Theis, obrigada pelo comentário. Fico feliz que tenha gostado ;D. Abraços!

Artesanatos e Mimos disse... [Responder Comentário]

ola!!o seu tutorial foi o unico qque conseui!!
obrigada...
e eu queria saber se tem tutorial para por os icones do youtube,twitter,face,flickr todos juntos na siderbar?

Trícia disse... [Responder Comentário]

Bom Dia!

Gostei da dica, já até coloquei no blog. Gostei tb dos ícones, mas queria diminuir o tamanho deles, é possível?

Ats,
Trícia

Postar um comentário

Parcerias são feitos em suas respectivas páginas.
- Se deseja falar com nossos autores, criticar ou sugerir, solicite nosso
Formulário de Contato
- Evite divulgar o seu blog nos comentários para que ele não seja excluído por nosso autor.
- Não utilize linguagem vulgar e tente falar sobre algo que esteja ligado ao artigo.

Licença Creative Commons
Free Page Rank Tool