quinta-feira, 25 de junho de 2009

Favicon para tótós

Favicon = Favorite icon; quadradinho que identifica e personaliza – caso exista – os sites;

Este era o tutorial que eu gostava de ter encontrado para em vez de levar uma eternidade e meia levar só... vá, 15 minutos! Este é o produto de uma manhã de procura intensa por todos os tutoriais que encontrei em português, castelhano, inglês e farsi, em que cada um deles diferia do outro em pequenos detalhes e, no meu caso, davam buraco na hora de aparecer o quadradinho catita no lado esquerdo da morada do blog. Isto foi o que resultou comigo, para um blog do Blogger (blogspot.com):

1ª fase – Tratar a imagem
Antes de mais é preciso escolher a imagem e depois tratá-la de forma a ficar pequenina. Nas minhas pesquisas encontrei duas medidas (em pixel –pxl) diferentes 32pxl x 32pxl e 16pxl x16pxl. Eu escolhi a de 16 x 16 porque era a que aparecia mais vezes referida. Para alterarem o tamanho da imagem pode-se usar o photoshop (se não têm arranjem ou descubram outra forma de o fazer):

depois têm que substituir no quadrado de cima que está em pxl os valores para 16x16... não era preciso tanta informação eu sei... mas just in case

Agora têm algures no vosso computador uma imagem pequenina cuja extensão (as letras que estão depois do ponto) será .jpeg, ou .png. Em princípio isso não importa muito, desde seja uma extensão de ficheiro de imagem.

A questão é que os favicon têm extensão .ico e a maioria de nós não tem programas que convertam os formatos tradicionais de imagem em .ico. Mas não há stress porque este programa, por exemplo (grátis e disponível na net e que não precisa de registo), faz isso num instantinho!
Vão ao site e fazem o upload da imagem pequenina. Depois de feito guardam a imagem que agora sim termina em .ico. E neste site o trabalho está terminado.


reparem que já há um preview do favicon

Eis que surge novo problema. A maior parte dos sites não “vai buscar” esta imagem ao computador, por isso é preciso alojá-la. Eu alojei-a aqui (porque era onde dizia que tinha alojado o autor do primeiro tutorial que li)*. Fazem o upload da imagem que termina em .ico e vão ver que vai ser gerado um código.


Eu depois de muitas tentativas percebi que era preciso que esse código fosse URL (que é como quem diz, que remete para uma morada na internet) por isso tive de escolher a morada que surgia quando clicava em Direct URLs.
Deixem esta janela aberta no vosso computador porque vai ser precisa mais à frente.

cliquem onde diz Direct URL porque é esse código que é preciso

2ª fase – Editar HTML
Vão ao vosso blog e clicam em Esquema e depois Editar HTML”. E antes de mais nada guardam o vosso Template! Não vá isto dar para o torto e começar toda a gente a processar-me!... o que me deixa preocupada... Bem, vão ver que aparece uma janela cheia de letras que são muito importantes, porque estão a codificar o layout e a formatação do texto, que se escolheu com tanto amor e carinho... por isso nada de apagar coisa nenhuma! O que se vai fazer é acrescentar mais informação.


esqueçam as setas verdes... é onde diz transferir modelo completo e fica uma cópia no vosso computador

Antes de mais é preciso encontrar no nesse monte de letras, este conjunto head tal como está escrito abaixo (é que o blog não aceita que eu escreva como deve ser) que é o que codifica a parte que queremos do cabeçalho. Eu fiz Ctrl+F (na realidade fiz Maçã+F porque sou Mac) e escrevi e dei logo com o que queria**.




Agora é importante: entre
introduzir o seguinte código que encontrei aqui:





Façam mesmo Ctrl+C sobre o código... são as duas linhas tal e qual como estão:


Onde diz introduzir-o-URL-do-alojamento-da-imagem vai ficar o URL da vossa imagem. Voltam à janela do site em que alojaram a vossa imagem e geraram uma morada. Seleccionam a morada e copiam (Crtl+C). Voltam ao Editar HTML e substituem http://introduzir-o-URL-do-alojamento-da-imagem por essa morada que copiaram.

No caso que estou a testar fica qualquer coisa como:


Façam “guardar as novas configurações” e “ver blog” se tudo correu bem, já têm um novo favicon... Se não correu façam “procurar template” (aquele que guardaram para não me processarem) e carreguem-no!

Vá... e depois digam se resultou***!...

* é um bocadinho chato porque têm que fazer registo e dar uma data de dados... eu aldrabei os meus, menos o mail que é preciso para activaram a vossa conta
** aqui importa dizer que nem todos os tutoriais apresentam a mesma localização para se inserir o código.
*** espero não me ter esquecido de nada... se assim foi é natural que não resulte, mas tentei!

2 comentários:

  1. É nestas alturas que desço ao nível dos outros e tenho que assumir: sou uma besta! E das grandes... :D

    ResponderEliminar
  2. Este post foi feito a pensar em ti meu amigo!!

    ResponderEliminar

Aviso à navegação: como sou eu que mando neste estaminé, quando não gostar dos comentários não os vou publicar. Temos pena mas é a vidinha. Todos os outros comentários são bem-vindos!