Big tutorial: Criando um layout Sweet Rocker

18 de dez de 2011


Atualizado! Eu tinha esquecido de dizer como fazia pra subir os posts e a barra lateral, ou seja, juntar no cabeçalho. Mas ai esta, logo abaixo dos cabeçalhos! 
Como devem ter percebido pelo titulo (e pela foto) o que vim postar hoje é um BIG TUTORIAL, o primeiro de muitos espero. Decidi começar pelo layout sweet rocker que vem sendo bastante usado atualmente mas se o papai do céu quiser - e vocês também - postarei futuramente mais estilos: como o teen, vintage e kawaii. Espero que gostem desse BIG e que ele ajude vocês nos seus designers! 
Mas sem delongas vamos ao que interessa. Clique em "leia mais".

Vamos começar escolhendo o modelo. Vá em Design, design de modelo e em modelo vá na ultima categoria que é a Viagem, depois escolha o modelo Travel (azul com branco) Como mostra a imagem a baixo:



Agora vá na guia "Plano de fundo" vai aparecer a imagem que está de fundo e logo abaixo terá escrito "Remover Imagem" clique ali. Vai ficar um fundo colorido, certamente azul mas já vamos resolver isso.


 Logo em seguida clique na setinha com ponta pra baixo do lado da imagem que estava no fundo, ai vá na guia "Fazer upload da imagem" é a primeira que aparece. Ali em escolher arquivo você escolhe o background que quiser. Mas calma aê, antes vamos ver umas dicas?


Como o tema que estamos fazendo é o Sweet Rocker, recomendo backgrounds mais neutros, em tons de cinza que dão um ar mais rocker sem perder a delicadeza do sweet.  Que tal um desses abaixo?


Continuando... Vá agora na guia "Layout" e escolha esse aqui:


Depois disso vá em "Ajustar larguras" e deixe a primeira em 1020 e a segunda em 265. É importante deixar essas larguras que pedi, pois isso influenciará em outros passos.


Próximo passo: 


Vá para a opção avançado e vá em Texto da página, que é a fonte, a cor e o tamanho do texto das suas postagens. Se tiver duvidas de que fonte escolher leia esta postagem do TT:  Deixe as postagens organizadas.

Recomendo as seguintes cores pro texto:
(copie código por código e vá testando até achar a que mais gostar)

#969696 | #666666 | #000000

Em planos de fundo deixe as duas cores transparentes:


Pule a aba link e vá direto pra Titulo do blog e deixe a cor em transparente e o tamanho em 0px .
A intenção é o nome do blog não aparecer no cabeçalho, pois vamos por uma imagem no local mais tarde.


Agora vá em Titulo da postagem e escolha a fonte que mais gostar (Amém Anny!) a cor vamos deixar um rosa ou roxo pra quebrar o preto e o cinza do resto do layout, mas se você quiser mais rocker você deixa preto mesmo. Tente uma dessas cores:

#FF55AA | #BE7DFF | #FF379B

Vá em Plano de fundo da postagem e deixe branco:


Depois disso vá em Plano de fundo da barra lateral, que como o nome já diz é a cor do fundo da barra lateral (sidebar)


Deixe a cor da moldura transparente e na cor do plano de fundo coloque uma dessas cores:

#BE7DFF | #969696 | #C0C0C0

O resto eu não preciso mais aconselhar. Então você edita o que falta, no caso as cores dos links, texto e link dos gadgets etc. Mas use cores que combinem com as que você está usando. E não altere o que editamos até agora. Após isso salve.


Agora vamos personalizar o template pelo HTML.

Vamos começar retirando aquelas ondinhas feias que ficam no topo do template


Para isso vá em Design - Editar HTML, de Ctrl+F e pesquise por:

