BIG TUTORIAL | COMO FAZER UMA PARTE SUPERIOR COM INFORMAÇÃO - PARTE 1

Oioi pessoal! Estou muito entusiasmado por finalmente começar a escrever no blog... Tal como referi na mensagem de apresentação (que foi a bíblia em versão porta-chaves), já há muito tempo que queria ter um blog deste tipo e agora que finalmente consegui... Ufaa! Vocês percebem o que estou a querer dizer não percebem? :'3

Mas vamos agora ao que realmente interessa!

Como já devem ter reparado são vários os blogues, nomeadamente o Ding (abreviatura de Desining), que têm uma parte superior que funciona quase como um "quadro" (não encontrei expressão melhor ahah) que contem alguma informação em destaque, que, no meu caso em particular, é uma mensagem de boas vindas para vocês - meus leitores fofos *-* - e os créditos. Hoje é mesmo isso que eu vos venho ensinar a fazer...

Esse "quadro de informações" é nada mais nada menos do que uma imagem, ou melhor dizendo, um fundo, feito previamente por vocês, claro, e que já pode ou não conter toda a informação que vocês querem que nele esteja. No meu caso especifico, a imagem continha apenas a área para colocar a informação e o logo do blog. Todo o texto foi depois acrescentado por mim, mas eu depois ensino-vos também como fazer isso, não se preocupem.

Como quando terminei o tutorial verifiquei que a postagem estava realmente muito grande, conclui que o melhor seria dividir este tutorial em duas partes. Nesta primeira parte vocês ficarão a saber como colocar essa parte superior no blog, sendo que todos vocês que já fizeram a imagem com toda a informação (textos, imagens, ...) que gostariam de ter nesse "quadro" ficam apenas por aqui, ou seja, não precisam de verificar a segunda parte do tutorial, enquanto que todos os restantes que querem adicionar as restantes informações manualmente, tal como eu o fiz, têm que verificar a segunda parte do tutorial. 

Vamos lá começar!

Eu estou a ensinar-vos da maneira como eu fiz o meu layout. Não sei se existem outras formas de o fazer, talvez ate mais fáceis que esta. 

1º PASSO

Criar a imagem, já com o espaço correto onde vocês querem depois colocar a informação ou então já com a informação. Essa imagem deverá também já conter em redor o espaço com a cor que escolheram para vosso background ou parte da imagem do vosso fundo e alguns outros detalhes que queiram que essa tua parte superior tenha. Neste caso, e de forma a tornar-se mais fácil, aconselho-vos a escolher para fundo apenas uma cor. Fiquem agora com a imagem do meu layout para perceberes mais do que estou a falar:

[clica na imagem para veres com maiores dimensões]

2º PASSO

Neste passo existem duas formas diferentes de colocar este fundo no blog:

• Caso queiram manter as barras das postagens e a barra lateral já existentes da Blogger, basta irem ao Modelo do vosso blog, clicando de seguida em Personalizar e, posteriormente, atribuírem a vossa imagem, que aconselho que a façam já com as corretas dimensões, isto é, que tentem não redimensioná-la pois diminuirá a qualidade da imagem, como fundo do vosso blog. Por fim, cliquem em Avançadas, depois em Fundos e procurem, no Fundo Exterior, a cor igual aquela que contorna o vosso quadro de informações.

• Caso queiram criar as vossas próprias barras de postagens e sidebar's, terão de criar outra imagem com as dimensões que desejam para as mesmas e com a cor de fundo que desejas (naturalmente deverá de ser a mesma que a cor da parte superior) a rodeá-las [clica aqui para verem melhor do que estou a falar]. Assim, terão que ter duas imagens prontas: a da parte superior e a das barras.
  Posteriormente, deverão ir ao HTML (Editar HTML) do vosso blog e procurar pela tag body {.
  
  Deverão encontrar algo assim: 

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}

           Deverão apagar todo esse segmento de texto e substituir pelo seguinte:

body, html {
height: 400px;
margin: 0;
padding: 0;
}

body {
font: $(body.font);
color: $(body.text.color);
background: url("URL do 1º background") no-repeat;
}

html {
background: url("URL do 2º background") repeat;
}

Atentem-se agora nos seguintes comentários para perceberem como editar o código para ficar tudo certinho:

height - alterar 400 para a altura do background da vossa parte superior;

URL do 1º background - URL background da parte superior (caso o fundo ocupar a largura total do ecrã, em frente ao a url("URL do 1º background") deverá estar no-repeat, se não ocupar deverá de estar repeat-x );

URL do 2º background - background das barras;

_________________________________________________________________________________

E pronto, a primeira parte deste Big Tutorial já está pronta! Tal como já referi, todos aqueles que já fizeram esse "quadro de informações" com todas as informações que querem que nele esteja já esta tudo pronto, não precisando de esperarem pelo segundo tutorial, enquanto que aqueles que depois querem adicionar manualmente a informação através de widgtes na barra lateral têm que esperar pela publicação da 2ª parte que prometo publicar muito em breve!

Espero que tenham gostado deste meu primeiro tutorial e caso alguma dúvida deixem nos comentários que eu terei todo o gosto em responder-vos! Beijos e abraços :3