E ai docinhos de cereja! Como vão vocês?
Hoje eu trouxe um tutorial que é bem antigo, mas que deixa o layout do blog muito bonito e eu uso aqui no Sweet que é Como colocar um cabeçalho na sidebar.
Quando eu estava criando esse layout eu logo pensei no cabeçalho, pois eu queria algo diferente, o cabeçalho fica sempre no topo do blog e por que não de posição? E ai me lembrei desse tutorial e resolvi trazer hoje para vocês.
A primeira coisa que vamos fazer é tirar o fundo do primeiro gadget, vamos deixá-lo transparente e existe algumas formas de fazer isso, mas vou mostrar esse.
Vá em Modelo>>Editar HTML>>Clique dentro da caixa de códigos e aperte Ctrl+F e procure por:
.sidebar .widget:first-child {
Você vai encontrar algo mais ou menos assim:
.sidebar .widget:first-child {
margin-top: 0;
}
Então substitua isso por:
.sidebar .widget:first-child {
background: transparent;
border-top: 0px solid #cccccc;
border-bottom: 0px solid #cccccc;
border-right: 0px solid #cccccc;
border-left: 0px solid #cccccc;
outline-offset: 0px;
outline: 0px solid #cccccc;
box-shadow: inset 0px 0px 0px #cccccc, 0px 0px 0px #cccccc;
border-radius: 0px 0px 0px 0px;
}
.sidebar .widget:first-child:hover {
background: transparent;
border-top: 0px solid #cccccc;
border-bottom: 0px solid #cccccc;
border-right: 0px solid #cccccc;
border-left: 0px solid #cccccc;
outline-offset: 0px;
outline: 0px solid #cccccc;
box-shadow: inset 0px 0px 0px #cccccc, 0px 0px 0px #cccccc;
border-radius: 0px 0px 0px 0px;
}
Visualize se deu certo, se caso der, então Salve.
Agora vamos para parte onde colocamos o cabeçalho no blog.
Vá em Layout>>Adicionar um Gadget>> HTML
Java/Script e cole esse código:
<div style="margin-top: 0px; margin-left: -10px; margin-right: -15px; margin-bottom: -5px;">
<a href="LINK-DO-SEU-BLOG"><img src="URL-DO-CABEÇALHO" /></a>
</div>
No lugar de LINK-DO-SEU-BLOG coloque a URL
do seu blog, para que se caso a pessoa clicar sobre o cabeçalho ela continue no
seu blog e seja redirecionada para a página inicial.
E já no lugar de URL-DO-CABEÇALHO coloque a
URL da imagem que você quer como cabeçalho.
Os números que se encontram no inicio do código são para que
a imagem não fique cortada. Se caso isso acontecer é só mudar o números.
- margin-top: é
a margem do topo, se caso quiser que ela fique mais para cima é só colocar
um número (-) negativo, mas se quiser que a imagem fique mais para baixo é
só colocar o número positivo.
- margin-left: é
em relação ao lado esquerdo. É o mesmo esquema se quiser mais para
esquerda número (-) negativo, mas se quiser para o lado oposto
número positivo.
- margin-right: já
é o lado direito. Para a imagem ir para o lado direito o número negativo e
se quiser para a esquerda número positivo.
- margin-bottom: se
caso quiser que a imagem fique mais para baixo é só deixar negativo e mais
para cima positivo.
Recomendo que você veja o tamanho certo para o cabeçalho
para não ter muitos problemas.
Depois das modificações salve, mas deixe o gadget sem
título. E claro o gadget deve ficar em primeiro.
Esse tutorial serve para qualquer imagem que você queira
colocar no blog, não só o cabeçalho.
Bem pessoal espero que tenham gostado e até o próximo post.
Créditos ao Chuva de HTML
Se caso quiser pedir algum tutorial, utilitários, etc. Peça ai nos comentários ou na página de Contato.