content-outer .content-cap-top {

Em seguida apague os trechos contornados de rosa na imagem abaixo: 
Visualize e se as ondinhas tiverem  saído (veja uma imagem exemplo de como fica sem as ondinhas aqui) Salve.

Agora vamos juntar a barra lateral (sidebar) com as postagens. Go?

Design - Editar HTML > Pressione as teclas Ctrl + F e procure por :

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Quando encontrar apague os trechos contornados na imagem abaixo:
Visualize, e veja se a barra lateral juntou com as postagens. Se sim, salve. Já ta começando a ficar bonitinho né? :p 


Centralizar o titulo do post

Vá até Design > Editar HTML e procure por:

h3.post-title {

E acrescente abaixo o seguinte código:

text-align: center; 

Se quiser o título alinhado à direita, substitua center por right.

Vamos arredondar os cantos externos do rodapé? 

Em HTML pressione Ctrl + F e procure por:
.main-inner .column-center-outer {
E logo abaixo cole:

-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
Depois procure por:
 .main-inner .fauxcolumn-right-outer .fauxcolumn-inner { 
E logo abaixo cole:

-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;

Que tal um menu bem bonito e diferente?
Leia esse tutorial aqui: Menu em imagens com estado hover.
E depois de feito arraste o gadget com o código do menu pra cima do post, assim:

Vamos personalizar a data da postagem?
Leia este tutorial: [www]
No fundo use a mesma cor que usou na coluna e no hover alguma cor que você esteja usando
 como complemento.

Agora vamos colocar uma imagem no cabeçalho pra deixar seu topo ainda mais bonito.

Fiz três bases pra vocês, cada uma delas tem três cores de coluna, as que eu indiquei pra cor da mesma anteriormente. 
#BE7DFF - roxo | #969696 - chumbo | #C0C0C0 - cinza ) 
Abra a imagem para salvar no tamanho original.

Base 1

(na cor cinza aqui) (na cor roxa aqui)

Base 2

(na cor cinza aqui) (na cor roxa aqui)

Base 3

(na cor cinza aqui) (na cor roxa aqui)

É só editar colocando o nome do seu blog e seu cabeçalho está pronto.
E agora, como colocar? 

Vá em Design > Elementos da página e clique em Editar no gadget do cabeçalho:


Vai abrir uma janela, então você clica em "Fazer upload da imagem" e escolha sua imagem de topo. Em posicionamento marque a opção "Por trás de titulo e descrição". Espere a imagem carregar e salve.

Certamente vai ficar um espaço entre o cabeçalho e o resto do layout assim (clique) mas já vamos juntar tudo.

Bom, a forma mais fácil é seguindo esse tutorial aqui. Porém ele não funciona na bosta do IE. Se você quiser que funcione lá também siga esses tutoriais abaixo: 

Para juntar a sidebar: [www]
e
Para juntar a área da postagem com o cabeçalho:

Procure por:
.main-inner .column-center-outer {
Então acrescente o código abaixo antes de fechar a chave:

margin-top: -40px;

Altere o numero até você ver que juntou e salve.

Para fazer os posts subirem também procure por:
.main-inner .column-center-inner {
E logo abaixo cole o seguinte código:

margin-top: -40px;

Altere o numero até os posts subirem o suficiente.



Agora só falta aplicar mais alguns tutoriais para deixar seu blog mais elaborado. Abaixo segue os links dos tutoriais pra você melhorar ainda mais seu layout.


Espero que tenham gostado, se precisar eu edito esse post e melhoro. É que o tempo anda corrido então não sei quando vou poder voltar aqui e não quero deixar vocês sem post. Era isso amores.
Peço que se usarem o tutorial e as bases de cabeçalho creditem e em hipótese alguma repassem, não pus os créditos nas imagens pois sei que atrapalha, então peço o bom senso de vocês. 

Não é obrigatório, mas se vocês não se importarem eu peço que coloquem esse banner em alguma parte do seu blog:




Beijos, fiquem com Deus.

85 comentários:

  1. adorei o tutorial *--*

    e adorei o blog de vcs tbm ><

    beeijos '

    Juubs

    http://umaprincesadeallstar.blogspot.com/

    ResponderExcluir
  2. Adoreeeei! Yeeey! \O/
    Ajuda muito quem não tem noção nenhuma de HTML (tipo eu XD) a fazer um lay bonito de cara. Adorei!
    *-*

    ResponderExcluir
  3. Awn, obrigada por indicar um de nossos tutoriais :D
    Adorei o post, dá uma noção pra quem não sabe muito de HTML/CSS *-*
    Então, aceitamos a afiliação sim *-*
    Já te colocamos lá.
    Beijos,
    www.otherthingsattitudeincluded.blogspot.com

    ResponderExcluir
  4. Ficou muito bom. Parabéns bem detalhado irá ajudar muitos blogueiros(a) iniciantes!
    http://universophotoscape.blogspot.com/

    ResponderExcluir
  5. Nossa, adorei o tuto, é complicadinho, mais ta vaelndo, haha
    Foofa, o seu blog é perfeito, eu adorei.
    preciso da sua ajuda para conseguir 500 seguidores , se me seguir eu sigo devolta, prometo, em fim, seu blog está arrazando, e te espero no meu.

    Beijos
    Chiquissimas.blogspot.com

    ResponderExcluir
  6. Participe do sorteio do meu blog?
    http://samara-gabryella2.blogspot.com/2011/12/1-sorteio-especial-de-natal.html

    ResponderExcluir
  7. Oii fofa tudo bem?Eu sou a Fran do blog 123 Make! e eu gostei muito daqui é bom mesmo...amei os tutoriais, são muito úteis, vou divulgar seu blog no meu mais para frente...Lindo o layout...Bjs

    http://123make.blogspot.com/

    ResponderExcluir
  8. Tutorial perfeito ;)

    http://out-of-orbit.blogspot.com/

    ResponderExcluir
  9. como você fez aquele seu banner , DIVULGUE ?? faz um tutorial ??

    ResponderExcluir
  10. Amei o tutorial, muito bom mesmo.. Visita meu blog?

    http://newsdayoff.tk/

    ResponderExcluir
  11. Anny, perfeitinho esse tutorial, tentei fazer um layout sweet rock no meu blog, só não sei se consegui, rs. Seguindo, retribui? www.d-e-s-n-e-u-r-a-n-d-o.blogspot.com

    ResponderExcluir
  12. Super perfeito esse blog, parabéns mesmo, visitando aqui pela primeira vez, e me apaixonando, de vez. :O

    ResponderExcluir
  13. Esse tutorial é ótimo! Já sigo o seu blog há um tempinho e acho ele muito lindo, cheio de conteúdo :3

    onthefame.tk

    ResponderExcluir
  14. Oi, estou com um novo layout no blog! Vai lá dar uma checada e deixe seu recado!
    Alias, seu layout está lindo...

    http://antigomoderno.blogspot.com

    ResponderExcluir
  15. Amei o tuto flor!! mt bom, parabéns *-*

    World Girl -> http://ianapaulinhaaaa.blogspot.com/

    ResponderExcluir
  16. Flor, já coloquei o seu link lá no Other Things, quando colocar me avisa?
    Beijos,
    www.otherthingsattitudeincluded.blogspot.com

    ResponderExcluir
  17. Oi Anny, tudo bom? Então, você poderia postar umas nuvenzinhas tipo a do cabeçalho com fundo transparente pra gente? Se puder, me avisa lá no meu blog :)
    Beijo,
    http://tendencias-teens.blogspot.com

    ResponderExcluir
  18. Oi fofa, lembra de mim? a menina do blog Garotas dde Allstar, que ia desativar por um tempo e tal?
    estou voltando, com novo lay lá no blog e tudo mais, vou vir sempre comentar aqui *-* hehe :)
    novo post lá no blog já, passa lá e comenta o que achou do novo lay , sobre o post tbm, haha,
    Estou seguindo segue de volta ?

    Beijos, o blog ta liiindo dms viu ? u_u adoreeeeei! s2
    http://ninas-top-stardoll.blogspot.com/

    ResponderExcluir
  19. Ótimo tuto! Bem explicadinho. Aqueles que não sabem muito de HTML tem que olhar,haha
    Kissus!!

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

    ResponderExcluir
  20. então eu consegui, mais ficcaram meio desproporcionais :s mais mesmo assim muito obrigada s2
    iwantonlyou.blogspot.com

    ResponderExcluir
  21. Adoro Big Tutoriais *-* Ajudam muito!

    Tem post novo lá no Refúgio Teen. Confere?
    Beijos ;*
    http://refugio-teen.blogspot.com/

    ResponderExcluir
  22. AMEI o tuto! Me inspirei nele para fazer o design do meu Blog Menina Indecisa. Muito obrigada (aguardando os outros estilos...)

    http://yomenina.blogspot.com

    ResponderExcluir
  23. own, obg flor, você tbm escreve muito bem ok?! , linda. Beijos ;*

    ResponderExcluir
  24. flor amei seu blog
    beijos
    http://lolamantovani.blogspot.com/

    ResponderExcluir
  25. Oi , eu adorei o tutorial

    seu blog é perfeito , eu coloquei o Go Imagine recomendo do meu blog , ok ?

    http://bomb-of-chocolate.blogspot.com/

    ResponderExcluir
  26. Olá, ameei o seu blog e já estou te seguindo *-*
    Passa no meu blog e me segue tbm?

    http://www.lookdediva.com/

    Beeijos.

    ResponderExcluir
  27. Gostei, maneiro *u*
    Respondendo sua pergunta: Eu não sei quanto é uma viagem para lá, porque vai depender de quantos dias e tal.
    Blog | Blog Pessoal

    ResponderExcluir
  28. Adorei o tutorial, meu lay ficou fantástico, é a primeira vez que visito seu blog e já estou adorando, Kisses.
    http://rock-teen-oficial.blogspot.com/

    ResponderExcluir
  29. hoy eu baixei o inkscape aqui:

    http://www.baixaki.com.br/download/inkscape.htm

    ResponderExcluir
  30. ótimo tutorial!
    Só que já aprendi no tuto do Trechy Teen, basicamente ele é um dos primeiros, e acredito que vc também tenha aprendido lá, por que está formulado do mesmo jeito do blog da Candy.
    E quase todos esses tutos já vi nos seus respectivos blogs.
    Adorei seus cabeçalhos.
    Beijos
    Girls On-Line

    ResponderExcluir
  31. Amei amei amei amei amei amei! Fazia tempo que eu procurava um tutorial assim, mas nunca encontrei um tão completo!
    Muuuito obrigada, depois desse tutorial vou até salvar o blog em favoritos kkkkk
    bjbj
    blog-salto-alto.blogspot.com

    ResponderExcluir
  32. Então Anny, o layout que eu estou editando é outro, eu fiz a partir desse seu tutorial com o travel mesmo. Olha o link: depois-da-primavera.blogspot.com
    E é nesse que eu não encontrei os trechos pra colocar os comentário, autor e tags logo abaixo do titulo

    blog-salto-alto.blogspot.com

    ResponderExcluir
  33. Obrigada pela ajuda, agora eu consegui, tinha esquecido de marcar "Expandir modelos de widgets" kkk
    Peguei o banner e vou por na pagina de creditos porque esse tutorial me ajudou demais rs
    beijo
    blog-salto-alto.blogspot.com

    ResponderExcluir
  34. É mais ou menos assim que faço os Templates do meu blog, só não uso as cores do Sweet Rocker.
    Beijinhos, ameio o tuto!

    ResponderExcluir
  35. Vou usar as dicas ja *-* Ótimo post

    ResponderExcluir
  36. Adorei o tutorial, obrigada mesmo!

    ResponderExcluir
  37. oi, eu fiz um blog pessoal que não se trata apenas da minha vida mais sim de tudo que a cerca.
    Pode visitar e se gostar seguir por favor .. ?
    http://dinhaahrauber.blogspot.com/
    obrigada *------------*

    ResponderExcluir
  38. Olá Florzinha Ameei seu Blog, Ja estoou seguindo

    Segue o meu ? To esperando tá ?

    Bjin :#
    http://www.rebecafashionworld.blogspot.com/

    ResponderExcluir
  39. Esse tutorial foi ótimo para mim,já que eu nem sabia por onde começar para personalizar o meu blog. Eu adoro o seu blog,o conteudo dele é incrivel,já estou seguindo. Eu sempre visito o seu blog.
    http://amigasemgrupo.blogspot.com

    ResponderExcluir
  40. Lindáa do céeu muiito obrigado por esse post estava super atrás de um tuto que me ajudasse! Me ajudou e muito! Primeira vez que vim aqui e já me apaixonei! Muito Obg! Beiijos. ;*

    Seguindo!

    http://rainhafashionista.blogspot.com

    ResponderExcluir
  41. Ótimo tutorial! (:

    http://pequenairritante.blogspot.com

    ResponderExcluir
  42. Flor eu amei e coloquei o banner!!!! graças a vc meu blog ta lindo visita?? universodasofia.blogspot.com

    ResponderExcluir
  43. obrigada por ele, adorei :3

    ResponderExcluir
  44. o tutorial me ajudou muito, ja coloquei os devidos creditos. http://essaeavez.blogspot.com/

    ResponderExcluir
  45. Então flor, o meu só não deu certo a parte de juntar a área da postagem com o cabeçalho , porque quando fiz isso, o menu desapareceu, e quando eu coloco o menu novamente, as postagens sobem e não ficam tão certinhas com o cabeçalho ;/ , mais fora isso deu tudo certinho. Não sei onde posso ter errado :(
    Beijos!

    http://todasaspequennascoisas.blogspot.com/

    ResponderExcluir
  46. Oláaaaaaaaaaa!!!!! Amei o tutorial, perfeitooooo!! Uso e aprovooooooooo, porém só tenho uma dúvida, quando subimos para juntar a parte de postagem com a imagem de fundo, o menu desaparece, alguma dica?
    Continua assim, seu blof está espetacular!!! =)

    ResponderExcluir
  47. nossa mje ajudou muito,tava procurando um tuto como esse e nao conseguia achar!
    bjs

    ResponderExcluir
  48. mt foda u.u http://princesinhafalsaoficial.blogspot.com.br/

    ResponderExcluir
  49. Blog novo na área, rs.. visitem *u*
    www.blogmeninasteens.blogspot.com.br

    ResponderExcluir
  50. Me ajudou muuito mesmo! Já tem creditos!

    http://landycandyfashion.blogspot.com.br/

    ResponderExcluir
  51. Oii.. Vc pode me ajudar numa coisa? Eu fiz ali tudo certinho mas na hora de por o cabeçalho fico separado a sidebar com o cabeçalho! Ajuda?

    http://peroladesigner.blogspot.com.br/

    ResponderExcluir
  52. tem como atualizar as imagens que não está funcionando desse post??

    ResponderExcluir
  53. Peguei algumas coisas. Beijos.

    http://sonhosmodificados.blogspot.com.br/

    ResponderExcluir
  54. Ótimo tutu Linda! Eu usei só algumas coisas, mas vou creditar ok?
    Beijos!
    ismeninadelicada.blogspot.com

    ResponderExcluir
  55. Muito ótimo esse Tuto Amei seu blog!!
    http://depoisdoeclipse.blogspot.com.br/

    ResponderExcluir
  56. Hey girl!Pode postar um tuto de como fazer a area dos coments assim?Agradeço,bjoka
    http://biacmenezes.blogspot.com

    ResponderExcluir
  57. Nossa esse tipo de tutorial é bem util, mas dá uma preguicinha de ler, mas tem que criar coragem e fazer o layout!

    ResponderExcluir
  58. Esse tutorial é o máximo...gostei mto..
    Dá uma olhada de como ficou: http://blogferh.blogspot.com.br/
    Modifiquei uma coisinha e outra, mas a base foi desse tuto.

    ResponderExcluir
  59. Oii flor, eu queria saber como você faz pra ficar com o cursor assim, com uma frase. Me ajuda ? Sou novata ainda :S

    http://artepscape.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. É só você fazer uma imagem com a frase desejada (imagem pequena) e seguir esse tutorial:

      mycandyspace.blogspot.com.br/2012/01/tutorial-como-trocar-o-cursor-do-blog.html

      Excluir
  60. Anny. Amei esse tuto, dá uma olhadinha como ta ficando
    Ainda to fazendo uns ajustes :D

    revolucaorosa.blogspot.com

    ResponderExcluir
  61. Oi meu anjo , obg pelo tuto , vou tentar fazer no meu blog , eu não vou botar o link me , mais vou colocar seu blog na page de créditos ta bom?
    Bjoos

    ResponderExcluir
  62. oi Anny, fiz um layout inteiro com esse tutorial, e ficou lindo! entra no meu blog para conferir:
    http://sorrisomet4lico.blogspot.com.br/
    eu peguei o cabeçalho daqui também, tá?
    AH! os créditos estão na página "Sobre o Blog", eu escrevi e coloquei seu banner lá, ok?
    bjs.

    ResponderExcluir
  63. adorei amor, peguei tudo e fiz isso no meu blog! obrigada, ajudou bastante *-* historiademulherzinha.blogspot.com.br

    ResponderExcluir
  64. Simplesmente amei! Obrigada, me ajudou muito.

    ResponderExcluir
  65. Muita paciência para fazer esse tutorial! Big!

    ResponderExcluir
  66. ajudou muitooo, quando vc ai fazer tutorial dos outros tô esperando rsrs

    ResponderExcluir
  67. Eu fiz o layout como base , vou colocar aquela plaquinha !1

    ResponderExcluir
  68. Podia disponibilizar algum tema baseado no travel, é muito difícil de modificá-lo e deixar bonito como o seu, podia fazer nas cores claras que fica mais fácil de mudar, beijos amei aqui

    ResponderExcluir
  69. Ajudou muito esse tutorial! Eu usei a 1° base mas eu tirei as bonequinhas tem problema? É pq é pra minha fanfic então as bonequinhas me atrapalharam, se quiser dar uma olhada aqui o link http://layoutsclose.blogspot.com eu uso esse blog pra fazer os layouts....

    ResponderExcluir
  70. ola! estou usando! Visita meu blog!

    http://blogdocesebeijos.blogspot.com

    ResponderExcluir
  71. Amei o tutorial,vou fazer quando conseguir 50 seguidores,
    ahuda?
    http://funsttar.blogspot.com.br/

    ResponderExcluir
  72. Semm comentários, perfeitamente incrivel <3

    Pequei o cabeçalho

    ResponderExcluir
  73. Adorei me ajudou muitão!!! Pode deixar que vou creditar ;)
    Blog: http://meninavaidosaofficial.blogspot.com/

    ResponderExcluir
  74. Ameeeei!!
    Me ajudou bastante e sim, fiz meu lay com esse Big tutorial! está tudo creditado! é só ir na page Créditos!
    Gostaria muito de sua visita!
    http://blog-thoughtsofagirl.blogspot.com/

    ResponderExcluir
  75. EU era a pessoa que não tinha noção nenhuma de HTML mas, encontrei seu blog e agora sei 000,1% de HTML graças a você, muito obrigada pela ajuda, eu usei o Layout e creditei mtmtmt obrigada pela ajuda (: , http://apenasparaagarotas.blogspot.com.br/

    ResponderExcluir
  76. Amei! E é muito fácil de fazer, já tinha visto vários tutos sobre isto, mais nenhum, ensinava tãooo certinho..

    http://portalteenoficial.blogspot.com.br/

    ResponderExcluir
  77. Ameiii o meu ficou lindo o seu é Perfect bjsss

    ResponderExcluir
  78. Obg,irei fazer quando passar tempo o meu outro lay

    ResponderExcluir
  79. Oiii... Amei o tutu, mas tipo ñ sei, os codigos HTML são diferentes, tipo quando tem q aperta o F3 e colar o codigo pra achar no meio desses codigos, diz q ñ tem... Ñ sei pq isso, poderia me ajudar ... Mas amei mt o tutu, perfeito *-----*

    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.