Tuto's para seu Layout


     Olá, olá! Hoje trouxe 3 tutoriais muito, muito fáceis, exclusivos para quem quer um layout profissional, mas não sabe como fazer. Sei que não sou nenhuma grande Web Designer, mas entendo um pouco do assunto. 

  •  Separar os Gadgets em caixas
1- Vá em Modelo > Personalizar > Avançado > Planos de Fundo da Barra Lateral.
2- Selecione "Transparente" nas 2 opções, como na imagem abaixo.



3- Vá no seu Html, dê Ctrl + F e procure por /* Widgets
4- Antes de } cole o seguinte código:

background: #fff; /* cor de fundo dos gadgets */
padding-left: 20px; /* margem esquerda*/ 
padding-right: 20px; /* margem direita */ 
padding-bottom: 20px;  /* margem inferior */
padding-top: 5px; /* margem superior */ 

  •      Cabeçalho em toda a largura do Blog

1- Abra seu editor de imagens e crie seu cabeçalho tamanho 1365 X 500 px;
2- Vá no seu HTML, dê Ctrl + F e procure por body { . Você vai encontrar algo assim:

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

     Substitua todo esse código por:

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

body {
background: url("URL DA SUA IMAGEM DE CABEÇALHO") repeat; }

html {
background: #ccc; }

     Caso queira colocar o menu dentro de uma faixa, é só colocar a faixa na imagem, ainda quando etá sendo editada. Depois basta procurar pelo seu menu e ajustar a altura dele.

  • Background nos vídeos do Youtube
1- Crie uma imagem um pouco maior que o tamanho do vídeo. 
Exemplo: Se o vídeo medir  400 X 225 px, faça uma imagem 420 X 245 px. 
2- Hospede a Imagem em algum site de hospedagem, eu recomendo o Tinypic
No Html do seu post, cole o código abaixo:

<div style="background: url(URL DA IMAGEM) left no-repeat; height: 413px; width: 550px;"><div style="float: left; padding-left: 48px; padding-top: 60px;">CÓDIGO DO VÍDEO</div></div>

É só personalizar o código.

Lembrando que todos os Códigos foram tirados lá do Go Imagines e adaptados por mim ;)


Nenhum comentário:

Postar um comentário

Hey! Que bom que você passou por aqui! Deixe a sua opinião sobre o post! Ah...não esqueça que comentários ofensivos ou então "Seguindo, segue de volta?" serão ignorados.