1 de jul de 2012

Big Tutorial: Como fazer um cabeçalho para seu blog



Bom, à pedido da Rarissa Mayara, estou aqui pra ensinar vocês à fazerem um cabeçalho de blog! É muuuuito simples, você não precisa de Photoshop, apesar que nele fica bem mais bonito, mais você precisa só do Photoscape, se você não tiver, baixe- o aqui. Então, vamos começar.


Primeiramente, baixe essa imagem. Obs: Não vai dá pra ver porque ela é transparente, mais é só clicar nela com o botão direito do mouse:



Agora abra o Photoscape e abra a Imagem Transparente que você salvou. Ela vai aparecer branca, mais é assim mesmo. Agora você vai cortar um pedaço dessa imagem, veja um exemplo:


         Depois que você cortá- la, o resultado vai ser esse:


                        Agora você vai escrever o nome do seu blog, isso usando a ferramenta Texto: 


Veja um exemplo:


Nesse exemplo usei a fonte Adine Kirnberg Scipt, com um rosinha claro. Usei um contorno marrom, pra destacar. Fontes que eu indico:

                                                                        Adorable
                                                                       Amaze Bold
                                                                     Ballpark Weiner
                                                                   RNS Baruta Black
                                                                  Bellerose Light: 1.0
                                                                     Blessed Day
                                                                     BrockScript
                                                                    Candy Stripe

                Depois que escreveu o nome do seu blog, vá em Objeto e vá em Modo caixa arredondada:

    Escolha a cor que você quiser, deixe no modo pontilhado, sem contorno, a espessura é 3 e o redondo é 12, eu usei a mesma cor da fonte, ou seja, rosa. Resultado:


Agora vamos personalizar o cabeçalho com brushes. Vá em Objeto, Fotografia (montanha com sol), Foto...  e escolha o brushe que você quiser. Exemplos:







































Aqui como ficou:




Se tiver sobrado algum espaço em branco, corte- o. Veja um exemplo:



Seu cabeçalho está pronto. Veja meu resultado:



                                                                      Colocar no Blog 


Vá no seu blog, layout, onde está escrito "Nome do seu blog(Cabeçalho), vá em Editar, se o seu blog já tiver imagem vá em Remover imagem, se não tiver pule pra próxima etapa. Marque a opção Em vez de título e descrição e vá em Escolher arquivo. Procure sua imagem, clique nela e em abrir. Espere carregar, vá em Salvar. Ai a janelhinha vai fechar e você vai em Salvar alterações.

                                                                 Centralizar o cabeçalho

Vá em Modelo, Editar HTML, Prosseguir, clique em Expandir modelos de widgets. Agora dê um CTRL + V e procure pelo código:

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

Antes do ínicio desse código cole <center> e no final coloque </center>. O código completo vai ficar assim:

<center><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/></center>

Visualize e se tudo tiver certo, salve- o!! Ufaa! Pronto, o tutorial acabou! Grande, mais vale a pena!! Gente, se repassar credite! Beijinhos e abraços!



