quarta-feira, 16 de setembro de 2009

Como modificar o ícone da barra de endereços do seu blog

      Achei um artigo super interessante na internet e bastante útil pra quem tem um site ou blog. O artigo pertence ao blog Todo Espaço Online, um ótimo blog que conheci a pouco tempo e o qual sugiro aos leitores que não deixem de visitar.

      O artigo trata-se de um Tutorial explicativo de como mudar aquele ícone do navegador do seu site ou blog que aparece quando você acessa ele, como nas imagens abaixo.

Favicon Blogger

      Veja exemplos de sites com ícones variados personalizados.

Favoritos

Tutorial (estou disponibilizando sem alterar)

      Primeiramente, converta a imagem que você deseja usar como ícone do seu blog para (.ico).

      Calma que eu vou explicar como fazer, siga os passos abaixo:

1º passo: Entre neste site, clique em "Get Started", procure pela imagem que deseja converter para .ico e clique em "Abrir".

Dica: Se não encontrar a sua imagem, modifique o tipo de arquivos.

Tipos de arquivos

2º passo: Clique em "Export", selecione o tamanho "16 x 16", clique em "Save as" e escolha o nome do seu ícone.

OBS.: Para que a imagem fique do tamanho adequado, faça uma imagem quadrada.

16 x 16

3º passo: Depois que você salvou a sua imagem, hospede a imagem em algum site (eu uso o dropbox, é grátis).

Depois que você fez tudo acima, a sua logo já está pronta, agora é só modificar algumas configurações no seu template para que ela apareça na barra de endereços.

Modificando o template

Dica: Sempre faça backup do seu template antes de modificar o mesmo.

4º passo: Entre na sua página do blogger, clique em "Layout" e depois em "Editar HTML"

Layout / Editar HTML

5º passo: Use as teclas "Ctrl + F" do seu teclado, para encontrar o fechamento da tag head (só digitar /head).

Fechamento da tag head

6º passo: Cole o código abaixo antes do fechamento da head, como mostra a imgem abaixo:

Código aqui

Cole o código antes do fechamento da tag head

Dica: Modifique "URL do seu icone", para a URL da sua imagem.

Clique em "Salvar modelo", e visualize o seu site com a nova logomarca.

Fonte: Todo Espaço Online

Nenhum comentário: