Colocando uma imagem na header (cabeçalho)

Colocar uma imagem no topo do seu blog deixará ele bonitão, sem dúvida nenhuma, mas muita gente não sabe como fazer tal proeza, eu digo que não tem mistério algum, basta ir no lugar certo e clicar nos botôes certos.

Para inserir uma imagem clicavel você deverá ativar mais um elemento de página, para que seu template possua uma guia lá no topo:

Clique em "Layout" - "Editar HTML" - (salve seu template, para se proteger se algo der errado);

Desmarque a opção "Expandir modelos de widgets";

Em seguida procure por esse trecho:
<div id=”header-wrapper”>
<b:section class=”header” id=”header” maxwidgets=”1” showaddelement=”no“>
<b:widget id=”Header1&#8243; locked=”true” title=”Título do Blog (Cabeçalho)” type=”Header”>
</b:widget>
</b:section></div>
Esse código pode estar diferente no seu template, é bom você analisar bem e procurar por <b:section class=’header’ id=’header’ maxwidgets=’1‘>, caso não encontre o indicado acima.

Em seguida modifique os valores que estão em azul por:
  • Troque "maxwidgets=”1“" por "maxwidgets=“3“"
  • Troque "showaddelement=“no”" por "showaddelement=“yes”"
  • Troque "locked=’true‘" por "locked=’false‘"
Agora visualize, se tudo estiver certo salve.

Adicionando a imagem

Agora abra a guia "Elementos de páginas" e você verá um novo elemento, lá no topo, onde vamos clicar adicionar um campo "HTML/JavaScript";

Em seguida deixe o título do elemento em branco e adicione o seguinte código:
<a href=”URL(link) DO SEU BLOG” title=”ADICIONE O TÌTULO DO BLOG AQUI”>
<img width=”LARGURA DA IMAGEM”
src=”URL DA IMAGEM” height=”ALTURA DA IMAGEM“/></a>
OBS: Altere os campos indicados no código.

Agora você terá que apagar o antigo cabeçalho, para isto faça:

"Editar elementos de páginas" - procure por "Cabeçalho" e em seguida poderá exclui-lo sem medo.

Minha dica é criar uma imagem bem bonita em um editor de imagem, adicione efeitos, o nome do seu blog e tudo mais.
Tag ,