Big Tuturial: Criando um layout cute




Hey you :3, resolvi fazer um tutorial para você fazer um blog. Foi a pedido, então esta aqui, qualquer duvida é só perguntar nos comentarios que assim que eu ver, eu respondo ! Vamos lá ??





 Vá em modelo > Personalizar

~
Escolha o modelo travel branco

~

Em texto da pagina, você escolhe a cor que você quiser para ficar no blog, é melhor preto ou branco se o fundo da sua postagem for preta, ou outra cor escura.

~

Vá em plano de fundo e em plano de fundo principal deixe transparente

~

Nos links é você que escolhe ..

~

No titulo do blog, coloque mude o tamanho para 0 e a cor transparente,


Escolha a cor do fundo da postagem branca, ou se você quiser outra cor, mas eu escolhi branco para ficar bonitinho o que estou fazendo.

~

Vá em plando de fundo da barra lateral, mude a cor do plano de fundo para a que preferir, eu coloquei cinza para diferenciar, e a cor da moldura coloque transparente. Depois disso clique em aplicar ao blog e depois em "Voltar para o blogger".



- Note que ficou essa coisinha ai no fundo que é muito feia



Vamos tirar ?
Clique em Editar html > prosseguir


Dê ctrl + f , e na barrinha cole: content-outer .content-cap-top {
Apague a parte que está em vermelha, e depois clique em visualizar para ver se a barrinha ja sumiu. Se saiu aquela coisa feia, salve, mas se não veja o que esta errado. /Desculpe, pois não dá para copiar no meu blog, então escreva no blog de notas, ou na barrinha de pesquisa do google, veja se está certo, pois se pesquisar errado ele não aparece, e copie todo pois tem outro codigo parecido no html.


Volte para o "Personalizar", vá em plano de fundo e coloque o qual você quiser, coloquei alguns para você baixar já que não tenho como vocês salvarem do blog.  
Download >>  Aqui


Agora o tamanho do blog, eu acho que fica feio a area da postagem pequena, mas você que escolhe. Aqui eu coloquei um tamanho legal para o blog. é só ir em Ajustar Larguras e mudar. Depois disso é só salvar.


Agora vamos deixar ele mais bonitinho, vai em Layout >> Navbar >> editar >> desativar ,
essa barrinha é a que fica em cima do blog, que não é nada bonita, fica mais legal desativada, clique em salvar e pronto.


Agora a parte mais importante do blog, o cabeçalho !  Ela é transparente, aqui vou deixar uma para vocês fazer download, com alguns brushes para colocar nela, e vou ensinar a fazer, o download da imagem transparente + brushes -> Aquii.  Vamos aprender a usar:

Abra o programa photoscape, se não tiver baixe, por que ele é o mais simples de usar. Quando abra o fundo transparente nele, eu fechei a parte lateral, mas não se assustem. Ela vai aparecer branca, mas está transparente, quando você achar brushes, só pode usar com fundo transparente, se o fundo for branco, ele vai aparecer branco, as que coloquei no download estão com o fundo transparente, então dá para você montar seu cabeçalho.


Na imagem abaixo, eu ja comecei usando minhas fontes que eu baixei, então nem adianta procurar no photoscape, que você não acha ! E o brushe que estou usando, coloquei no download que vocês fizeram. Para colocar esse brushe, clique na "paisagem" e clique em foto, vai abrir e você escolhe o brushe aonde você extraiu a pasta que deixei para download. E é só colocar aonde quer. Salve aonde você quiser, e coloque .png  no final para não ter erro que está transparente.

Para colocar o cabeçalho que você fez, vá em layout > cabeçalho > editar > e abra a imagem > marque a primeira opção, aonde tem que é atrás do titulo e descrição e pronto.


--- Vamos juntar o cabeçalho com as postagens ? Note que ficou um espaço entre elas. 
Vá em modelo > editar html > dê ctrl+f > digite /* Tabs  > apague margin: 1em 0 0; > dê ctrl+f > digite /* Main > depois de padding: $(content.padding) 0; , em uma linha antes de fechar a chave, cole margin-top: -20px; , se o cabeçalho desceu muito, vá diminuindo o numero, por exemplo, coloque -10px; .




,        Quer mais tutoriais ? peça nos comentarios ! Duvidas ? Me adicione no msn: beatrizmerling1998@hotmail.com , e vou dizer tudo o que precisa. Bjs e até a proxima.

12 comentários:

  1. como faço pra colocar cursor ??????

    ResponderExcluir
    Respostas
    1. Vou fazer uma postagem com o tutorial :)

      Excluir
  2. Oi florzinha ! tudo bem ?
    Vim aqui conhecer o seu blog e me escrever...suas dicas são super bacanas!
    Assim que o pessoal do suporte do facebook me desbloquear, vou lá curtir sua fa page :-) Aproveito pra te deixar um beijão e convida-la pra conhecer o meu cantinho tbem ! Você será muito bem vinda *_*

    Blog: www.mais-mulher.com

    ResponderExcluir
    Respostas
    1. Tudo sim ! Obrigada :D , amei o teu blog, PERFEITO ! :) vou visitar sempre, amei as dicas (:

      Excluir
  3. Querida Hinara, sem querer achei uma de minhas ilustrações por aqui, sem os créditos e ainda por cima um "by treze desejos" em cima da minha assinatura. Gostaria que você removesse minha imagem, ou desse os devidos créditos. Fico no aguardo da sua resolução. Atenciosamente, Juliana Rabelo.

    ResponderExcluir
    Respostas
    1. ãn ? isso: http://treze-desejos.blogspot.com.br/2012/10/desenho-juliana-rabelo.html ?

      Excluir
  4. Me ajudou muitooooo obrigada!!

    ResponderExcluir
  5. amei o post, ajuda muito. Quero fazer uma pergunta: que fonte vc usou pra fazer a legenda nas imagens? Seguindo ~
    Beijos
    themagicstreet.blogspot.com

    ResponderExcluir
  6. haha, obg. a fonte é: Kushtie Script :)

    ResponderExcluir
    Respostas
    1. sem querer exagerar da sua bondade, mas tipo, onde você baixou a fonte?
      missstudent.blogspot.com

      Excluir
    2. nem lembro kk , vou fazer um post com o download dela e mais algumas fontes :)

      Excluir

- Nada de xingamento
- Nada de ofensa
- Se pode pedir postagens? Claro que sim
- Pedidos para seguir o blog? Só deixar o link :)
- Make me happy !