Quarta-feira, 8 de Agosto de 2007

Criando banners e favicons...

 

imagem do banner do tecno blog Como o blog ainda está a começar a sua existência, há certos pormenores que vão sendo tratados a pouco e pouco.

Hoje criei o banner dele, para aquelas pessoas que preferem linkar usando banners, em vez de links de texto. Lá está ele, acabadinho de polir, na barra lateral.

 

Também criei o Favicon para ele. Para quem não sabe o favicon é o ícone dos blogs ou sites, que aparece nos favoritos, e ao lado do nome do blog, na barra de endereço do navegador, ou no separador/aba, para quem usar um navegador com separadores.

 

Ah, e também personalizei as cores das barras de scroll (as barras que se deslocam para percorrer a página, quando esta é maior do que o tamanho do ecrã), e vou dizer como fazer isso, mais á frente no texto.

 

Em relação ao favicon, como o SAPO ainda não tem, que eu saiba, uma opção na área de personalização, que permita inserir um favicon (o ideal seria apresentar vários ícones, para o utililzador escolher aquele que lhe agradasse mais, ou permitir escolher o endereço externo da imagem a usar, como se faz para escolher uma imagem de fundo, por exemplo), vou mostrar como inseri aqui o meu, para quem também quiser usar um favicon no seu blog do SAPO, e não souber como fazer.

 

 

Como usar um favicon nos blogs do SAPO:

 

  • criar uma imagem, ou usar alguma existente, de pequenas dimensões (máximo recomendado: 32x32 pixeis),
  • enviar a imagem para uma página que se tenha nas Homepages do SAPO (ou em qualquer outro lado),
  • ir à área de personalização intermédia, no blog onde se quer inserir o favicon,
  • escolher uma das caixas de componentes (pode usar-se uma que já tenha algum outro componente em uso),
  • inserir o código

    <head>
    <link REL="SHORTCUT ICON" HREF="http://endereço_completo_do_favicon">
    </head>

  • no separador Posições, activar a posição, se não estiver já activa
  • guardar alterações.

Actualizar a página do blog, e deverá aparecer já com o novo ícone.

 

Nota: como tudo nos blogs deve ser optimizado para permitir um uso o mais fácil possível para os utilizadores, e menores tempos de carregamento das páginas, etc., também se deve ter em atenção o tamanho do ficheiro da imagem a usar como favicon.

 

 

Como alterar as cores das barras de scroll:

  • repetir o processo anterior, e numa das caixas de componentes, inserir o código

    <STYLE>
    html {scrollbar-Face-color: #9E9E9E;
        scrollbar-highlight-color: #000000;
        scrollbar-shadow-color: #000000;
        scrollbar-3dlight-color: #9E9E9E;
        scrollbar-arrow-color: #000000;
        scrollbar-track-color: #FFFFFF;
        scrollbar-darkshadow-color: #000000;}
    </STYLE>

imagem do programa colorcop Nota: alterar os valores hexadecimais para as cores (o número após o símbolo cardinal), os que estão no código que mostrei, são os que usei. Um bom programinha gratuito, e que eu uso,  para trabalhar com códigos de cores é o Color Cop.

 

 

Explicação dos nomes de componente da barra:

 

   scrollbar-Face-color: a cor da face da barra

    scrollbar-highlight-color: borda esquerda e superior

    scrollbar-shadow-color: borda direita e inferior

    scrollbar-3dlight-color: rodeando a borda esquerda e inferior

    scrollbar-arrow-color: cor das setas nos 2 extremos

    scrollbar-track-color: cor da área por onde a barra se desloca

    scrollbar-darkshadow-color: rodeando a borda direita e inferior

 

 

por Sergio Alex às 18:14
link do post | comentar | favorito
6 comentários:
De catia a 8 de Agosto de 2007 às 18:59
Criei o meu blog há pouco tempo e também já personalizei o meu espaço.
A tua dica do favicon era algo que eu queria adicionar ao meu blog também e como o SAPO ainda não em esta opção implementada dou-te os parabéns por teres dado a explicação aqui no teu blog. Vou já implementar no meu.
Obrigada!
Passa no meu estaminé quando quiseres, estás convidado :)
De Sergio Alex a 8 de Agosto de 2007 às 21:20
Obrigado, Cátia

Vou já ver o teu blog.

Acabo de reparar que cometi um pequeno erro, quando disse que se devia ir à personalização avançada, quando na verdade era personalização intermédia. Já corrigi.
Espero que isso não te tenha confundido.

Fica bem.
De caetano a 1 de Março de 2008 às 20:40
Pessoal, eu estou tentando inserir um favicon no meu site, já olhei e segui dicas de muitos fóruns mas ainda não consegui! Por favor me ajudem! Eu criei um favicon sem problemas em um site, fiz dowload do arquivo favicon.ico na pasta raiz do meu site, inseri entre as tags head, tudo certinho. Meu site ainda não está hospedado em um servidor, mas eu fiquei sabendo que mesmo com hospedagem local, o meu site deve apresentar o ícone com a logo q crie no meu navegador. Meu navegador é o IE 7 e ele apresenta todos os favicons automaticamente sem problemas em todo site por aí... menos o meu! Alguém consegue me ajudar?
Obrigado.

Caetano
De Sergio Alex a 3 de Março de 2008 às 01:47
Olá Caetano

Pode ver esta página que explica como criar o favicon no IE7 (em inglês):

