20/01/2013

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

<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>

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 comentariatas, 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 dificil 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.

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:

#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*/
}

A altura e largura tem que ser exatamente como de seu cabeçalho, caso queira o cabeçalho mais para cima vá mechendo 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:

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

14 comentários:

  1. Ótimo tuto!
    cr4zy-world.blogspot.com.br

    ResponderExcluir
  2. Poderia me ajudar? Não deu certo :( Fica só um espaço, sem nada.

    ResponderExcluir
    Respostas
    1. Yo Amanda desculpe pela demora a responder, você fez a ultima etapa? Deixando o gadget em HTML se não o codigo some e fica apenas um espaço no local

      Excluir
  3. Oi, o meu também deu problema. Ficou um espaço sem nada e eu fiz tudo certinho. Pode me ajudar ?

    ResponderExcluir
    Respostas
    1. Yo R-chan irei testar novemente o código para ver o que esta acontesendo e lhe respondo ok? ^^

      Excluir
    2. Ok. tentei novamente e nao deu :/

      Excluir
    3. Entra no msn que eu lhe ajudo

      Excluir
  4. no novo bloger nao ta dando certo nao quando apaga da erro tentei outro jeito aplicando o codigo seu mais abre o espaco do banner mais a imagem nao aparece

    ResponderExcluir
    Respostas
    1. Ele só aceita se for o primeiro código a ser colocado no ]]> abra um bloco de notas e cole todos os códigos do ]]> nele e refaça o tutorial salve e veja se funcionou. Após isso recoloque todos os códigos novamente.

      Excluir
  5. Yoooo! Me ajuda? Como você faz pra deixar o cabeçalho de lado, acima dos gadgets?

    ResponderExcluir
    Respostas
    1. Yo você usa esse tutorial

      http://www.bunnycrazy.net/2013/02/tutorial-colocando-cabecalho-acima-da.html

      Excluir
  6. No meu fica tudo branco (espaço), fiz tudo o que pede no tutorial.

    ResponderExcluir
    Respostas
    1. Olá linda cole o código abaixo do .mobile, se tiver códigos no ]] acima dele não vai aparecer. Ou então cole todos os códigos que estão no ]] em um bloco execute o tutorial e depois coloque de volta.

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram