6 de fev de 2012

Big Tutorial - Criando seu próprio layout

| |
Oi garotas
Lembram que num post passado tinha uma enquete sobre o que vocês queriam ver num próximo post? Então, a maioria dos votos foram no Big Tutorial, então aqui está. Esse post vai ser beeem grande, se preparem haha.
PS: Quem votou em alguma das outras duas opções, não fique triste, mais pra frente posto elas também, ok?

Vou ensinar vocês a personalizar seu próprio layout, começando do modelo básico do blogger.

Clique em "Ler mais" para ver o tutorial.



Recomendo que crie um blog de teste para fazer esse tutorial, ou faça backup do seu modelo atual. Pra evitar problemas, é sempre bom né?
+ Clique nas imagens para vê-las em tamanho maior.

01. Vá em Modelo - Personalizar - Modelos e escolha o ultimo (Viagem) azul e branco, como mostra abaixo:

02. Escolha um background e salve em seu computador. Eu separei alguns para vocês: 01 | 02 | 03 | 04
Agora clique na flechinha logo ao lado de "Remover Imagem", e clique em Fazer Upload da Imagem - Escolher Arquivo, como mostra abaixo:
03. Vá para Layout e escolha esse (o resto do tutorial vai ser em cima desse modelo):
04. Em Ajustar Larguras escolha 1030, 270 e 240, como na figura:

05. Clique em Aplicar ao Blog e vá para Avançado - Texto da Página:
Escolha uma das seguintes fontes: Arial, PT Sans Narrow , Neucha , Josefin Sans ou Calibri. Deixe num tamanho legível. As cores: preto ou cinza.

06. Em Planos de Fundo deixe os dois transparentes:
07. Em Título do Blog deixe tamanho 0px e a cor transparente:
08. Em Cabeçalho da Data coloque a mesma fonte que usou no Texto da Página, e escolha uma cor de sua preferencia.

09. Em Plano de Fundo da Postagem coloque branco.

10. Em Título da Postagem escolha a fonte que preferir:
Recomendo: Calligraffitti, Coming Soon, Corsiva, Covered By Your Grace, Crafty Girls, Homemade Apple, Indie Flower, Just Another Hand, Lobster, Rock Salt, Schoolbell, Sue Ellen Francisco, Sunshiney, Unkempt, Walter Turncoat. 
Coloque num tamanho um pouco maior e uma cor de sua preferencia (não muito clarinha para não ficar ruim de ler).

11. Em Texto do Gadget coloque a mesma fonte que usou para o Texto da Página.

12. Em Plano de Fundo da Barra Lateral coloque a Cor da Moldura transparente. A Cor do Plano de Fundo pode deixar como estiver, vamos mudar mais pra frente.
13. Clique em Aplicar ao Blog e Voltar Para o Blogger. Agora vá em Editar HTML.

14. Vamos tirar o espaço entre as postagens e a sidebar. Para isso, usando o Ctrl+F procure pelo seguinte:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
Quando encontrar, apague apenas as partes destacadas em azul na imagem abaixo:
Visualize: se as 3 barras estiverem juntinhas, salve.

