Olhe a barra de endereços do navegador de internet que você usa e
repare que há um ícone ao lado do endereço do meu blog, que também
aparece junto ao nome do Blog. No Blogger, por exemplo, esse ícone é
padrão, um “B” laranja. Isso nós chamamos de “Favicon” e você pode
personalizar isso para o seu blog. Vou mostrar como usar um tanto no
Blogger quanto no WordPress e que vai funcionar em todos os navegadores.
Isso determina a identidade de seu blog e dá mais características de
profissionalismo para seu trabalho. É uma mudança simples, mas que ajuda
a destacar seu trabalho.A primeira coisa a fazer é criar uma imagem quadrada que tenha 16x16px – um quadradinho bem pequeno. Você vai precisar criar essa imagem do tipo PNG (formato do arquivo de imagem). Pode ser até no Paint do Windows. Então envie essa imagem para alguma hospedagem na web, que pode ser até o do PicasaWeb ou de um host particular. Aqui eu ensino como fazer isso no PicasaWeb:
Se você usa o WordPress.org
(Com hospedagem e domínio próprios)
Envie sua imagem criada para sua pasta padrão de imagens do seu blog, dentro do seu Host (hospedagem). Entre na sua conta e no painel de controle clique no menu “Aparência” ~> “Editor” e selecione o arquivo “Funções do tema (functions.php)”, como ilustra a imagem:
Então cole o seguinte trecho de função:
function childtheme_favicon() { ?>
<link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/imagens/favicon.png" >
<?php }
add_action('wp_head', 'childtheme_favicon');Onde está destacado de vermelho, nessa função ele buscará a imagem do Favicon dentro de uma pasta “imagens” do seu host. Mas você pode substituir todo esse trecho de vermelho por uma URL do endereço da imagem.
Salve e veja o resultado se funciona bem em todos os navegadores.
Se você usa o Blogger/Blogspot
Agora o Blogger tem um gadget (elemento de página) só para fazer a troca do Favicon de forma padrão e mais fácil. Veja a imagem abaixo:
Ao clicar em “Editar” junto ao “Favicon”, na janela que abrir basta adicionar a imagem do ícone que deseja usar. Salve e veja o resultado já funcionando no seu blog.
De toda forma, se ainda quiser usar o modelo de código só para garantir, veja o procedimento manual logo aqui.
Você terá de enviar a imagem para uma hospedagem ou para o PicasaWeb como descrevemos logo no início desse artigo e pegar a URL dessa imagem. A seguir, entre no painel de sua conta no Blogger.
Clique no menu “Modelo”, clique no botão “Editar HTML” e procure pela linha “]]></b:skin>”. Imediatamente ABAIXO disso, cole o trecho:
<link href='URL_da_IMAGEM.png' rel='icon' type='image/x-icon'/>
<link href='URL_da_IMAGEM.png' rel='shortcut icon' type='image/x-icon'/>Substitua o que está destacado de vermelho pela URL, o endereço, da imagem do ícone (faicon) que escolheu para seu blog. Salve o modelo e veja o resultado na barra de endereço dos navegadores que você usa.
Para os dois casos, tanto para Blogger quanto para o WordPress, eu só verifiquei o resultado no Google Chrome, no Internet Explorer 8 e no FireFox 3.6. Se você usa outro navegador e encontrar isso funcionando bem, nos avise aqui nos comentários, especialmente se você usa o IE7 ou IE6.
0 comentários:
Postar um comentário