Isso mesmo! Vamos trocar o título do blog por um logotipo personalizado.
Como o blog está para completar um ano de vida, estou trabalhando em um template novo e uma das coisas que estava me tirando o sono era não conseguir usar um logo no blog no lugar do título.
Como já sabemos, temos duas opções:
01 - Colocar uma imagem de fundo e o título e descrição do blog por cima (só escritos).
02 - Colocar uma imagem no lugar do título e da descrição.
Eu até usava uma imagem com uma espécie de logo colado nela, mas o problema é que a imagem inteira se torna clicável, o que prejudica principalmente se você quer colocar um menu ou anúncio junto da imagem (coisas para outro post :D).
Depois de queimar mais alguns neurônios (que já estão em extinção) consegui uma alternativa.
01 - Colocar o logo no lugar do título sem alterar o código do blog:
A - Primeiro, você vai precisar hospedar a imagem que quer usar em algum lugar. Você pode fazer isso no próprio blog como já mostrei no post:
Blog no blogger? Qual o lugar ideal para hospedar suas imagens?
Ou pode usar algum serviço em particular. A escolha é sua e não influência em nada.
B - No painel de controle da sua conta no blogger vá até Layout -> Fontes e cores e modifique a cor do título do blog para uma cor próxima a imagem que você usa no header(cabeçalho) e o tamanho da fonte do título do blog para o mínimo possível (ela vai ficar quase imperceptível).
Depois, confira tudo, clique em SALVAR ALTERAÇÕES e em visualizar blog.
C - Vá até a página Elementos de página e clique em Adicionar um Gadget próximo ao header do blog.
Na janela que se abre, clique em HTML/JavaScript e adicione o código abaixo (com as devidas alterações):
<div id="logodoblog" style="position:absolute; overflow:hidden; top:5px; left:9px;"><a href="url da página" title="Página inicial"><img border="0" width="221px" src="url da imagem" height="41px"/></a></div>
Faça as seguintes alterações no código:
Onde está url da página, substitua pela url do seu blog. Ex: http://novonarede.blogspot.com
Onde está url da imagem, substitua pela url da imagem que você hospedou no passo A (não esqueça o http://).
Onde está width="221px" substitua o 221 pela largura da imagem.
Onde está height="41px" substitua o 41 pela altura da imagem.
Além disso, você pode fazer alterações onde está escrito top:5px (posição do logo com relação ao topo da página) diminuindo ou aumentando este número. O mesmo onde está left:9px (posição do logo com relação ao lado esquerdo da página). Vá modificando até encontrar a posição que mais lhe agrade. ;)
Importante: Cuidado para não apagar as aspas!
02 - E a descrição do blog?
Pois é, se você prestar atenção, vai ver que eu deixei a descrição do blog ao lado do logo. Se você quiser pode criar um logo com a descrição já inclusa e simplesmente ir até a página Elementos da página, clicar em Editar no gadget Cabeçalho e apagar a descrição do seu blog deixando só o título.
Agora, se você quiser fazer como o meu, aí não tem como não ir até o código do blog. Não se preocupe, pois as alterações são mínimas.
Primeiro, lembre-se de salvar uma cópia do seu template!
Depois, procure pelo trecho abaixo:
#header .description {
margin:13px 0 0 250px; (os números serão diferentes)
padding:0 12px 5px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
Na parte em negrito, basta alterar o primeiro e o último número até conseguir encaixar a descrição do blog.
Se caso o seu código só tiver um número (margin:9px) adicione os outros três.
Explicando:
A marcação gira no sentido horário, começando do topo. Sendo assim:
O primeiro número é a distância da descrição para o topo da página.
O quarto número é a distância da descrição para o lado esquerdo da página.
Não, não é propaganda enganosa não!
Como eu disse, basta você criar um logo com a descrição junto que você não vai precisar alterar o código. Só resolvi explicar como alterar, por conta da minha descrição estar assim. ;)
É isso pessoal! Qualquer dúvida ou outra coisa, os comentários estão abertos! Faça bom uso!
Ps: O logo tá meio mais ou menos mesmo (ainda estou trabalhando em um melhor), assim como o header. Não se assuste se nos próximos dias você passar por aqui e encontrar "algumas" mudanças (homem trabalhando). :D
Ps2 (a revanche): A "div id" do código é para podermos adicionar a altura e largura, mas também para podermos modificar o resultado através do código do blog (vamos ver isso mais para frente). ;) Qualquer problema é só mudar o nome logodoblog para qualquer outro, você só não pode usar um que já exista no código do seu blog.