15. Agora, para tirar aquela imagem horrível de "papel" por trás do blog, localize:
content-outer .content-cap-top {
Então apague as partes destacadas em azul:
Visualize: se esse negócio horrível tiver saído, salve.

16. Agora vamos arredondar os cantos do rodapé. Procure por:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
Logo abaixo disso cole o seguinte:
-webkit-border-bottom-right-radius: 20px;-moz-border-radius-bottomright: 20px;border-bottom-right-radius: 20px;
Então procure por:
 .main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
E logo abaixo cole:
-webkit-border-bottom-left-radius: 20px;-moz-border-radius-bottomleft: 20px;border-bottom-left-radius: 20px;
Visualize, se os cantos do rodapé estiverem arredondados, salve.
17. Agora vamos escolher uma cor para cada uma das barras laterais. Usando o CTRL+F, procure por:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
Logo abaixo cole o seguinte, e com a ajuda dessa tabela faça as mudanças:
background: #C0FF3E/*Cor da barra lateral direita*/
Visualize, se estiver tudo certo, salve e procure pelo seguinte: 
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
Logo abaixo cole o seguinte, fazendo as devidas substituições:
background: #006400; /*Cor da barra lateral esquerda*/

18. Para mudar as cores dos links do seu blog, use esse tutorial.

19. Vamos personalizar o título das postagens?
Em Editar HTML procure por:
h3.post-title {
Logo abaixo cole o seguinte:
text-align: center;  
Visualize, se o título estiver centralizado, salve. Agora use esse tutorial para tirar o sublinhado, personalizar as cores e colocar efeito fade.

20. Agora vamos colocar um cabeçalho. Separei algumas bases pra vocês (se usarem, lembrem de dar os devidos créditos à criadora): 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09
Abra a imagem, edite colocando o nome do seu blog e salve. Para coloca-lo no lugar vá em Layout e abra o gadget do cabeçalho. Carregue a imagem, e selecione "Por trás do título e descrição" e desmarque a opção "Reduzir para ajustar", como mostra abaixo:

21. Agora você precisa juntar o cabeçalho com o resto layout. Então faça o seguinte:
Em Editar HTML, localize:
.main-inner .column-center-outer {
Logo abaixo cole:
margin-top: -40px;
Vá alterando o número até juntar direitinho e salve.
Agora procure por:
.main-inner .column-center-inner { 
Logo abaixo cole:
margin-top: -40px;
Altere o número até que as postagens fiquem na posição certa. Salve.
22. Seu layout já esta bem bonitinho, você só precisa fazer algumas personalizações pra deixar ele com a sua cara. Para isso, use esses tutoriais:
Barra de rolagem | Seleção colorida | Blockquote personalizado | Comentários personalizados | Como colocar divisória entre os posts | Caixa de pesquisa personalizada | Favcon personalizado | Negrito, itálico e sublinhado personalizados | Caixa de afiliados | Tags, autor e comentários abaixo do Título  | Borda entre a sidebar e a barra de postagens Todas as imagens com cantos arredondados 

23. Agora que seu layout já esta prontinho, que tal colocar os créditos à esse tutorial em algum lugar dele? Muito obrigada a quem fizer isso (:
Bom, é isso por hoje. Espero que tenham conseguido fazer um layout bem legal. E qualquer dúvida não pensem duas vezes antes de me perguntar, vou fazer o máximo pra ajudar, ok?
Eu queria agradecer ao blog Go Imagine porque foi lá que aprendi o comecinho desse tutorial. (:

38 comentários:

  1. Ola Carol!
    Eu vim apenas para informar que você ganhou o concurso Two is better than One em 2º lugar!
    Eu e a Gabi do blog Thing I Love, já colocamos seu blog em destaque!
    Não esqueça de pegar seu selinho lá no meu blog.

    Beijos, Mallü.
    http://thelovekingdom.blogspot.com

    ResponderExcluir
  2. Adoreeei! Super legal este tuto.

    http://blog-dreamygirl.blogspot.com
    http://spice--girls.blogspot.com
    @paulafonseeca

    ResponderExcluir
  3. te enviei um novo e-mail. entendo que não tem tempo agora. tudo bem!

    http://blog-dreamygirl.blogspot.com
    http://spice--girls.blogspot.com
    @paulafonseeca

    ResponderExcluir
  4. Parabéns flor!
    Vai ajudar muitas meninas (sabe que eu não sei mecher no designer de modelo? kkkk, só sei direto no html)

    bjãoo

    ResponderExcluir
  5. Oieeee , ameeei demais tava querendo mesmo fazer uma grande reforma no meu bbe' , mas vocÊ sabe me dizer se eu fizer em cima daquele modelo viagem vaaai mudar muita coisaaa ??
    Kisses :****

    ResponderExcluir
  6. Que super tutorial, vai ajudar muita gente!! Posso te esperar no meu bloguinho também?

    http://tvfabulous.blogspot.com/

    Beijinhos

    ResponderExcluir
  7. Muito bom o post,parabéns pelas dicas!
    Te indiquei pra um meme lá no blog, mas responde só se quiser ok?
    bjssss

    ResponderExcluir
  8. Amei o tutorial, tinha votado nele para ajudar os iniciantes porque sei que muita gente ainda não sabe né... Tenho certeza que este tutorial vai ser útil pra bastante gente, eu usaria ele do começo ao fim se não soubesse fazer o meu, sem dúvidas.

    Beijo!
    http://meianoiteequinze.blogspot.com

    ResponderExcluir
  9. Bem grande, né? RIARIAIRIA
    "Se esse troço horrível tiver saído" euri -qqqqq
    Ótimo tutorial, é bom pra quem está começando agora. E para quem começou faz tempo mas não aprendeu nada ._.

    ResponderExcluir
  10. Oi Carol, estou começando a "blogar" agora, e é sempre bom deixar o nosso blog com a nossa cara. Vou tenar aprender sobre essas coisas, códigos e etc e personalizar o meu mais ainda.

    corredorfashionhair.blogspot.com

    ResponderExcluir
  11. Uool estava presizando de um BIIIG TUTO assim mesmo , afiinaal nñ é tão faciil neé ,
    maiis você espliica mt & mt boom .
    Beeijooos sz

    http://detudoumpouco04.blogspot.com/

    ResponderExcluir
  12. Olá! Carol. Nossa, que big tutorial incrivel, adorei, tem de tudo aqui. Parabéns, você explica muito bem. :)

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

    ResponderExcluir
  13. Amei o tutorial, layout não é um trabalho fácil.

    Tem recadinho lá no blog
    http://www.feminilidadesemlimites.blogspot.com

    beijos

    ResponderExcluir
  14. Uma palavra apara este post; PERFEITO!
    As dicas,todos os tutoriais reunidos num só é ótimo,prático e útil! Adorei, parabéns pelo bom trabalho!
    Vou fazer alguns ajustes no layout do TR quando eu mudar de cabeçalho,o visual do blog.
    bjs
    http://blogtrashrock.blogspot.com/

    ResponderExcluir
  15. Boooa! vai ajudar muita gente *-*


    http://www.byjessicarodrigues.com/

    beijos

    ResponderExcluir
  16. Oi Carol

    ótimo tuto :)

    no momento eu to usando o mínima, mas quando voltar para o travel vou tentar 'estudar' por aqui..rs

    ah, te indiquei a uma TAG,espero que goste

    bjs

    http://estilorosa.blogspot.com/2012/02/tag-qual-seu-hobby.html

    ResponderExcluir
  17. Adorei o post ,é um ótimo tutorial!
    http://sweetdreamssah.blogspot.com

    ResponderExcluir
  18. Nossa vc explica muito bem , muito legal !
    Seguindo segue ?

    http://www.pipocaatualizada.blogspot.com/

    ResponderExcluir
  19. ai adoooooorei, suuuper útei, e perfeito esse tuto. *O*
    Beijos Chiquissimas.tk

    ResponderExcluir
  20. Adorei, eu aprendi essas coisinhas mexendo muito e em tudo, sou xereta então já viu né! Mas vou repassar pra minha irmã mais nova, não tenho paciência pra explicar.

    Visita o meu? Adoraria te ver por lá, sigo de volta!

    http://modalternativasc.blogspot.com/

    ResponderExcluir
  21. Amei o tutorial flor, e o blog também ^^
    já estou te seguindo !
    beijos ...

    beatriizgomes.blogspot.com

    ResponderExcluir
  22. Realmente, era muito melhor...
    bjjos
    blogloucamistura.blogspot.com

    ResponderExcluir
  23. Daqui a alguns meses, ou dias, vou tentar começar a fazer o meu próprio lay pelo um blog teste. Como você que fez o meu layout, e simplesmente amei, tenho certeza que com esse tutorial vou conseguir fazer um. Muito obrigada, Carol. s2

    Beijooos,
    Cla :3

    nemsemprerealidade.blogspot.com

    ResponderExcluir
  24. Nossa eu amei o post, e tbm fiz mudanças no meu blog e adorei pois ficou a minha cara e exclusivo! rs

    http://anavidadeestilista.blogspot.com/

    Oi flor eu adorei aqui! Visite meu cantinho e se gostar me siga, sigo todos de volta! Tô te esperando la!

    ResponderExcluir
  25. Oiie

    Só tô passando pra avisar que as votações para o concurso "Duelo de Blogs 2012" já estão abertas!!! Passa lá conferir o post de aviso + espero q se dedique (:

    Saiba que é um prazer te ter como participante! Agora,boa pedir votos e tentar vencer esta disputa^^

    Beijoos :*

    www.blogmeianoite.com

    ResponderExcluir
  26. Que super...adorei e já salvei seu blog como favoritos!Estou te seguindo...se puder retribiu? Olha, tem duas promoções lá no meu blog...se gostar de alguma participe! Beijocas!
    http://palomaviricio.blogspot.com

    ResponderExcluir
  27. Ai que ótimo esse tutorial, facilita demais nossa vida e ainda deixa o layout mais bonitinho, gostei ;)

    beijoss

    www.carolmeili.wordpress.com

    ResponderExcluir
  28. Muito bom o tuto, mais eu já tenho uns códigos que gosto, meu layout... Mas bem explicado para pessoas iniciantes...
    virgulaassassina.blogspot.com

    ResponderExcluir
  29. Que legal o tutorail, adorei!

    Bjs :P,
    http://bnascimentooo.net.tc

    ResponderExcluir
  30. Obrigada por me seguir e visitar, adorei aqui e já sigo! tem selinho pra vc lá na minha barra lateral.

    http://anavidadeestilista.blogspot.com/

    ResponderExcluir
  31. Ai vou correndo criar um blog de teste, para vê se eu consigo (yn) haha

    Muito boa as dicas *-*


    http://quaseinvisivel.blogspot.com/

    ResponderExcluir
  32. Carol, você lê pensamentos ou algo do tipo?
    HUAHEUHAEUH sério, eu já meio que tenho o layout pronto, mas estava com muuuitas dúvidas sobre como colocar.
    Ainda não vou mudar porque estou sem tempo, mas favoritei o tutorial aqui e vou usar quando eu criar vergonha cara KKKKKK -n
    E pode deixar que coloco os créditos :)

    Ah, já votei em você lá no Meia Noite BR, ok.

    muggle-world.blogspot.com

    ResponderExcluir
  33. Amei o tutorial! Explica muito bem, consegui fazer tudo, so falta ter paciencia para editar os codigos....aushauhsuhs
    Beijos
    Ourlifesanddreams.blogspot.com

    ResponderExcluir
  34. De mais, Carol, eu usei esse tuto no meu blog. Ficou muito bacana. Eu pus os créditos pois você merece, afinal ficou ótimo! Adorei.
    http://mentesvelhas.blogspot.com/

    ResponderExcluir
  35. Oi Carol!
    Adorei o post, mas tive um problema: na hora de juntar o cabeçalho ao corpo da página as colunas ficavam flutuando de uma aparência muito estranha, então eu fui e adicionei o código:
    margin-top: -40px;
    logo abaixo dos códigos:
    .main-inner .fauxcolumn-right-outer {
    esse para a coluna da direita
    .main-inner .fauxcolumn-left-outer {
    esse para a coluna da esquerda.

    Obrigado pelo tutorial
    Abç

    P.S.: Pode excluir esse comentário se quiser!

    adraftbox.blogspot.com

    ResponderExcluir
  36. Oi Carol!
    to tendo um problema na hora de juntar o cabeçalho do blog com o resto do layout to fazendo tudo direitinho, mas mesmo assim estou tendo esse probelema

    ResponderExcluir
  37. Vaaaai ajudar muita gente :}
    Amei *-*
    http://donadopink.blogspot.com

    ResponderExcluir
  38. Ameiii vou testar no meu blog de teste e ver se aprendi direitinho

    Quando Não Amanhecer(para visitar é só clicar no meu nome)

    ResponderExcluir

Comente a vontade, mas lembre de deixar o link do seu blog para que eu possa retribuir. E nunca, nunca mesmo, faça "copia e cola" por aqui.
Comente aqui somente sobre o post, pra qualquer outro assunto use a página de contatos (:

Bjj
Carol