4.4.13

Tutorial - Cabeçalho no topo do blog


Olá amores, ontem como prometido trouxe um tutorial.. faz muuito um tempo desde o nosso último, não é mesmo? Por isso voltei com um  tutorial muito importante, pois ele retira este espaço que tem entre o topo do blog e o cabeçalho (onde se localiza a navbar).


(Clique para visualizar melhor)
E ai ? Você gostou do resultado? Quer aprender? 
Então já sabe onde clicar né? u.u

1. Vá no seu HTML  Procure (Ctrl+F ou F3) por :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
2. Acima dele, cole o seguinte código:
<div style="margin-top:-50px;">
Altere o valor de -50px para o valor que preferir, lembrando que quanto maior o número menor é o espaço até ficar grudado lá no topo (ou o quanto você quiser é claro). 


3. E por fim procure por </b:section> e acima dele acrescente </div> Ficando assim:

<div style="margin-top:-50px;"> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='false' title='Seu blog (Cabeçalho)' type='Header'/></b:section></div>

PS: O meu não estava com o título do meu blog (The Things Girls), então o seu poderá esta ok?

Mas, eu não achei o código!

Pode ser que no seu código esteja um pouquinho diferente. Veja se acha esse aqui:
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'><b:widget id='Header1' locked='false' title='Nome do Seu blog (Cabeçalho)' type='Header'/></b:section>
Se achar é só colocar acima dele:
<div style="margin-top:-50px;"> 
E acrescentar </div> depois de </b:section>. Ficando assim:

<div style="margin-top:-50px;">
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Seu blog (Cabeçalho)' type='Header'/>
</b:section></div>



Visualize e se estiver tudo certo, salve. por hoje era só isso mesmo, espero que tenham gostado e que consigam fazer! Qualquer dúvida, comente, responderei ao visualizar! 
E eu estou pensando em mudar o layout de novo, vou começar a fazer-lo amanhã talvez, acho que vocês vão gostar! 
Créditos:  

Kisses
Lúuh

25 comentários:

  1. Oi Lú! Amei o tutorial,muito útil! Beijos e obrigada C:

    garotachique-official.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi Máh,
      Aw, que bom! ele é bem útil mesmo :3

      Excluir
  2. Uso esse tutorial em todos os lays que faço e fica lindo! Além de ser muito útil e fácil, deixa muito mais bonito! *w*
    Bjo, Sel ;*

    Jovens Gordinhas
    Unicórnio com Bigode
    Nerd Descolada

    ResponderExcluir
    Respostas
    1. Eu também! Acho mega importante, pois retira o "ar de iniciante do layouts" né?
      Verdade Sel!

      Excluir
  3. Olá flor :DD
    muito bom o tuto, eles sempre são muito úteis,por exemplo o meu caso que o blog é meio novo e eu n entendo muito de html..e tutos como esse me ajudaram infinitamente! *--* rs

    xoxo'
    http://candy-l4nd.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi,
      Obrigada! srsr - aos poucos você vai aprendendo! É fácil e divertido!

      Excluir
  4. Anônimo5/4/13 10:05

    Oii Luisa, adorei o tutorial!
    Acho bastante útil. Seguindo, segue o meu também?! Beijo!

    garotapersonalizada.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que bom Anne!
      Eu também, sigo de volta sim :3

      Excluir
  5. Eu acho esse tutorial muito legal, dependendo do cabeçalho fica muito bonito.
    Seguindo, segue de volta?
    the-paradiise.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Verdade, se for usado corretamente, fica muito lindo u.u
      Sigo sim Leandro..

      Excluir
  6. amei!o tutorial e´bom pra não ficar com aqueles brushes partidos sabe,da impressão feia..ensina como deixar uma parte colorida no titulo do post,como fez nesse? *0*


    http://liemarieoficial.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou, fico feliz!
      Já postei esse tuto flor, aqui :3
      http://coisasdemeninas-lu.blogspot.com/2013/03/aviso-tutorial-titulo-do-post-colorido.html

      Espero ter ajudado!

      Excluir
  7. Tutorial básico e necessário u3u adorei.
    Me desculpe por ficar ausente flor, eu comecei a estudar para o vestibular então meus horários são contadinhos, tenho só uma hora por dia pra cuidar do meu blog. Desculpe, prometo tentar estar mais presente :/
    Beijos~

    www.black-cherry.net

    ResponderExcluir
    Respostas
    1. Verdade, adoro ele!
      Awn, nada flor, todos nós temos vidas, não quero ficar ti cobrando nada, se não puder não precisa comentar :D
      Assim como eu também, não sei se poderei comentar 2/3 vezes na semana..

      Excluir
  8. Super útil esse tuto, nunca falta em meus layouts! ;)

    [Adolescente Nerd // Um ano de Blog!]

    ResponderExcluir
  9. adorei o tuto, muito útil! seguindo!!

    Beijos: littleclumsyprincess.blogspot.com

    ResponderExcluir
  10. Este comentário foi removido pelo autor.

    ResponderExcluir
  11. amei muito esse tutorial e eu uso ele kkk
    é querida desculpa em te incomodar mas voce não colocou meu blog na elite de afiliados e eu já te coloquei voce poderia me colocar?
    grata!
    beijos :)

    http://detudoumpoucoofficial.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que bom, eu também..
      Awn, desculpe, ontem faltou luz e não pude ligar só a noite..
      Nem vi isso, já resolvi!

      Excluir
  12. Eu amo esse tuto, é muito util! Uso ele sempre!

    Dá uma passadinha?

    cupcakelland.tk

    ResponderExcluir
  13. Muito legal esse tuto, aquele espaço fica muito feito :/
    ------------------
    www.cherryboomb.com

    ResponderExcluir

Heey!
Está pensando em comentar?! Fique à vontade!
✖ - Aceito "Seguindo, segue de volta?'' desde que a pessoa esteja realmente seguindo!
✖ - Não aceito afiliação pelo comments só aqui
✖ - Os comentários de criticas e elogios são bem vindos, desde que seja criticas construtivas!.
✖ - Perguntas, dúvidas e pedidos? Apenas na ask por favor!~
✖ - Aceito tags e selinhos, avise pelos comments ♥
~ Leio Sempre e respondo a todos os comentários!