Colocando cabeçalho por HTML no blog

Nyah!!! Como vão meus nekos hoje? Hoje decidi mostrar como remover o cabeçalho padrão do blog e adicionar um colocar por html. Vou mostrar duas formas de adicionar um cabeçalho por HTML, mas é claro que antes irei dar os créditos para o blog Cherry Bomb.

1. Para  excluir o cabeçalho atual do blog, ou seja o padrão que vem nos modelos Travel. Para isso vá em seu HTML e procure pelo Nome do seu blog exemplo, o meu se chama Bunny Crazy (Cantinho da Drw como era antigamente) então usando o atalho Ctrl+F irei procurar por ele você achara algo mais ou menos assim:

Códigos

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NOME DO SEU BLOG' type='Header'/></b:section>

2. Agora apague toda a parte em negrito, visualize pra ver se não deu erro, então salve. Caso seu computador esteja com muitos erros, pode ser que não delete o cabeçalho, ai infelizmente vai ter que ficar aquela coisa horrenda sobre seu lindo cabeçalho atrapalhando o seu slide rsrs brincadeira!!!

Vá em Modelo >> Personalizar >> Avançado

Em avançado procure por Título do Blog, ele fica bem no comecinho. O arrume exatamente como mostro abaixo, coloque na cor transparente e em px coloque o numero 0;

Então salve. ^^

Ouve alguns comentaristas, avisando que ficava apenas um espaço e não aparecia o banner, então eu fui fazer o teste e realmente ficava apenas esse espaço, então descobri porque de não esta funcionando. Ele não pode ficar abaixo de outros códigos (menus, efeitos) então ele tem que ser um dos primeiros códigos colocado no ]]></b:skin>,  mas boa parte arruma o cabeçalho sempre por ultimo, então fica difícil colocar acima dele, então vamos colocar em outro lugar agora, aproveitei para corrigir essa postagem e fiz uma pequena modificação no código, ele não tinha como mover para os lados só cima e baixo, então apliquei essa parte para movimenta-lo.

3. Agora vamos colocar seu novo cabeçalho, vá ate seu HTML e procure por   border-$startSide: 1px solid $(tabs.selected.text.color); }, e abaixo dele adicione esse código:

Códigos

#topo {
width: 980px; /*Largura da imagem do cabeçalho*/
height: 300px; /*Altura do cabeçalho*/
margin-left:-80px;
background: url ('link da sua imagem de cabeçalho') no-repeat;
margin-top: -20px; /*Margem do topo*/
}

4. A altura e largura tem que ser exatamente como de seu cabeçalho, caso queira o cabeçalho mais para cima vá mexendo em margin-top: agora salve, porem seu cabeçalho ainda não vai aparecer. Então vá ate Layout e abra um novo gadget Html/Java Script e dentro coloque:

Códigos

<div id='topo'>
</div>

Então prontinho!!! Mova o gadget e coloque ele bem em cima do corpo do seu layout, onde costumava ficar o antigo. Caso queira colocar gadgets no cabeçalho como, menus, slides basta ver esse tutorial.