quinta-feira, 10 de setembro de 2009

Tutorial - Mudando o Ícone do Blog na Aba do Navegador

Resolvi postar uma dica útil para quem tem um Blog do Blogger, e se incomoda com aquele bezinho laranja que aparece na aba toda a vez que seu blog é carregado (como foi o meu caso). Pesquisei aqui e ali, e colhi umas dicas em uns três blogs para descobrir como se faz. Depois, adaptei alguma coisa para que funcionasse corretamente, até que deu certo. Mas só consegui fazer funcionar com as quatro linhas de código abaixo. Quando falta uma delas, um dos meus navegadores não carrega o ícone (uso o IE, o Firefox e o Chrome). Bem, então aí vai:

Abra o Painel do Blogger e vá até Layout. Em seguida, clique em Editar HTML.

Encontre a linha ]]></b:skin> , e após ela copie e cole o código abaixo:

<link href='http:link da sua imagem aqui no formato .ico' rel='shortcut icon'/>
<link href='http:link da sua imagem aqui no formato .png' rel='shortcut icon'/> 
<link href='http:link da sua imagem aqui no formato .png' rel='apple-touch-icon'/
> <link href='http:link da sua imagem aqui no formato .png' rel='shortcut icon' type='image/x-icon'/>

É importante frisar que as imagens podem ser upadas no site de sua preferência. Eu utilizo o ImageBoo, mas só por falta de um melhor, porque volta e meia as imagens caem e eu preciso re-postar.

Depois de ter seguido os passos acima, visualize as alterações em uma nova janela ou aba, e salve-as. Como essas linhas a mais não vão comprometer o restante do código, não vejo motivos para backupear o modelo do blog antes de implementá-las. Depois de ter salvo, experimente abrir o blog em outros navegadores para ver como ficou!

Detalhe: eu não utilizo o modelo clássico, e nem sei como funciona!

Outra coisa importante é que você pode fazer o ícone no programa de sua preferência. O meu fiz no Corel X4. Depois é só salvar nos formatos ico e png. Também é possível pegar uma imagem no formato JPG e transformar em ico e png. Para isso é muito bom o software Right Click Image Converter, que, quando instalado, faz com que você possa transformar uma imagem para quase qualquer formato com um simples clique no botão direito do Mouse. Infelizmente, não sei onde conseguir o programa, mas o Google sabe...

Espero não ter esquecido de nada...

Ah, mais uma dica que considero importante: prefira imagens simples e fáceis de se entender, senão as pessoas vão achar bonito, mas não saberão o que é.

Agora sim, acho que era isso! Espero ter ajudado!

17 comentários:

  1. Puxa Carol... sinto muito. Pra mim funcionou superbem! Mas vou dar uma revisadinha básica...

    ResponderExcluir
  2. G.Bruno , eu já criei o icone que eu quero e tudo mais , só não sei como hospedar a imagem , pois eu uso o ImageShack pra hospoedar imagens e ele não aceita os arquivos .ico e o Image Boo não responde aqui aqui ( está fora de ar , não sei ) . Pra resumir , eu só precisaria mesmo que você me ajudase a encontrar outro host de imagem que hospedase o meu arquivo .ico . Obrigado . Aguardo respota ;D

    Ah , otimo blog . Parabéns .

    ResponderExcluir
  3. Olá Ronny! Obrigado pelo feedback!

    Descobri há pouco que é possível hospedar arquivos de imagens, inclusive no formato .ico, no Windows Live. Lá no portal há a opção FOTOS, que permite a inclusão de arquivos no SkyDrive. Acabei de testar e deu certo, funcionou aqui no Internet Explorer, ao menos pra mim. Precisei fazer várias tentativas até descobrir que a imagem deve ser compartilhada com todos. Mas, felizmente, alguns minutos bastaram para que finalmente desse certo.
    A propósito, eu utilizava só o ImageBoo, mas agora migrei para o PicasaWeb, até porque no ImageBoo a hospedagem dura só uns dois meses...

    Teu blog está de parabéns. O favicon caiu como uma luva. Funcionou bem no Firefox e no Chrome. Teste o SkyDrive e veja se funciona no IE!

    Abraço!

    ResponderExcluir
  4. Mano comsseguir por aqui mais o seu codigo ae ta com um erro repar ae plsss isso vai atrapalhar quem nao prestar bem no codigo...

    Utimo codigo ta com ">" do penutimo entao o penutimo, nao fexa o codigo entrando espaço e dano erro)

    ResponderExcluir
  5. Cara, ótima postagem. Dá um pouco de trabalho ficar upando as fotos no formato certinho, mas pelo skydrive foi tranquilo.
    Só não deu certo com o IE, mas tudo bem. =)
    Valeu.

    ResponderExcluir
  6. Renan

    Obrigado pelo comentário, e que bom que conseguiu!!! rsrsrsrs

    Shalkan,

    Cara, ainda não consegui averiguar esse erro. Mas vou verificar ok?
    Valeu!

    ResponderExcluir
  7. Pocha , queria mt fazer isso no meu , mas nao deu , sera q vc poderia faze pra min qualquer dia ? Eu te passo o html e vc me ajuda pfv ? me responde no email - narutosenninblog@gmail.com adorei o blog , espero q me ajude :)

    ResponderExcluir
  8. Cara, o erro tá no final da terceira referência de link. Não tem o " > ", apenas a barra " / "
    Valeu, só mude isso e funfou no meu ^^

    ResponderExcluir
  9. Fiz a alteração que o Buurp falou e ainda assim não deu certo. Qual é o código correto please!
    :)

    ResponderExcluir
  10. Não consegui também... :'( Mas vou continuar tentando.

    ResponderExcluir
  11. isso ta complicado bota um video esplicanto isso po!!!!

    ResponderExcluir
  12. fiz tudo certinho, consertei o html, mas mesmo assim nao deu. :,(

    ResponderExcluir
  13. eu n onseguir fazer isto nao auguem me ajuda??

    ResponderExcluir
  14. Aqui deu certo, na verdade não falta ">" é que ele passo para linha de baixo, só que no Explorer, não funcino só funciona no mozila.
    Más valeu a dica.

    ResponderExcluir
  15. Obrigado pelo código foi muito útil, se der visitem www.futebasediversao.com.br/

    ResponderExcluir
  16. cara eu tentei não cosegui me ajuda !

    ResponderExcluir