Motivo nº:n+151
Um pouco de estilo à plataforma
A dica de hoje vai de encontro com a vontadezinha que sempre dá de estilizar os nossos blogs, seja alterando o layout ou simplesmente o ícone que aparece na guia da página ao lado do nome do site, ou o chamado favicon.
O favicon original de um blog hospedado no blogspot corresponde ao seguinte símbolo:
 |
| Ícone Blogger |
Adicionar um favicon, além de trazer estilo ao seu blog, também passa para quem está visitando seu espaço uma sensação de autenticidade, de originalidade da página.
Além disso, um ícone personalizado também destacará sua página de outras guias, quando muitas guias estão abertas.
Mas como colocá-lo? No guia abaixo, confira o Passo a Passo de como alterar seu favicon.
 |
Guia para alterar o favicon de seu blog
Como nem todos os modelos de blog possuem o widget favicon disponível na aba Layout, o Passo a Passo aqui será de inserção de favicon através de alterações no código HTML. O primeiro de tudo é definir a imagem.1) Imagem
- Escolha uma imagem livre de direitos autorais. Baixei a minha pelo Pixabay.
- A imagem deve ser no formato png e ter uma dimensão de exatamente 16X16.
- Para redimensionar a imagem, recomendo o site IloveImg. Selecione a imagem png salva no seu computador, digite as medidas nos boxs à direita e clique em redimensionar IMAGENS. Salve a imagem redimensionada no seu computador.
2) Hospedando a imagem
- Agora você vai hospedar a imagem png 16X16 num site para gerar um link. Eu usei e recomendo o ImgBB, site gratuito e bem simples de usar.
- Clique em começar a enviar, adicione a imagem desejada e clique em enviar. Aparecerá um link, o qual você vai copiar e abrir numa nova aba.
- Na página aberta, clique com o botão direito sobre a imagem carregada e selecione Copiar endereço da imagem.
- Salve o endereço num bloco de notas, pois é ele o essencial para o próximo passo.
3) Editando o código HTML
- Acesse o editor de código HTML do seu blog: blogger > tema > botão com três pontinhos na vertical > editar HTML.
- Clique dentro da caixa e abra uma caixa de pesquisa com ctrl+F. Importante: a caixa de pesquisa deve ser aberta dentro da caixa de código (localizando-se em cima, não embaixo da caixa).
- Procure pelo código <head> e cole o código abaixo em seguida, inserindo o url (endereço da imagem que você salvou anteriormente no bloco de notas) no local indicado:
<link rel="shortcut icon" href="URL-DA-SUA-IMAGEM"/>
- Em seguida, busque a linha ]]></b:skin> ainda no modelo e adicione, logo abaixo, o seguinte código com as modificações indicadas:
<link href='URL-DA-SUA-IMAGEM' rel='icon' type='image/x-icon'/>
<link href='URL-DA-SUA-IMAGEM' rel='shortcut icon' type='image/x-icon'/>
<link href='URL-DA-SUA-IMAGEM' rel='icon'/>
<link href='URL-DA-SUA-IMAGEM' rel='icon' type='image/vnd.microsoft.icon'/>
- Não se esqueça de visualizar as alterações antes de salvar o layout. Estando tudo certo, salve e entre no seu blog para conferir a alteração.
E vocês, o que acharam do procedimento? Tranquilo ou complexo? Comentem aqui embaixo!
 do blog){kind=link}
12 Comentários
Saudades de ver esse tipo de conteúdo com dicas de como deixarmos nosso blog mais a nossa cara! Valeu pena dica.
ResponderExcluirBlog Profano Feminino
Fico contente que tenha gostado! Sempre bom darmos um toque pessoal ao blog <3
ExcluirAbraçz
Ótima dica! Tão explicadinho assim fica mais fácil de fazer também. Tenha um ótimo dia, beijos!
ResponderExcluirBlog Paisagem de Janela
www.paisagemdejanela.com
Que bom que achou tranquilo, Paula!
ExcluirÓtima dia pra vc tbm <3
Abraçz
Me lembro que meu primeiro favicon, quando criei o blog, era um minigif de coração <3 Depois eu criei um de 16X16 com a logo do blog. Sem dúvida o favicon dá um ar de blog profissional.
ResponderExcluirSe vc for no painel de controle do blogger e clicar em layout, ou "esquema", lá encima está escrito "favicon", dá pra colocar seu ícone por lá também, sem precisar editar HTML ;)
Beijo, Blog Apenas Leite e Pimenta ♥
Com certeza, Leslie, realmente dá um ar mais profissional ao blog!
ExcluirTentei alterar dessa maneira, pelo Layout, mas este modelo que estou usando não tem a aba do Favicon :(
Mesmo assim, é uma ótima dica também!
Abraçz
Ahh sim, eu tive um layout que também não dava pra mudar por lá, tinha que ser pelo HTML também. É bom que se mais gente tiver esse problema, consegue se orientar pelo seu tutorial ;)
ExcluirSim sim <3
ExcluirUm guia muito útil!
ResponderExcluirBjxxx
Ontem é só Memória | Facebook | Instagram | Youtube
Que bom que gostou, Teresa!
ExcluirAbraçz
Essa é uma ótima dica, o meu eu fiz com as iniciais do blog.
ResponderExcluirBeijos/Kisses.
Anete Oliveira
Blog Coisitas e Coisinhas
Fanpage
Instagram
Adorei o seu favicon, Anete! Super estiloso e autêntico <3
ExcluirAbraçz
Sua interação é sempre bem-vinda!!
Deixe seu comentário acompanhado do link do seu blog que retribuo a visita!! E não esqueça de seguir também para acompanhar as atualizações!