http://www.5starsupport.com/info/ie7.htm#favicon


Abraço.
De Caetano a 7 de Março de 2008 às 18:48
Valeu pela dica Sérgio, mas por acaso não existe uma versão em português?

Valeu,
Abraços.
De Sergio Alex a 13 de Março de 2008 às 01:18
Olá Caetano

Fiz uma tradução rápida do texto para português. O que ele diz é isto:


1) Criar uma imagem .gif para usar como Favicon.

2) Usar um programa para converter a imagem num Favicon com a extensão .ico.
O autor sugere este:
http://www.chami.com/html-kit/services/favicon/, (ou pode usar qualquer outro ficheiro que já tenha a extensão .ico)

3) Depois de ter a imagem convertida para o formato .ico, pode fazer-se o upload da imagem para o directório raiz do site ou blog.

4) Isto deve ser o suficiente para fazer o Favicon aparecer no Firefox, mas pode ainda não aparecer nas versões do Internet Explorer acima da versão 5. Vamos continuar.

5) Colocar o ficheiro favicon.ico na pasta “imagens”. (ficando por exemplo assim: www.o-seu-site.com/imagens/favicon.ico)

6) Colocar a imagem Favicon no ficheiro index.html e verificando que o caminho completo para ela é www.o-seu-site.com/imagens/favicon.ico.

7) Depois de ter feito o upload dos ficheiros para o site, pode limpar-se a cache, da seguinte forma:

A. Abrir o Internet Explorer,
B. Ir a Ferramentas > Opções da Internet,
C. Apagar os Ficheiros Temporários da Internet (incluindo conteúdo offline),
D. Apagar o Histórico.

8) Pode ser necessário colocar um link indicando o caminho para o favicon, entre as tags < head > e < /head >.

9) Fechar o Internet Explorer, e depois reabri-lo. Agora escrever o endereço para o site onde colocamos o favicon.

Pode ser necessário premir a tecla F5 para actualizar a página e fazer aparecer o favicon.



Comentar post

telemóveis Nokia

Telemóvel Nokia N95

Telemóvel Nokia 1208

Telemóvel Nokia E65

Telemóvel Nokia 2600 Classic

Telemóvel Nokia E51

Telemóvel Nokia 5200

Telemóvel Nokia 6120 Classic

Telemóvel Nokia E61i

Telemóvel Nokia 2630

Telemóvel Nokia 6233

Telemóvel Nokia 2310

Telemóvel Nokia 6110 Navigator

Telemóvel Nokia 3120 Classic

Telemóvel Nokia n82

Telemóvel Nokia 5000

Telemóvel Nokia 5320 Xpress Music

telemóveis Blackberry

Telemóvel BlackBerry Pearl 8110

Telemóvel BlackBerry Curve 8310

telemóveis LG

Telemóvel LG KG800

Telemóvel LG KE800 Chocolate Premium

Telemóvel LG KG275

Telemóvel LG KF600

Telemóvel LG KE970 Shine

Telemóvel LG KP100

Telemóvel LG KU380

Telemóvel LG KP235

Telemóvel LG KP130

Telemóvel LG KF510

telemóveis Motorola

Telemóvel Motorola V8

Telemóvel Motorola Q9

Telemóvel Motorola V8 Luxury

Telemóvel Motorola U9

telemóveis HTC

Telemóvel HTC TyTN II

Telemóvel HTC Touch Cruise

Telemóvel HTC Touch Dual

Telemóvel HTC P3600

Telemóvel HTC Touch Diamond

telemóveis Sony Ericsson

Telemóvel Sony Ericsson S500i

Telemóvel Sony Ericsson T303i

Telemóvel Sony Ericsson W300i

Telemóvel Sony Ericsson K550i

Telemóvel Sony Ericsson W200i

Telemóvel Sony Ericsson P990i

Telemóvel Sony Ericsson Z250i

Telemóvel Sony Ericsson Z555i

Telemóvel Sony Ericsson W380i

Vídeo Review do Telemóvel Sony Ericsson P1i

Telemóvel Sony Ericsson P1i

Telemóvel Sony Ericsson K770i

Telemóvel Sony Ericsson K530i

Telemóvel Sony Ericsson W880i

telemóveis para crianças

Telemóvel Imaginarium Cam1

Telemóvel Imaginarium Mo1 | Telemóvel para Crianças

outros posts sobre telemóveis

Wallpapers para Telemóveis MoboPic

Revistas de Telemóveis

Despir Pessoas com o Telemóvel

Imagens de Bonecos para o Telemóvel

Como Saber Modelo de Telemóvel

Telemóvel Winx para Meninas na Optimus - Portugal

Programas para Desbloquear Telemóveis

Telemóvel ZTE Mobile F230

Códigos para telemóveis

Desbloquear telemóveis facilmente

posts recentes

Como Apagar o Blog Primár...

Vodafone 555 Azul - O Nov...

Caixas de Correio Tipo Am...

Perfumes Importados Femin...

Experimentos Caseiros

links interessantes

TMN

Optimus

Vodafone

Blog da Pinkinha

comentários

estou procurando valdir vieira desde 2002 ele é...
gostava de desbloquear nokia lumia 520 esta bloque...
Oi. Ainda bem que já tem seguidores. Aí está uma v...
Oi,Sergio. Obrigada pelo comentário no meu blog. T...

pesquisar