Visualizar

Cabeçalho com uma faixa


14 julho 2012

Make colorido na medida! Matéria de beleza, na edição 1147.
Oi oi gente! Muitas meninas estão mandando e-mail perguntando sobre esse meu cabeçalho com uma faixa preta e uma cor diferenciada exclusiva para a região. Depois de muitos pedidos, resolvi fazer um tutorial explicando como dar esse efeito, sim, isso não passa de um truque no html. Vamos lá: Primeiro de tudo, você precisa colocar seu menu no cabeçalho (www), feito isso, vamos seguir:


 Vá no seu html, dê um CTRL+F e procure por:
Body {
 Você vai encontrar um código logo abaixo dele, mais ou menos assim:
body {
 font: $(body.font);
 color: $(body.text.color);
background: seu background e tal;
 Apague a tag background e substitua por essa:
background: url(url da parte do cabeçalho, a faixa) repeat-x;
}
html {
background: url("url do background para o resto do blog") repeat; }
 Plum, como eu crio um background-faixa pra mim?
Tire as medidas certas do seu cabeçalho. Em seguida crie uma nova imagem com alguns pixels a mais, tanto na largura quanto na altura. Exemplo:
Se seu cabeçalho for 864 x 239, sua imagem deverá ter mais ou menos 982 x 266, pare que fique exatamente bem alinhada. Se sobrar, é só ajustar depois. Sua imagem pode ser uma cor lisa ou no estilo background, você decide. Mas é importante fazer um retângulo preto no estilo menu, claro!

Bom galerinha, como podem perceber, não tem nada de especial nisso. Espero de coração que vocês tenham curtido, em breve trarei mais tutoriais pedidos, não esqueci de vocês ♥

56 comentários:

  1. Ficou lindo mesmo o seu!
    Bjuku!!

    ResponderExcluir
  2. Que legal esse tutorial!Vou ver se faço no meu próximo layout esse tipo de menu!

    Bjs

    http://magicmih.blogspot.com.br/

    ResponderExcluir
  3. que tuto legal Plum!
    obrigadão
    beijos
    http://perfect-girlforever.blogspot.com.br/
    e
    http://diversidades-deumaadolescente.blogspot.com.br/

    ResponderExcluir
  4. Muito legal o tuto.Vou tentar usa-lo
    lifeonalin.blogspot.com.br

    ResponderExcluir
  5. Adorei o post, e o teu blog ta muuito perfeito *-*
    www.espacegirl.blogspot.com

    ResponderExcluir
  6. O novo lay está lindo! Amei o tuto e talvez use no meu próximo lay!

    Beijos,

    http://garotaslindasemodernas.blogspot.com.br/

    ResponderExcluir
  7. Eu uso esse tutorial. É bem útil, e como você falou não passa de um truque. O efeito é demais >.<

    http://world-cutest.blogspot.com.br/

    ResponderExcluir
  8. Amei o tutorial realmente o cabeçalho esta lindo.

    http://fantasyteens1.blogspot.com.br/

    ResponderExcluir
  9. Passando para uma visitinha, amei seu post, parabéns seu blog é muito fofo, bjs.

    www.girlsteensgn.blogspot.com.br

    entre, conheça e SIGAAA, TE ESPERO AKI, BJS.

    ResponderExcluir
  10. Muito bom o tutorial!
    http://garotavertigem.blogspot.com.br/

    ResponderExcluir
  11. Oi flor, adorei o tutorial, ficou lindo seu cabeçalho com a faixa preta

    www.i--love--y.blogspot.com

    XOXO, Beijinhoos

    ResponderExcluir
  12. Adorei, fica lindo, né? :)

    Beijos,
    Sabrina Machado! ♥
    http://www.blogmundodamoda.com/

    ResponderExcluir
  13. Eu uso um efeito tipo esse no meu cabeçalho, fica tão munitim :33

    thefashionwonderland.blogspot.com

    ResponderExcluir
  14. Nossa, fácil assim? hahaha. Amei o tutorial, com certeza vou usar em algum lay!
    Beijinhos :*

    www.PiinkCookie.blogspot.com

    ResponderExcluir
  15. Amei o tutorial, fica lindo demais *--*
    http://themudancas.tk/

    ResponderExcluir
  16. Isto é muito legal, não uso, mais este estilo esta nas minhas visões de Layouts futuros.
    Tem post novo!
    http://construtordepensamentos.blogspot.com.br

    ResponderExcluir
  17. Bem legal esse tutorial!!Fica super lindo no blog e nem é tão dificil de fazer
    Bjim
    http://blog-moderninho.blogspot.com.br/

    ResponderExcluir
  18. adorei :)
    seguindo jà o teu blog !!!!!!
    Participa do sorteio là no meu blog, è internacional:)
    http://muitomaisquemoda.blogspot.it/2012/07/beauty-farmait-giveaway-sorteio-2.html
    bjs
    http://muitomaisquemoda.blogspot.it

    ResponderExcluir
  19. Oi, adorei o seu blog ja estou seguindo!!!
    kitkatbis.blogspot.com

    ResponderExcluir
  20. Nossa como procurei,tentando achar como conseguiu fazer isso,pensei que seria bem mais difícil.

    Beijos

    blogdagi1.blogspot.com

    ResponderExcluir
  21. Precisava deste tuto.Doorei *-* rs
    Bom estou de volta com o blog ,depois de muito tempo fora.Se puder dar uma olhadinha lá ^^ Beijos
    http://pepper-of-rock.blogspot.com.br/

    ResponderExcluir
  22. Woww!! Super tuto!
    Cada detalhe faz a diferença né? E com a faixinha o blog fica tão mimosoooo rs adoro!

    bjãoo

    ResponderExcluir
  23. Guria, que blog mais lindo, parece um doce, dá até vontade de morder.
    Sou seguidora já e obrigada pela visita lá no Blog do Balaio.

    Vanessa - Balaio

    ResponderExcluir
  24. Adoro esse tutorial, fica lindo o blog!
    Dá um charme na minha opinião!
    O blog tá lindão hein fiaa? Ta podendo hein? Haha

    www.ingridsakamotodossantos.tk
    Obrigada pela sua visita, ela é muito importante pra mim viu? Volte sempre amore♥ Se puder na próxima vez que você for visitar o blog, você pode clicar no banner da Cappuccine Store? É só você clicar e sair! É Menos de 1 minuto! Fico grata se fazer isso!

    ResponderExcluir
  25. Muito legal essa dica, qualquer dia vou ver se faço isso hahaahahah
    @awnste
    http://www.senhoritaliberdade.com/

    ResponderExcluir
  26. Muito legal vc ter ensinada a fazer um igual ao seu!!!
    Ficou mesmo mto lindooo!!!
    bjooookas,Aniinha

    do-ladodeca.blogspot.com

    ResponderExcluir
  27. Muito legal fica super fofo!

    Beijos,
    Camila Angelina
    http://cantinhodacaps.blogspot.com.br (agora com TEMPLATE ANIMADO)

    ResponderExcluir
  28. ótimo tutorial ^^
    http://blogcantinhodameninacrista.blogspot.com/

    ResponderExcluir
  29. Valeu pela tuto, é provável que eu use no próximo lay do meu blog. A proposito o blog está lindo ♥.
    Beijão

    http://blogdaingridzinha.blogspot.com.br

    ResponderExcluir
  30. gostei! talvez use no próximo layout! Beijos♥
    http://mundo-dosadolescentes.blogspot.com.br/

    ResponderExcluir
  31. Esse efeito é ótimo e da uma boa diferenciada no cabeçalho. E como você falou, não passa de um truque de html. Ótimo! Um beijo.
    onthefame.blogspot.com
    the-zombie-attack.blogspot.com

    ResponderExcluir
  32. ai amei ^^
    creio que vou usar no meu próximo layout ;*
    s2hay.blogspot.com

    ResponderExcluir
  33. Oi,você pode não se lembrar,
    Mais sou sua afiliada...
    (trechy-rock.blogspot.com)
    Mudei o nome e a URL do blog,
    Você pode me ajudar visitando ele,
    Se não estiver seguindo seguir e
    Mudar na sua elite/página/etc o
    Nome para:Charm Cherry (CH-sigla)
    E URL para:
    www.charm-cherry.blogspot.com
    Beijos e obrigada!

    ResponderExcluir
  34. O tutorial é ótimo! Muito bom mesmo, muita gente não sabe como fazer. O meu cabeçalho já está com esse menu dentro :)

    Bem, seu blog é lindo demais e você já deve saber disso né haha. Enfim, estou seguindo aqui e te espero em meu blog. Ele é novo e por isso, preciso da sua visita lá <3

    Beijos,
    Anna
    http://garota-queen.blogspot.com.br/

    ResponderExcluir
  35. Amei ><
    Visita meu bloguito, http://makemaniaecia.blogspot.com.br/ amei o seu e espero que você goste do meu :)

    Beijos e Sucesso !

    ResponderExcluir
  36. Que legal o tuto! Estava procurando, esse menu é lindo e diferente né?

    Beijos, obrigada pela visita!
    http://www.deliriosdegarota.com/

    ResponderExcluir
  37. que legal amei fica super lindo ne flor?

    http://priscilalirow.blogspot.com.br/

    ResponderExcluir
  38. Lindoo'
    Adoreei'

    seguindo'

    samarakerle.blogspot.com.br

    ResponderExcluir
  39. Lindoo'
    Adoreei'

    seguindo'

    samarakerle.blogspot.com.br

    ResponderExcluir
  40. Eba adorei a dica *-*
    to te seguindo flor
    http://lacodecabelo.blogspot.com.br/

    ResponderExcluir
  41. Ficou bem legal o seu,lindoo!


    Hayanne Deise Lins
    http://www.hdlhayah.blogspot.com

    ResponderExcluir
  42. Que ótimo esse tutoo!
    Ei,aceita fazer um sorteio de férias em parceria comigo?
    Se sim,comenta avisando no blog e me passa seu e-mail,depois me add no msn:
    jiji.br@hotmail.com
    beijos...
    www.charm-cherry.blogspot.com

    ResponderExcluir
  43. Eu adoro este tutorial, pois foi com ele que conseguir fazer o meu menu, que achei muito cute. Ele facilita muitas coisas, deixa o cabeçalho mais cheinho, e ainda deixa o blog bastante fofo.
    Uso ele e usarei sempre. (shushua)

    http://pnl-charmosa.blogspot.com.br/

    ResponderExcluir
  44. Adorei o tutorial floor ^^ O seu resultado ficou lindooo *-*

    http://souzadiinha.blogspot.com.br
    Beijoos <3

    ResponderExcluir
  45. Gostei do tutorial é bem fácil e fica muito bonito :)

    http://modicesdemenina.blogspot.com.br

    ResponderExcluir
  46. Oi flor, como eu já tinha postado no comentário você ganhou a brincadeira que estava acontecendo lá no Muro das Maravilhas, e ganhou 1 semana de divulgação, seu banner já está na barra lateral

    www.i--love--y.blogspot.com

    XOXO, Beijinhoos

    ResponderExcluir
  47. Adorei o tutorial. Eu já usei no meu antigo blog e é muito bonito o cabeçalho com faixa.
    http://startdreamy.net.tc

    ResponderExcluir
  48. ótimo tutorial

    http://gloss---blog.blogspot.com.br/

    ResponderExcluir
  49. Amei *uu*
    Seguindo !
    Bezos >.<
    OH! Amei o Lyaout >.<
    http://smileretro.blogspot.com.br/

    ResponderExcluir
  50. Não, naum, não.. estva louca procurando esse tutorial e acho no meu blog favorito. Obrigada Plum vocÊ sempre me salvando.
    #Besitos------------->http://mikaeetc.blogspot.com

    ResponderExcluir
  51. Sempre quis saber também esse tuto , no meu próximo layout eu vou tentar , (:
    ~
    Beijos ;*
    http://blogthelifeofgirls.blogspot.com.br/

    ResponderExcluir
  52. Adorei as dicas, vou ver se faço um pra mim. :) Belo tutorial =)

    Beijos; @Raah_Castroo
    www.vidaadegarotaa-vdg.blogspot.com.br

    ResponderExcluir
  53. Gostei demais do tutorial, eu acho que no próximo design do meu blog eu uso.
    Eu já te linkei!
    http://ladyalen.blogspot.com

    ResponderExcluir
  54. Idolatro você por ter postado esse tutorial hahaha :D
    http://brendacurty.blogspot.com.br/2012/07/youtube-unhas.html

    ResponderExcluir
  55. eu uso, esse tutorial lá no blog ;P

    http://doonadaa.blogspot.com.br/

    ResponderExcluir
  56. oii!!
    faz um tutorial de como vc conseguiu deixar a imagem do topo da largura da pag.
    Por favor, pq eu nao estou conseguindo deixa-la assim.

    ResponderExcluir

Todos os comentários serão respondidos. Obrigada e volte sempre! ✌ ♥