Objectivo
Este tutorial tem como objectivo modificar uma template original usada pelo sistema do blogger, para algo mais original.
O sistema usado pelo blogger e excelente devido ao facto de deixar modificar qualquer parte do código.
Mas neste tutorial vamos usar apenas CSS. Uma das regras deste tutorial é:
Assim sendo a única coisa em que se pode mexer e no CSS, mesmo sabendo que se alterar-se mos o HTML poderiamos modificar muito mais a template, mas isso iria fugir ao principal objectivo do tutorial.
Setup, do blog e escolha da template original.
Neste tutorial vou usar o sistema do blogger.
Registei-me escolhi o meu endereço e por fim escolhi a minha template, neste caso escolhi a Minima pois parece me a template mais limpa de todas.
Perceber a template
Antes de começarmos a modificar a template, temos que entender como e que a template esta organizada.
Por isso vamos por partes, a primeira parte do CSS defini o <body> da template e os links.
body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color:#58a;
text-decoration:none;
}
a:visited {
color:#969;
text-decoration:none;
}
a:hover {
color:#c60;
text-decoration:underline;
}
a img {
border-width:0;
}
As opções inseridas no body define o geral da template. A cor de fundo, o tipo de letra, o tamanho da letra, margens mas tudo em geral.
Quando digo em geral significa que afecta todos os elementos em HTML, a não ser que esse elemento tenha outra classe com outras definições.
De seguida tem o a:link, a:visited, a:hover, a img, que afecta todos os links da template, a não ser que o link tenha outra classe.
Primeira mudanca.
Para começarmos vamos utilizar um dos primeiros tutorias (CSS Efeitos no background) para modificarmos o background da template.Depois de termos a imagem preparada em photoshop, teremos que salvar a imagem para um servidor ou para um host que aceite o upload de imagens e nos de um link.
De seguida fazemos a primeira alteração no CSS.
body {
background: url(O ENDERECO ONDE ESTA A IMAGEM) 50% 0 repeat-y;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
Como podemos ver apenas uma linha e já se começa a notar a diferença.
Votacao
: 1
: 0
Opinoes
Acho que este tutorial é muito bom pk permite ter um "blogger" diferente dos outros pre-definidos, e permite verificar a facilidade e a utilidade do css!
13/03/2006 23:47:40
Nome:
Joao Parreira
Areas:
ASP, CSS, ASP.NET, T-SQL, VB.NET
