Cabeçalho mais para cima

8 de jan. de 2012


Oi meus moranguinhos com chocolate! Como vão? Se divertindo bastante nessas férias? Espero que sim ^^
Então, hoje vim ensinar como colocar o cabeçalho mais pra cima, tipo assim:

(Clique para visualizar melhor)

Esse tutorial quem me passou foi a diva da Emily, do Extras PF por comentário há uns meses atrás, então créditos a ela! 
Esse tuto é muito bom pra quando se quer dar a ideia de que algum elemento está saindo do topo, aqui no blog por exemplo, temos a plaquinha com o nome do blog, com duas fitinhas "segurando" essa placa. Fica bem mais bonito do que deixar ela "flutuando". Se interessou pelo tutorial? Então go go go! 
Vá em Design > Editar HTML e Procure (Ctrl+F ou F3) por : 
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
Acima dele, cole o seguinte código: 
<div style="margin-top:-50px;"> 
E altere o valor (50px) até ficar grudado lá no topo (ou o quanto você quiser é claro). 

Agora acrescente </div> depois de </b:section>. Ficando assim:

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


PS: O meu está com o título do meu blog (Go Imagine), o seu estará com o nome do seu blog ok? 

Anny não achei o código!

Calma, 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='Go Imagine (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='Go Imagine (Cabeçalho)' type='Header'/>
</b:section></div>


Por hoje era só isso mesmo, espero que tenham gostado e que consigam fazer! 

Quero me desculpas pela demora pra postar e responder os comentários, tá todo mundo de férias aqui em casa então agora tenho que dividir o notebook com mais 3 pessoas, então fica difícil postar. Mas vou tentar postar mais seguido, não só um por semana né :/
E talvez logo logo cheguem algumas novidades aqui no blog, acho que vocês vão gostar! Kisses amores :*


Sorteio de um layout rolando no blog Adolenário, pra concorrer clique aqui.

