Apesar do nome, não são somente os componentes de um código html que foram colocados nesse tutorial. Foram colocados alguns itens que fazem diferença na hora de fazer um código, como letras, links e códigos do Blogger, entre outros.
Letras
A letra predominhante em um template é definida em uma série de códigos que ficam no html. Como eu ainda não domino esses códigos, eu costumo definir as minhas letras e efeitos de link no mesmo script que define a cor da barra de rolagem. Maiores explicações sobre esse script aqui.
O comando para mudanças nas letras (cores, tipo, tamanho) no decorrer de um post é O que você quiser escrever, não precisa escrever todos os itens, não tem uma ordem certa e pode se aplicar ao texto que você quiser, de uma palavra a um texto inteiro.
Também pode-se colocar as palavras em negrito, itálico ou sublinhadas. As tags são: Negrito, Itálico e Sublinhado.
Links
O código para um link que é, como o código para negrito e itálico, fornecido pelo provedor e é:
Nome do Site ou o que vc quiser escrever.
Caso você queira que o link seja aberto em outra janela, como normalmente acontece com os blogs amigos o comando é target=”_blank”, ficando assim, por exemplo:
Blogger Brasil
Figuras
O tipo de layout mais comum utiliza figuras feitas no Paint (mais básicas) e no Photoshop (as figuras geométricas onde ficam os textos têm opções de efeitos nesse programa e pode-se pegar a versão grátis no site http://www.brasil.adobe.com/support/downloads/main.html). Essas figuras devem ter 780px de largura e são montagens, nas quais pode-se colocar o desenho que se quiser, como se quiser, mais o começo da figura onde estará o texto, como no exemplo:
Nesse caso, eu fiz somente as figuras aonde entra o texto, mas poderia ter um desenho em cima, como no caso do layout do More Than Words. No código do template, essa figura aparecerá assim:
Para que se possa escrever mais do que o tamanho dessa figura, deve-se fazer uma outra figura que seja parte da maior, como esta:
Essa segunda figura aparecerá assim:
Obs: 1) Se você for fazer o template no FrontPage, não precisa colocar o endereço de onde está a figura em um primeiro momento, mas na hora de passar para o Blogger, precisa baixar a figura no Blogger e colocar com o endereço.
2) A figura menor aparece antes no código (mas isso estará na explicação do código como um todo).
3) É fundamental colocar o topmargin="0" e o leftmargin="0"
4) A figura de fundo também pode ficar fixa... Para isso a tag é:
5) O border=”0” que aparece dentro do comando de algumas figuras só tem utilidade se a figura for um link, pois fará com que não haja aquele quadro azul em volta da mesma.
6) Existe outro jeito de fazer essas figuras geométricas, usando tabelas (mas as tabelas são somente quadradas). Eu vou colocar depois da explicação da “caixa de texto” como se usa uma tabela, caso de você queira tentar usá-las algum dia.
Posicionamento
Tanto as figuras quanto os textos são alinhados normalmente à esquerda, existindo as seguintes maneiras de mudar isso:
- para centralizar (center), justificar (justify), colocar à direita (right) ou à esquerda (left).
Obs: O
também é usado para pular linhas, mas eu prefiro usar o
.
Cores
As cores em um html são representadas por códigos hexadecimais. Pode-se usar as tabelas de cores existentes em vários sites, entre os quais a do Cristal Layout Shop e a do Scripts Universe
Caixa de Texto
Para ser bem sincera, eu não sei exatamente como se chama isso, mas tem a mesma função que uma caixa de texto no Word...
A tag para uma caixa de texto básica é:
border: none – Normalmente coloca-se none aqui porque essa camada deve ser transparente.
top: 30 – A distância que a caixa de texto ficará do início da página, em pixels.
left: 262 – A distância que a caixa de texto ficará do início da página, em pixels (devido à diferença entre os tamanhos de monitor, não se costuma usar o “right”).
width: 500 – Largura da caixa de texto, em pixels (deve ser aproximadamente a largura da figura aonde estará).
height: 300 – Altura da caixa de texto, em pixels (a altura entra no FrontPage automaticamante, mas não faz a menor diferença pois, conforme você escreve, a caixa cresce).
Obs: 1) Esse código que eu usei como exemplo é do lugar aonde ficam os posts.
2) A "caixa de texto" pode ter qualquer tamanho e ser colocada em qualquer lugar do template (como no caso do exemplo de layout).
3) Se você quiser colocar uma barra de rolagem nessa camada, basta acrescentar “; overflow: auto; background: none” após o height.
Tabelas
As caixas de texto utilizadas na atual versão roxa e na versão de natal do meu blog são tabelas. As tabelas têm a vantagem de poder se escolher o tamanho sem brigar com o mouse.
A tag para uma tabela é:
| O que você quiser escrever (no caso do menu) ou o código para post do Blogger. |
border="0" – A borda da tabela.
width="520" – Largura da tabela, em pixels, varia conforme a sua vontade/necessidade.
left: 240 – A distância que a tabela ficará do início da página, em pixels (devido à diferença entre os tamanhos de monitor, não se costuma usar o “right”).
top: 410 – A distância que a tabela ficará do início da página, em pixels.
border: 4 solid #B8860B – Espessura, cor, e tipo da linha em volta da tabela (eu conheço solid e dotted).
height="278" – Altura da tabela, em pixels. (a altura entra no FrontPage automaticamante, mas não faz a menor diferença pois, conforme você escreve, a tabela cresce).
background="#FFFFFF" – Assim como o fundo do template, o fundo da tabela pode ser uma cor ou uma figura (do mesmo modo como acontece com a Figura, enquanto se estiver no FronPage, não é preciso colocar o endereço da figura, mas para colocar no Blogger, precisa-se baixar a figura antes).
Códigos do Blogger
O Blogger tem uma série de tags, as quais é interessante saber para alterar o local dos seus posts e saber aonde colocar os comentários, por exemplo.
<$BlogTitle$> - Título do Blog, da maneira que ele foi colocado no momento em que se criou o Blogger.
<$BlogDescription$> - Descrição do Blog, da maneira que foi feita no momento em que se criou o Blogger.
<$BlogItemBody$> - O conteúdo de um post.
<$BlogItemAuthor$> - O autor de um post.
<$BlogItemAuthorNickname$> - O apelido do autor de um post.
<$BlogItemAuthorEmail$> - O endereço de e-mail do autor de um post.
<$BlogItemAuthorURL$> - O endereço web da homepage do autor de um post.
<$BlogItemDateTime$> - A data e/ou a hora de um post.
<$BlogArchiveFileName$> - Nome relacionado a uma página de arquivo (só é usado no script do arquivo).
<$BlogItemNumber$> - Número do post. É dado pelo Blogger a cada post. (só é usado no script de comentário).
OBS: Todos os códigos do Blogger, exceto o rodapé, o número do post e o código de início e fim do comando são alterados de acordo com o que está nas Configurações.
Script de Arquivo
Como deu um trabalhão para achar o script certo (não para mim, mas para a Naty), aqui está ele:
<<>
Obs: Em roxo, o código do nome relacionado a um arquivo
Comentários
Nesse caso, eu estou falando particularmente do serviço de comentários do Blogger. Existem vários sites que fornecem comentários, sendo que em alguns pode-se mudar o fundo e/ou colocar figuras, mas eu acabei desistindo do que eu havia colocado no meu blog.
Para poder falar dos comentários, eu peguei o código que era usado em um blog que eu cancelei faz tempo...
1ª parte:
Sem mistérios, deve ficar entre e do seu template.
2ª parte:
')">Comments:
Comments: - É nesse lugar que se muda o que aparece no link para os comentários do post. O número de comentários feitos aparece por conta do script e pode-se escrever qualquer coisa...
<$BlogItemNumber$> - Número do post. Componente do Blogger que identifica cada post.
Esse segundo código deve ser colocado aonde você quiser que apareça (entre
Fontes
FrontPage – Office 2000
Adobe Photoshop 6.0
Paint – Windows Millennium Edition
Naty, More Than Words
Scripts Universe
Layouts da Maira
Casa dos Layouts
Cristal Layout Shop
0 comentários:
Postar um comentário