Essa página eu criei para postar dicas para vocês editarem seus blogs no html okay ;)
- Primeiramente: O PrintScreen é o poder! ___ porquê? Vou explicar!
O Blogspot pode ser editado através do seu painel, mas há limitações quanto a tamanho e posicionamento de imagens. O lance é pegar um layout simples, e transformá-lo da maneira que quiser! como? descobrindo seus parâmetros utilizando a tecla PrintScreen, que nada mais é que fazer uma cópia de toda imagem visível na tela do computador na hora que a tecla for pressionada.
Para mudar o fundo: Vá em DESIGN - no submenu EDITAR HTML, tecle CTRL + F e digite no campo de pesquisa "background". Vai aparecer aonde está a palavra background, mas preste atenção para que seja a inserida no espaço css BODY. Exemplo:
body {
margin: 0px;
background: #454668 url(http://imgsposter.com/imgs/lists/gR4536.jpg) center repeat-y;
color: #ff078f;
font-family: candara;
}
- Aonde está a URL da imagem, é aonde você vai substituir pela sua.
body {
margin: 0px;
background: #454668 url(http://imgsposter.com/imgs/lists/gR4536.jpg) center repeat-y;
color: #ff078f;
font-family: candara;
}
OBS: Um site ótimo para obter URL e armazenar suas fotos é o ImageShack.us #FicaDica
- Você pode estabelecer como seu fundo aparecerá : uma única vez no centro, repetido diversas vezes, repetido apenas para a horizontal, centralizado e repetido apenas na vertical.
Como:
Nestes parâmetros:
body {
margin: 0px;
background: #454668 url(http://imgsposter.com/imgs/lists/gR4536.jpg) center repeat-y;
color: #ff078f;
font-family: candara;
}
- Center : Centralizado
- Repeat-y : Repetir na vertical
- Repeat-x : Repetir na horizontal
- Fixed : Background fixo na tela
- Top : Alinhado no topo da página
- Galera, o Bê deu uma aula introdutória super de css no dia 22/09 que gostaria de compartilhar aqui no blog.
- CSS, nada mais é do que uma "folha de estilo", é a roupagem do site, uma forma simples de você editar e alinhar conteúdos sem que precise repetir parâmetros; Uma formatação padrão.
<style type="text/css"> Início da Tag
body { body = corpo (O corpo da página)
margin-top: 0px; Margem do topo
margin-bottom: 0px; Margem da base
background: #f0f0f0 URL (url da imagem .jpg aqui) center top fixed repeat-y (vertical ou repeat-x horizontal, ou simplesmente repeat que repete para ambos os lados);
font-family: Verdana; Fonte
font-size: 18px; Tamanho da fonte
color: #ff0045; Cor da fonte
}
a { Link
font-family: Verdana; fonte do Link
font-size: 18px; tamanho da fonte do Link
color: #ff0045; cor do Link
text-decoration: none; sem sublinhado
}
a:hover { Link ativo
text-decoration: underline; sublinhado
color: #204254; cor do Link ativo
font-family: calibri; fonte do Link ativo
font-size: 14px; tamanho da fonte do Link ativo
}
img a { Imagem com link
border: 2px (largura da borda) double (principais parâmetros: double, dashed, solid) #bdbfc4; (cor)
width: 150px; (Irá redimensionar TODAS as imagens da página para 150px de largura)
height: 75px; (Irá redimensionar TODAS as imagens da página para 75px de altura)
}
img a:hover { Imagem com link ativo
border: 2px (largura da borda) double (principais parâmetros: double, dashed, solid) #5b5f66 (cor) ;
width: 160px; (Irá redimensionar TODAS as imagens da página para 150px de largura)
height: 85px; (Irá redimensionar TODAS as imagens da página para 75px de altura)
}
</style>