60 comentários:

  1. Primeira a comentar, uhu!

    vih-rockgirls.blgospot.com

    ResponderExcluir
  2. Oii! faz um tuto de como você colocou o seu titulo dos gagdes assim? bj!

    ah! e o blockquote ^-^


    vih-rockgirls.blogspot.com

    ResponderExcluir
  3. adoreei seu blog Anny, as postagens são demais. já estou seguindo.
    ps: o post das sardas me ajudou muito, pois eu tenho essas benditas! rs.

    Beijos.

    girlsgarotasonline.blogspot.com

    ResponderExcluir
  4. Adorei o tutorial, mas acho que não estou precisando disso para meu layout, mas vou usar em uma encomenda, hehe! ótimooo, parabéns!!!!
    Sobre o tutorial do menu deslizante eu vou postar sim, só que vai ser na semana que vem, tá? Beijos, se cuida!

    http://queloucura-blog.blogspot.com

    ResponderExcluir
  5. Muito bom o Tutorial. Estava precisando mesmo.
    Post Novo Comentaa? Rosa Chiclete
    Beijos Anny.

    ResponderExcluir
  6. muito bom o tuto, deixei de usar um banner porque ele não ficava coladinho u_u agora vou colocar hiihih *-*
    vou preparar o tuto Anny :) bjbj
    deboramoraiss.blogspot.com

    ResponderExcluir
  7. Oi meu anjo, seu blog é lindo hahaha Vou te colocar no "blogroll", pq não tenho elite de afiliados e quero afiliar ehehehhe, tudo bem para ti? :) Já te coloquei lá!
    http://senhoritaliberdade.blogspot.com/

    ResponderExcluir
  8. Pode ser na blogroll, enfim, onde for melhor para você.

    ResponderExcluir
  9. Adorei o blog , muito perfeito *--*

    Jaa to seguindo .. Se puder visitaa lá :

    http://cherrygirl-s2.blogspot.com/

    Beeijoos :*

    ResponderExcluir
  10. Ei, amei o seu blog e o tutorial. Se puder dar uma olhadinha no meu. Estou seguindo. Bjoo

    http://clove-cinnamon.blogspot.com/

    ResponderExcluir
  11. Obrigada pela divulgação flor ^^

    ResponderExcluir
  12. Faz um tutorial para cabeçalho transparente ? :)

    ResponderExcluir
  13. OMG ! eu amei esse tuto, vivia procurando mas nunca achava ! Obrigada *-* Amei seu blog é perfeito, estou seguindo. Beijinhos

    http://blog-upside-down.blogspot.com/

    ResponderExcluir
  14. Linkei querida ;D
    http://ladonerdl.blogspot.com/

    ResponderExcluir
  15. Muito bacana esse tutorial, obrigada pela dica!
    Beijo e ótima semana pra vc
     Just Carol

    ResponderExcluir
  16. nn precisa mais ;) Bjk! Amando os tutos!

    ResponderExcluir
  17. Queria saber mesmo como era,pois alguns de meus cabeçalhos pareciar flutuar e ficava muito feio...Obrigada pela dica,viu?
    Bjs!

    www.larissamerlo.blogspot.com

    ResponderExcluir
  18. Amei a dica e o blog!!
    Beijos!

    www.alinestar.com

    ResponderExcluir
  19. Olá meu nome é Luan e meu blog está convidando o seu para participar de um concurso,espero que voce participe!Bjs
    www.fofocasda-web.blogspot.com

    ResponderExcluir
  20. Obvio q eu aceito parceria!!
    Obrigado pelo feliz aniversario!!
    Ja botei seu banner la no meu blog...
    bjs,
    Ge

    www.blogdasbff-geenic.blogspot.com

    ResponderExcluir
  21. Anny, sabe a fonte em degradê que você me explicou, fiz um tuto lá no blog, mas já tá creditado :) Bjss
    Cherry Sweet

    ResponderExcluir
  22. Oii, adorei aqui *--* Tou seguindo já :D
    Um beijo,

    www.seradolescenteblog.blogspot.com

    ResponderExcluir
  23. kkkk eu vi os posts antigos daqui rs mais eu adoro ver esses tipos de post. La no Trechy Teen as vezes eu acho uns bem antigos. Pena que eu apaguei todos os meus porque é bem engraçado ver essas mudanças ^^
    beijinhos

    ResponderExcluir
  24. Dona Anny, era esse o tutorial que eu estava procurando há tempos! Poxa, muito obrigada <3

    Beijos, onthefame.tk

    ResponderExcluir
  25. Não creio que achei este tutorial! Tambem estava procurando a tempos!
    Vou usar *o*
    Obrigada meesmo por postar!

    http://garotasederivados.blogspot.com/

    ResponderExcluir
  26. Gente, deu certo *o*
    amei&amei *--*

    http://garotasederivados.blogspot.com/

    ResponderExcluir
  27. amei! meu cabeçalho ficou bem melhor agora!http://sonhos-na-adolescencia.blogspot.com/

    ResponderExcluir
  28. Pronto linda, te linkei, seu banner ta na ag. parceiros! Beijooo

    ResponderExcluir
  29. Obrigada, também acho a cachorrinha muuito fofa

    ResponderExcluir
  30. Não consegui... Não achei o código . O meu modelo é viagem.

    cdiasblog.blogspot.com

    ResponderExcluir
  31. Hey valeu pela dica!!! essa funcionou hahaha beijoos
    http://abouteverything-cm.blogspot.com/

    ResponderExcluir
  32. Muito bom o Tutorial. Estava precisando mesmo.
    Post Novo Comentaa?


    - Visite meu Blog: http://gah-principe-hype.blogspot.com/

    ResponderExcluir
  33. Eu fiz o tutorial todinho nao tive nenhum problema pra encontrar os codigos, mas so que fica dando erro na hora de visualizar

    Ta rolando no Perfeitinha o sorteio de um dominio .com corre e participa http://www.perfeitinhablog.com/

    ResponderExcluir
  34. Amei demais o tuto, aliás todos são muito bons!
    Visitem meu blog, está no começo!
    http://cappuccinoeaconta.blogspot.com.br/♥

    ResponderExcluir
  35. Amei o tuto muito obrigada!!!! Eu estou fazendo o layout do blog por isso preciso de muitos tutoriais >.< Já to seguindo!!

    http://blog-papo-de-menina.blogspot.com.br/

    ResponderExcluir
  36. Tutorial excelente, acredita que faz muuuito tempo que eu procurava um tutorial desse?

    Beijinho =)

    ResponderExcluir
  37. Me ajudou mmmmmmmmmmmmmmmmmt ><
    amei, Obrigado.

    http://www.inadolescencia.com/

    ResponderExcluir
  38. Oh God, seu blog é lindo. Seus tutoriais são muito úteis, eu juro que procurei esse tutorial aqui pelo mundo inteiro, e achei que meu problema não tinha solução. Muito obrigada mesmo, Alana! Já estou seguindo ^^

    ResponderExcluir
  39. a dias que estava tentado fazer essa alteração, e vcs mim ajudarão com esse problema, agradeço TauaInfo.com

    ResponderExcluir
  40. flor, tem um erro no código. Ele é assim: as aspas seriam ' e antes do último > falta uma / No meu eu concertei.

    ResponderExcluir
  41. obrigado...foi super útil o tutorial.

    http://wackodesigns.blogspot.com/

    ResponderExcluir
  42. Muito obrigada! Com esse código consegui colocar o banner mais pro lado e mais pra cima!!!!!!

    ResponderExcluir
  43. Me ajudou mto!! OBG!!!!
    likearocklikearoll.blogspot.com

    ResponderExcluir
  44. Meu deus, aqui foi o único lugar em que achei como fazer isso. Todos os outros sites estão desatualizados, e as dicas só servem para o modelo antigo do Blogger. Você poderia, por gentileza, me ajudar em algo? Estou completamente desesperada! Como faço para para expandir o cabeçalho/imagem do cabeçalho? Mas sem ficar apenas dentro dos conformes da página. Quero que fique exatamente com o seu. Em termos mais rasgados, ''totalmente para os dois lados'', ainda que a postagem fique no meio. Quero que ocupe a página inteira, para os lados, entende? Não sei muito bem como explicar, mas talvez você entenda. De qualquer forma, obrigada, e agradeço desde já.

    ResponderExcluir
    Respostas
    1. Oi linda, tem o tutorial na página goodies, dá uma olhada lá. Se chama "Cabeçalho em toda largura do blog", ou algo assim haha

      Excluir
  45. Obrigada me ajudo muiito,quqeria que vc fizesse uma tutocomo trocar aquele bezinho que fica la em cima ´por uma imagem tipo no seu que ta um "Gi"

    ResponderExcluir
  46. ajudou muito mesmo
    http://rebelde-amamos.blogspot.com.br/

    ResponderExcluir
  47. Adorei,funcionou perfeitamente no blog da minha amiga

    ResponderExcluir
  48. Olá gosto muito do seu blog, por acaso você tem algum tutorial como fazer essa faixas colorida de comentários? e como fazer para deixar essa faixa a cima dos seguidores e marcadores? não encontro nenhum tutorial como fazer, por favor dar para ensinar caso não tenha? obrigada fico aguardar sua resposta sucesso beijo.

    ResponderExcluir
  49. Oi adorei,entrem no meu blog e seguem por favor sonho 100 seguidoras lindas http://diariodeumapatricinhaaaaa.blogspot.com.br/

    ResponderExcluir
  50. Consegui, nas primeiras tentativas eu havia falhado...porém eu arrisquei mais algumas vezes e finalmente consegui. Ainda tenho mais uns 30 tutoriais desse blog pra ver :3

    ResponderExcluir
  51. Flor adorei o TUTO mas gostaria de saber como faço pra colocar aqueles widgets de slide com postagem recente no cabeçalho do blog?

    ResponderExcluir
  52. Cara, baixei um layout pronto pro meu blog e decidi dar uma personalizada. Tá, até ai td blz até que eu fui tentar mexer no HTML, lógico que com ajuda. Ia pegar uns goodies daqui do blog, códigos de HTML essas coisas, quando apertei F3 e digitei o código na barra de pesquisa, não consegui encontrar nada! Ai tentei outros códigos, mas não deu certo! Ficou td do mesmo jeito! O que eu faço?

    ResponderExcluir
  53. Oi eu A-M-E-I seu blog ele é.....maravilhoso e usei o o tutorial de como fazer um layout sweet rocker(que ficou lindo) e ainda esse,nossa com a ajuda do seu blog vc tá mudando vidas de pessoas que sem saber NADA sobre blog com vc aprende TUDO!

    ResponderExcluir
  54. Cara, você me ajudou muito no meu novo blog, e meu lay *o* Obrigada mesmo, continue assim. Kissus !

    ResponderExcluir
  55. Obrigada pela ajuda, aquele espaçinho estava mesmo me incomodando, beijos♥

    ResponderExcluir
  56. Olá querida!
    Obrigada pelo tuto! Consegui aplicar no meu blog!

    Beijos
    www.justbia.com.br

    ResponderExcluir
  57. também deu super certo! Obrigada!! http://ideiadela.blogspot.com.br/

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.