94 comentários:

  1. Muitissimoo obrigadoo..! vc me ajudou e muito e muito querida *-*

    ResponderExcluir
    Respostas
    1. Que ótimo que eu te ajude, pois essa é umas das minhas metas no blog! Se quiser fazer mais alguma sugestão de post ou se tiver alguma dúvida em algo, é só mandar o comentário, se eu não tiver ocupada, eu atendo seu pedido! Obrigada pela atenção com o blog e volte sempre!

      Excluir
  2. Alem de ajuda ela você me ajudo mastante tambem, agradeso a Raissa por perdi esse Tutorial e você Gabriela por esinar, Brigadinho até a proxima!!!

    *-*

    ResponderExcluir
  3. Aki saber guando abre a sua pagina do blogger e aparece um (docinho) de vez de um "(B) de Blogger" Como vc vaz ?

    ResponderExcluir
    Respostas
    1. Olha nesse link : http://depoimentoseperfis-prontos.blogspot.com.br/2012/03/favicons.html

      Excluir
  4. Ooooi você poderia postar mais brushes com o tema de profº ? Na próxima postagem?

    ResponderExcluir
    Respostas
    1. Posto sim flor, se for pra te ajudar, é claro q eu posto '--'

      Excluir
  5. Gabi meu blog vai falar sobre fotografia. Você pode mandar uma imagem tipo desenho de uma menina segurando uma câmera?
    obg

    ResponderExcluir
    Respostas
    1. Se você for a ganhadora, mando sim florzinha!!

      Excluir
  6. MUITO OBRIGADA! Eu não sabia onde achar o fundo transparente e como centralizar o cabeçalho...

    Beijinhos,

    http://garotas-cupcakes.blogspot.com

    ResponderExcluir
  7. tem como eu fazer um cabeçario para blog pela net sem prescesar baichar nada?

    ResponderExcluir
    Respostas
    1. Não, só com Photoscape, photoshop, photofiltre e etc, e todos são baixados

      Excluir
  8. eu fis do jeitinho que estava ai mas quando coloquei no blog ficou pequeno min ajude gabii

    ResponderExcluir
    Respostas
    1. Tenta de novo flor!! O tamanho do seu blog tá diferente

      Excluir
  9. Oiiii, tentei escrever um comm mas deu erro. blz...vou digitar de novo:
    Obrigadérrima pelo tuto!!! Fácil e rápido, cabeçalho pronto no meu blog graças as suas explicações. Crédito de imagens devidamente dados. Amei o blog, lógico!!! To seguindo!!!
    Bjkas

    ResponderExcluir
  10. Oiiii, amei o tuto. Cabeçalho pronto no meu blog com seus bruches!!! Finalmente consegui fazer, graças as suas explicações!!! Obrigadérrima. Super indico!!! Tô seguindo.
    Bjkas

    ResponderExcluir
  11. Oii, adorei! Você pooderia dizer onde baixa essas imagens de desenho??? é um programa?

    ResponderExcluir
  12. Muito obrigada por tua excelente explicação. Muito útil !

    ResponderExcluir
  13. a imagem transparente q vc postou é mt pequena pra fazer o layout!

    ResponderExcluir
    Respostas
    1. Oi Manu. Fooi por isso que pedi pra cortá-la, porque depois do corte ela fica mais comprida e você pode achar outras imagens transparentes no google

      Excluir
  14. Visitem meu blog novo por favor :)
    http://alissoncrazy.blogspot.com.br/

    ResponderExcluir
  15. Nossa, agr sim achei algo que me mostrou que não é necessário um monte de coisa no cabeçalho. Mto obrigado msm, salvou minha pele. Bjos!!

    ResponderExcluir
  16. Respostas
    1. Tem vários sites, como o baixaki, se você procurar no Google você vai achar muitos. Beijo Duda

      Excluir
  17. Por favor me falar que site que voce pegou essas imagens ? Obrigada !

    ResponderExcluir
    Respostas
    1. Oi Pamela. Olha, essas imagens estavam salvas no meu pc, eu não lembro de onde salvei, mais no Google você pode procurar Brushes para photoscape você vai achar muitas. Beijo flor!

      Excluir
  18. aah nossa adorei,acabei de baixar meu photoscape e achei super bacana suas dicas,usei uma imagem cupcake sua!
    bejos

    ResponderExcluir
    Respostas
    1. Oi Marcela, que bom que você gostou! Hihi, beijoooos!

      Excluir
  19. Oi eu fiz tudo direitinho, mas quando fui colocar o cabeçalho no meu blog o fundo ficou branco! Como faço pro fundo ficar transparente?

    ResponderExcluir
    Respostas
    1. Você não deve ter marcado a opção: Marque a opção Em vez de título e descrição ou você errou em algo lá encima, então você tem que tentar fazer tudo denovo

      Excluir
  20. adorei, me ajudou muito, mas como eu coloco esse mause? (laços, nomes, ect...)

    ResponderExcluir
    Respostas
    1. http://depoimentoseperfis-prontos.blogspot.com.br/2012/06/cursores-fofinhos

      Excluir
  21. Obrigado me ajudou muito mas eu não consegui baixar o Photoscape você poderia me ajudar?

    ResponderExcluir
    Respostas
    1. Oi Mirelle, você pode tentar baixar no baixaki, porque foi lá que eu baixei. Beijos.

      Excluir
  22. Olá Gabi , eu preciso da sua ajuda com duas coisas , a primeira é o Menu , eu fiz um menu pro blog , mais não consigo postar em determinada página , por exemplo , Contato , eu não consigo postar dentro dessa página intende ? , e a outra coisa eh o seu 'cabeçalho' , como você faz para fazer esse cabeçalho que muda de fotos ? já procurei em muitos lugares mais não achei , agora que eu encontrei no seu , eu queria saber se você pode me ajudar (: , beijos e espero que você me responda !

    ResponderExcluir
    Respostas
    1. Oi Maely. Primeiramente, obrigado pela visita. Então, o seu Menu deve estar com algum problema ou erro, tenta colocar ele no seu blog de novo, se não der, ele deve estar com algum problema no html, então você vai ter que fazer outro menu. O meu cabeçalho, na verdade, não é um cabeçalho, é um slide, e eu não postei o tutorial ainda, mais em breve postarei. Beijos!

      Excluir
  23. Gaabi , não deu muito certo :S
    A imagem ficou com o fundo branco :(

    ResponderExcluir
  24. Oii, to voltando aqui hehe. Você podia dar um jeito de me ensinar a mexer no Photoscape? Eu consegui baixar só que não sei mexer de jeito nenhum '-'

    ResponderExcluir
  25. Gabitcha , amr aceita parceria ? x)
    Adiciona o MSN .. A gente se fala por lá :3
    ideiascomblog@hotmail.com

    ResponderExcluir
    Respostas
    1. Oi Mandy. Me adiciona lá: gabi.carol11@hotmail.com

      Excluir
  26. brigadaaa eu sempre amei seu blog e continuo amando! é muito fofo e me ajuda muito

    ResponderExcluir
  27. Oi mt obg me ajudou mt mas eu queria um tutorial de como colocar um fundo no blog (onde no seu é cinza com uns pontinhos pretos) poderia me ajudar?

    ResponderExcluir
    Respostas
    1. Oi Anôny, aqui você vai achar como colocar: http://depoimentoseperfis-prontos.blogspot.com/2012/07/big-tutorial-como-criar-um-layout. Espero que ajude, beijos.

      Excluir
  28. Oii..esse Centralizar o cabeçalho é pra deixar com o fundo igual do blog ? beijoos

    ResponderExcluir
    Respostas
    1. Oi Anôny, centralizar o cabeçalho é deixar o cabeçalho no centro do blog, porque se a gente não centralizar ele, ele vai ficar muito puxado para o lado esquerdo, e fica feio. Espero ter ajudado, beeeeejinhos!!

      Excluir
  29. Apesar de saber fazer
    e só passar por aqui
    para ver se tinha algo
    que eu nao sabia, eu
    gostei do seu tutorial.
    Eu estou querendo
    mudar a capa do
    meu blog entao estou
    procurando a maior
    quantidade de informçao
    possivel para ficar linda.
    Como goste do jeito que
    voce escrever vou dar uma
    olhada pelo resto do blog.
    Ah alias seu blog é bem
    Kawaii!

    Bjks

    http://umaborboletalaranja.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oi Gnoma, que bom que você gostou hehe! Aqui no blog você vai achar bastante coisa e eu irei estar renovando cada vez mais os tutoriais. Ain, amg, adoro coisas kawaii :D. Beijos!

      Excluir
  30. Oooi , Gabi .. Tem como vse fazer um desse maais com o nome " ChocoLatyh " Pfr ' XAU BEZOOS

    ResponderExcluir
    Respostas
    1. Oi Amanda, não faço cabeçalhos e nem layouts para outros blogs. Só você seguir o tutorial e fazer o seu, melhor né? Beijos!

      Excluir
  31. Ooolá Gabiih s2 ' Beem ... Eu baixei a fonte mais como eu procuro a fonte no Photoscape me ajuda ou faz um post baixando uma fonte pra mim ajudar pfr ' Responde Pfr aee ;*

    ResponderExcluir
    Respostas
    1. Oi Amanda, você vai em Iniciar > Painel de controle > Fontes e ai é só você arrastar sua fonte pra a pasta Fontes. Depois, ela vai está lá no seu PhotoScape e ai é só usar e você também tem que ter o WinRar baixado! Beijos, espero ter ajudado!

      Excluir
  32. Oi

    aonde vc acha as imagens pra colocar no cabeçalho ? tipo como vc escreve no google pra procurar ?

    ResponderExcluir
    Respostas
    1. Oi Larissa, eu procuro "Brushes para cabeçalho" ai aparece bastante. Beijos e espero ter ajudado!

      Excluir
  33. Eu amei seu blog e eu também tenho um http://seguindo-a-moda.blogspot.com.br/

    ResponderExcluir
  34. Nossa obrigada mesmo pelo tutorial,eu estava precisando muitooo!!

    Minhas-confissoes-2012.blogspot.com

    ResponderExcluir
  35. Aonde fica o "Prosseguir", que eu não achei!

    ResponderExcluir
  36. Nossa, você não sabe o quanto me ajudou, eu tava super precisando mais não tinha ideia de como fazia. Muito obrigada! (:
    http://coloorindo.blogspot.com.br/

    ResponderExcluir
  37. vc me ajudou muito, vlw. Muito obrigado ;) bjs

    http://marianamundoco.wordpress.com/

    ResponderExcluir
  38. Obrigada! Seu tutorial foi perfeito! Adorei!

    ResponderExcluir
  39. Oi Gabi no meu PhotoScape a imagem apareceu preta oque eu fiz de errado para ela sair assim? E dá para fazer assim o cabeçalho ou ñ?

    ResponderExcluir
  40. oIE GABI!!! Desculpa o encomodo mas como você fez esse layout? pode fazer um mega tutorial ensinando a fazer um layout próprio e bonito assim? as bordas, o chat todas aquelas coisas, a barra de rolagem os comentários td td td td td td responde no meu blogunhuu?? http://coisasdegarotasbloggg.blogspot.com.br/

    ResponderExcluir
  41. Oie gabi estou com uma duvida se poder responder envie uma mensagem a esse email : bebedouro_@hotmail.com . bom minha duvida é o seguinte eu ja abaixei a fonte que vc fez no passo a passo a que vc usou para fazer o tutorial amei! mas quando eu pinto a letra não consigo cortonar de marron ou de otra cor! queria saber fazer igual vc fez . Obs: se eu cortonar a letra ela sai a cor . Mi ajuda *-* ? envia ao email.... a resposta vlw Bjss

    ResponderExcluir
  42. Coloquei esse tutorial no meu blog e dei creditos a vooc' retribua ?

    http://etudoparavoc.blogspot.com.br/

    ResponderExcluir
  43. Muito obrigada pela ajuda! Acabei de entrar no Blogger e está sendo meio difícil arrumar tudo, e centralizar o cabeçalho era o meu maior problema. Adorei o post, por sinal.
    http://nadaquenaoadora.blogspot.com.br/

    ResponderExcluir
  44. oim amei seu blog e muito legal me ajudou muito seguindo vai la ver http://anaclaragustavoejujuworldcone.blogspot.com.br/

    ResponderExcluir
  45. Oii Amore!!
    Quanto o cabeçalho for com fundo transparente,não vai importar o tamanho da imagem ou mesmo assim vai ter que cortar nas medidas que eu quero que fique no blog?!
    Beijinhos!
    http://glamour-jovem.blogspot.com.br/

    ResponderExcluir
  46. Muito obrigado, deu certo sim, adorei meu resultado ;)

    ResponderExcluir
  47. >< Sua matéria foi muito útil ! obrigada pela ajuda <3 !
    deixo aqui meu blog: http://coisas-de-mocinhas.blogspot.com.br/

    ResponderExcluir
  48. oiie liinda vc me ajudoou muiiito ><
    Obriigada :D
    Beiijoos

    ResponderExcluir
  49. Olá Gabiih ' ^_^ tudo bem ? intão acabei de conhecer seu bloog e ameeeeeeeeeeei tudo ' TUDO ' mesmo <3 ' boom queria ediir um tutoriaal , de como colocar os créditos para os blogs em quais nós pegamos os post's entendeu ? por exemplo:
    ''Com os créditos para o blog Menina Feliz'' ii ao clicar no nome do blog o leva adiretamente na página dele ...
    eu gostaria mesmo que vc me ajudasse ' afinal já está ajudando muito com seus post's ..
    Espero que me responda ^^ bjks ..

    ResponderExcluir
  50. Ooi Gabiih eu fiz tudo certinho mais estou com uma duvida, aonde fica o ''expandir modelos de Widget'' ? eu não estou conseguindo centralizar.

    ResponderExcluir
  51. Visitem Meninas... http://modaeglamour0.blogspot.com.br/

    ResponderExcluir
  52. demorei mais consegui, rs '
    obg me ajudou bastante <3

    ResponderExcluir
  53. Amei , valeu me ajudou muito <3
    parabéens , rs ' :p

    ResponderExcluir
  54. Caramba me ajudaram muito! Muito obrigada!

    ResponderExcluir
  55. oi,gostaria de saber como vc colocou esse background de bichinhos nos comentarios :)

    ResponderExcluir
  56. Eu amei, me ajudou muito, só não consegui centralizar o cabeçalho (sou baka very much pra arrumar HTML apesar de estar tudo mastigadinho aqui hehehe).
    Muito obrigada! *--*

    ResponderExcluir
  57. Boas dicas :)
    Visitem lá: http://marisecret1.blogspot.com.br/

    ResponderExcluir
  58. muito obrigada pela dica , mas eu gostaria de saber onde encontro brushs com o fundo transparente , pois com um cabeçalho sem ser na cor branca ficam estranhos .. obrigada bjsss

    ResponderExcluir
  59. Querida, obrigada! Vou baixar o photoscape daqui a pouco, mas amei a dica! é fácil msm! eu so nn conseguia fazer porque eu nn tinha os editores, eu até sei fazer uns bem bugadãum -_-
    Mas obg, eu vou fazer e pôr no meu blog :3

    ResponderExcluir
  60. Obrigadaaaa. Esse post me ajudou e muito :D Obrigada querida. +++++

    ResponderExcluir

Yoo cherry, espero ter gostado do post. Se quiser comentar, fique a vontade, mais antes siga estas regrinhas:

- Não aceito comentário "Seguindo, segue de volta?"
- Não fale palavrões.
- Criticas são bem vindas, desde de que sejam criticas objetivas.
- Deixe o seu blog, talvez eu queira vê-lo.
- Aceito tags e selinhos.

Espero que sigam as regras que são bem importantes.