Como colocar ícones no meu blog

Se falamos de blogues, falamos obrigatoriamente de todas as outras redes sociais às quais estamos ligados. Quem nos visita no blog, gostará de seguir as nossas fotografias no flickr, os nossos vídeos no vímeo, a nossa conta de facebook ou até enviar-nos um e-mail sem que para isso tenha de perder 10 minutos à procura do contacto.
Para simplificar o acesso a toda esta informação temos os ícones que, bem arrumadinhos na nossa página, são a via verde para qualquer um dos nossos seguidores nos seguir também noutras plataformas.

Hoje vamos ensinar-vos a colocar os vossos próprios ícones no vosso blog!


1. Arranjar ícones
Se não temos jeitinho para desenhar, o melhor é ir mesmo visitar uns quantos sites que disponibilizam ícones gratuitos, fazer o download, e usar esses mesmo para o blog (procurem no google Social Media Icons e divirtam-se a escolher).
Se queremos fazer os nossos próprios ícones podemos criar um ficheiro com o tamanho pretendido, fazer o ícone e salvar o ficheiro em formato png.
Nós, no We Blog You, criámos os nossos próprios ícones num ficheiro em formato png, de 50x50 píxeis, e com fundo transparente. Vamos criar um ícone para o facebook, outro para o vimeo e outro para o nosso e-mail.




2. Alojar os ícones num servidor
Para que estes ícones possam estar sempre presentes no nosso blog, e como nem sempre temos o nosso pc ligado, vamos alojar todos eles num servidor (gratuito). Assim, o nosso blog, esperto como só ele, vai lá buscar os meninos para estarem sempre disponíveis na nossa página.
O We Blog You tem conta no ImageShack, é gratuito e muito fácil de utilizar. Façam upload das imagens e depois guardem a informação que ele vos dá como Link Directo.


informação a guardar >> http://imageshack.us/a/img641/1498/wbyfb2.png


3. Uma linha ou duas de código
Código html? Assusta não assusta? 
Não percam já a paciência porque desta vez é muito fácil. Se nós conseguimos vocês também conseguem!
Nós damos a base e vocês inserem o que falta.

Salvem as linhas de código que aparecem em baixo num documento de texto:
<a href=”link da vossa página” target=”_blank”><img src=”link da vossa imagem”></a>

 No caso do We Blog You, fica assim
<a href=”http://www.facebook.com/weblogyou.pt” target=”_blank”><img src=”http://imageshack.us/a/img641/1498/wbyfb2.png”></a>



4. Inserir o texto no Blogger! 
Depois de terem preparado ícones, de os terem alojado e de terem preparado a linha de código, abram o blogger e preparem-se porque agora é mesmo rapidinho.

1) adicionem uma miniaplicação;
2) escolham uma aplicação de "texto";
 

3) no canto superior direito da caixinha escolham a opção "editar html";
4) insiram a linha de código que já têm preparada na caixa de texto;
5) Salvem!
  

5. Mail!
Para cada ícone repitam a linha de código que vos foi dada, com o respectivo link da página e link da imagem.
Para fazer de um ícone um link directo para o mail, basta que em vez da página do facebook, vímeo, etc... insiram no mesmo espaço "mailto" seguido do vosso e-mail.

No caso do We Blog You, fica assim
<a href=”mailto:weblogyou.pt@gmail.com” target=”_blank”><img src=”http://imageshack.us/a/img641/1498/wbyfb2.png”></a>


Depois disto visualizem o vosso blog e plim! Já Está :)

26 comentários:

  1. Me ajudou muuuuito! Obrigada mesmo, adorei! <3

    http://muraldeumavida.blogspot.com.br/

    ResponderEliminar
  2. Eu fiz tudo certinho, as imagens dos icones aparecem no meu blog mas não em forma de link. Quando a pessoa clica, não aparece nada, o que eu posso ter feito de errado?
    Olhem:
    http://avoandoo.blogspot.com.br/

    ResponderEliminar
  3. Já tentei de tudo e não consigo de maneira nenhuma :(

    ResponderEliminar
  4. Andressa, demoramos a ver o teu comentário mas agora que vimos e fomos ao teu blog parece estar tudo a funcionar :)

    Missy Terere, se não está a funcionar há aí qualquer coisa que está a falhar. Confere os passos todos direitinhos e a linha de código.
    É isto que usamos para fazermos os nossos blogues por isso tem mesmo de funcionar! :)

    ResponderEliminar
  5. eu normalmente "preparo" os links numa mensagem nova. carrego as imagens, seleciono, clico "alterar hiperligação" e voilá! também tem a opção de direccionar para um email. depois é só copiar e colar num widget :)

    ResponderEliminar
  6. adorei!! http://girlswithcupcake.blogspot.com.br/

    ResponderEliminar
  7. vlw ajudou pra caramba =) ficou legalzim :) http://eradomiojo.blogspot.com.br/

    ResponderEliminar
  8. Que incrível! Eu fiz meus ícones e por sorte encontrei esse tutorial para me ajudar a organiza-los do jeito que eu queria no meu blog de um jeito prático. Obrigada :)

    ResponderEliminar
  9. Eu gostei imenso do vosso post, explicaram mesmo bem todos os passos... Mas não sei bem porque motivo, não consigo fazer com que os ícones apareçam no blogue! Já fiz e refiz o código, revi passo por passo e nada... Não sei se me conseguem ajudar (e desculpem ser chata)
    beijinho

    ResponderEliminar
  10. Obrigada por tudo o que partilham. Uma verdadeira ajuda :)

    ResponderEliminar
  11. Olá We Blog You, não consegui. As imagens aparecem "cortadas" ( a imagem não carregou) e o link vai para a pagina inicial :$
    Veja : bolotinha-fora-da-casca.blogspot.pt , está no fundo de tudo.
    Beijinho e obg pela dica

    ResponderEliminar
  12. Tinha tentado de todas formas, e só conseguir depois que vi o seu post...
    Valeu :)

    ResponderEliminar
  13. Fiz tudo como dizem e não dá :/ Nem aparece a imagem nem reencaminha pra página certa... O que faço?

    ResponderEliminar
  14. Já consegui :D Era um problema com as "

    ResponderEliminar
  15. Eu consegui colocar, mas gostaria que ficasse tudo na mesma linha e não da. Tenho de selecionar miniaplicações diferentes :/ com faço para que fiquei como têm no vosso blogue? Obrigada

    ResponderEliminar
  16. É necessário conta premium para aceder ao link direct? Não estou a conseguir...

    ResponderEliminar
  17. Não sei porque é que só vi este post agora, mas adorei, muito muito obrigada.
    Beijinhos
    http://umachavenadecharme.blogspot.com

    ResponderEliminar
  18. O imageshack já não permite fazer direct link sem fazer upgrade na conta e pagar, só dá forum, alt forum ou html... alguma sugestão? :)

    ResponderEliminar
    Respostas
    1. sim! Temos de fazer um novo post também :)
      a nossa sugestão é criares uma página no blogger, que não estará obviamente disponível no menu do blog, onde podes guardar todas as imagens e ícones. basta fazer upload e salvar a página. depois consegues o URL de cada uma clicando com o botão do lado direito do rato sobre elas, e é esse o link que usas :)

      Eliminar
  19. Eu também já fiz e se não conseguem ver os ícons no blog é porque estão a repetir as aspas no html

    ResponderEliminar
  20. Obrigado! Eu tentei em vários site,mas só consegui aqui.......Parabéns pra você!!!

    ResponderEliminar
  21. Meu icone ficou vertical, o que eu faço!?

    ResponderEliminar