Dicas - Como colocar um logotipo no lugar do título do blog

Isso mesmo!

Vamos trocar o título do blog por um logotipo personalizado.

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.

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 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 corese 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):

Faça as seguintes alterações no código:

Onde está url da página, substitua pela url do seu blog.

Ex: http://naninha-downloads.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.

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.
É isso pessoal! Qualquer dúvida ou outra coisa, os comentários estão abertos! Faça bom uso!

Ps: 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. 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.