Utilitários: You are the music in me! com Layout Free

Quem não gosta de música? EU!!! Quem gosta de pautas? EU!!!
Olá, já se inscreveram no concurso? Inscrevam-se! Podem ganhar um layout, e quatro pessoas vão ganhar! Estes são os primeiros utilitários feitos só por mim, se usarem não creditem! Mas se repassarem, sim podem!!!, mas creditem!

Backgrounds:


Cabeçalhos:

Olha como fica num blog: (www)

Gostas do layout daquele blog? Porque não usas em layout free?

DOWNLOAD LAYOUT FREE

E foi isto... 

Como fazer um layout básico

Como eu disse nesse post, eu vou ensinar a fazer um layout básico tipo o meu e o que eu fiz para o mundo dos gifs, em primeiro lugar cria um blog para o teste e faz o upload do modelo completo.

Escolhe o modelo viagem a 2 opção. Vê em largura se esta 960 e no outro 310. Se não estiver põe. E em avançadas vai a titulo do blog>> e onde está 60px muda para 0px.

No Plano de fundo da postagem escolhe branco e também podes mudar o plano de fundo da barra lateral a teu gosto.

Deve estar mais ou menos assim î o teu blog. Aplica ao blog e carrega voltar ao blogger, agora começa a editar o html.

Carrega F3 e procura por:

 .content-outer .content-cap-top {

Vais encontrar um código igual a este:

.content-outer .content-cap-top {

  height: $(content.imageBorder.top.space);

  background: transparent $(content.imageBorder.top) repeat-x scroll top center;

}

.content-outer {

  margin: 0 auto;

  padding-top: $(content.margin);

}

.content-inner {

  background: $(content.background);

  background-position: left -$(content.imageBorder.top.space);

  background-color: $(content.background.color);

  padding: $(content.padding);

}

E apaga as partes sublinhadas a verde, vê com atenção os pontos e virgulas que estão seleccionadas e  as que não estão.
Agora visualiza se o teu blog estiver assim:

Guarda e procura por:

.main-inner .column-right-inner {

Vais encontrar 2 opções mas vai à primeira onde o código é:

 .main-inner .column-right-inner {

 margin-left: $(content.padding);

}

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

  margin-left: $(content.padding);

  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;

}

.main-inner .column-left-inner {

  margin-right: $(content.padding);

}

 .main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

 background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;

  margin-right: $(content.padding);

}

 Apaga o código a verde e visualiza se a barra lateral estiver bem coladinha à area dos posts guarda.
Procura por:

/* Tabs

Vais encontrar este código:

.tabs-inner {
  margin: 1em 0 0;
  padding: 0;
}

Apaga a parte a verde.
Agora procura:

 .main-inner {

e abaixo dele cola:

 margin-top: -25px;

Visualisa, não vais notar nenhuma alteração, então salva.
 
Agora é o cabeçalho recomendo agora o uso do Inkscape para os desenhos. Faz um desenho fofo com essa base:

                                                       (Clica para ver em tamanho original)
Ou faz tu desde ínicio com 960px de comprimento.
Eu fiz um para o meu blog Marshmelon:

(Clica para ver em tamanho original)

Agora mapeia a imagem que escolheste vê como aqui e coloca-a num widget HTML/JavaScript em cima da area dos posts, espero que gostes, Xauuuu!

Dois Templates Free

Estou super feliz por dois motivos, o primeiro é porque tu estás a ler o meu post e o segundo é porque acabei os meus dois Templates *-*. E já estão disponíveis para Download.
Onde? 
Aqui!!! Sim, este post vai ter o download!

Download / Visualisar

Download / Visualisar

Espero que tenhas gostado, alguma dúvida a instalar é só comentar aqui que respondo logo,

Os meus dois Templates

Oi, eu fiz 2 Templates mas ainda não tenho nenhum para download, aqui podes vê-los em direto:
Template 1:

Template 2:

Espero que gostem e em breve dou o link do download!

O que estou fazendo?

Se pensas "O mundo bibástico não tem tido novos posts", é verdade, mas não te preocupes, eu hoje ou amanhã faço um tutorial, agora eu estou fazendo um Template eu vou pô-lo para Download, mas ainda não o acabei, mas se quiseres ir vendo como está:
Abrir aqui- (www)
Abrir numa nova janela- (www)
Espero que gostes!!!