Big tutorial: Criando um layout Sweet Rocker

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?

[www] [www] [www] [www] [www]

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.

Links postagens mais recente, início e postagens mais antigas com imagens.

Tags, autor e comentários abaixo do titulo do post.

Ocultar a navbar e mostrá-la ao passar o mouse.

Colocando caixa de pesquisa personalizada.

Coloque "leia mais" com imagem nos posts.

Barra de rolagem personalizada.

Links em fade - Entenda!

Blockquote Personalizado.

Seleções Coloridas.

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:

<br /> <a href="http://goimagines.blogspot.com/" target="_blank"><img src="http://4.bp.blogspot.com/-wwNt_UWxs-Q/TvozhIqEkxI/AAAAAAAACsA/oWEyjAgDnAE/s1600/cr%25C3%25A9ditos.pn" border="0"></a><br />

Beijos, fiquem com Deus.