Muitos blogueiros adoram ou precisam pôr gadgets no cabeçalho, banners de empresa, etc. Os mais inexperientes costumam fazer isso usando margin negativa, e, às vezes, acabam danificando a "clicagem" de algum link. Há ainda os que procuram tutoriais mais complicados na internet para dividir o cabeçalho em dois ou mais espaços, fazendo, assim, com que seja possível colocar outros gadgets. Há também quem mapeie uma imagem para conseguir um cabeçalho bem juntinho do menu, por exemplo. No entanto, existe uma forma bem melhor de conseguir isso, sem prejudicar nada e deixando tudo mais organizadinho. Estou falando da tag table, usada para tabelas.
 |
| Próximo template do blog já está sendo construído >.< |
No exemplo acima você pode ver o uso de table. Aliás, você pode ver o uso de tabela no rodapé desta postagem. Percebeu como tudo fica arrumadinho e nada está prejudicado, nenhum link ou coisa parecida? A medida fica perfeita, não é? Além disso, você não precisa ter aquela trabalheira para fazer uma imagem, mapear ela e fazer dela o menu, coisa que deixa o blog mais pesado. Não bastasse, você pode dividir em quantas partes for preciso. Mas como fazer isso?
Dicionário de tags utilizadas em uma tabela:
Como fazer tabelas com HTML: tutorial rápido e básico
Dicionário de tags utilizadas em uma tabela:
- Table é a tag "geral" da tabela. Ela é a primeira e a última.
- Td é a célula, onde fica a informação, o conteúdo, no caso, a imagem, o gadget, meu, etc.
- Tr é a coluna.
- Td é a célula, onde fica a informação, o conteúdo, no caso, a imagem, o gadget, meu, etc.
- Tr é a coluna.
Observe o código abaixo (você pode usar ele como base para fazer o seu cabeçalho com gadgets):
! Para copiar o código passe o mouse
sobre ele e clique no segundo ícone que aparece no lado superior
direito. Depois, clique OK e pronto, copiado !
<table BORDER='0' CELLPADDING='1' CELLSPACING='1' HEIGHT='ALTURA' WIDTH='LARGURA' bordercolor='transparent' float='center'> <tr style='width: LARGURA DA PRIMEIRA COLUNA - DEFINE A LARGURA DE TODAS AS CÉLULAS DA COLUNA;'> <td style="height: ALTURA DA CÉLULA- DEFINE A ALTURA DAS OUTRAS DA MESMA LINHA;"> CÓDIGO </td> </tr> <tr style='width: LARGURA DA SEGUNDA COLUNA - DEFINE A LARGURA DE TODAS AS CÉLULAS DA COLUNA;'> <td style="height: ALTURA DA CÉLULA - DEFINE A ALTURA DAS OUTRAS DA MESMA LINHA;"> código aqui </td> <td> Código aqui </td> </tr> </table>
Traduzindo:
Abre-se <table> para iniciar uma tabela, acrescentamos <tr> para abrir uma coluna e, seguida, uma linha <td> para formar uma célula. Fechamos a célula com </td> e a coluna com </tr> logo depois. Para pôr mais células em uma única coluna, no entanto, acrescente o número de células (<td> </td>) que for preciso antes de </tr>. E se quiser mais colunas, abra outra <tr>, inserira <td> e </td> (colunas) quantas vezes quiser, e feche com </tr> novamente. No final, após definir o número de colunas e células, feche a tag </table>. Lembre-se de aplicar os tamanhos das células e colunas.
NOTA: o conteúdo da célula deve ficar entre <td> e </td>.
RECOMENDADO PARA TREINAR: abra o bloco de notas e cole o seguinte código:
! Para copiar o código passe o mouse
sobre ele e clique no segundo ícone que aparece no lado superior
direito. Depois, clique OK e pronto, copiado !
<html> <head><title>Tabela</title></head> <body> <table BORDER='0' CELLPADDING='1' CELLSPACING='1' HEIGHT='ALTURA' WIDTH='LARGURA' bordercolor='transparent' float='center' <tr style='width: LARGURA DA PRIMEIRA COLUNA - DEFINE A LARGURA DE TODAS AS CÉLULAS DA COLUNA;'> <td style="height: ALTURA DA CÉLULA- DEFINE A ALTURA DAS OUTRAS DA MESMA LINHA;"> CÓDIGO </td> </tr> <tr style='width: LARGURA DA SEGUNDA COLUNA - DEFINE A LARGURA DE TODAS AS CÉLULAS DA COLUNA;'> <td style="height: ALTURA DA CÉLULA - DEFINE A ALTURA DAS OUTRAS DA MESMA LINHA;"> código aqui </td> <td> Código aqui </td> </tr> </table> </body> </html>
Salve com o seguinte nome tabela.HTML (tabela ponto HTML) e abra o arquivo (abrirá em seu navegador padrão, provavelmente). Você verá como ficou a tabela. Faça testes e mais testes até conseguir mexer direitinho e ter a que você precisa. Lembre-se de aplicar os tamanhos das células e colunas. NÃO mexa em nada acima de <body> e depois de </body>.
Agora vamos ao que interessa!
Como pôr gadgets e menus no cabeçalho
! Faça um backup do seu blog antes de iniciar o tutorial. Para fazer isso, vá em Modelo e aperte no botão "Fazer Backup/Restaurar". Em seguida, clique em "FAZER DOWNLOAD DO MODELO COMPLETO" !
Tem uma tabela? Bem, vamos pôr primeiro o cabeçalho nela:
Tem uma tabela? Bem, vamos pôr primeiro o cabeçalho nela:
1º - Colocando o Cabeçalho na Tabela.
- Vá em PAINEL > MODELO > EDITAR HTML;
- Clique dentro da área dos códigos, aperte Ctrl F e digite o código abaixo na barra de pesquisas que vai aparecer. Em seguida, dê ENTER;
- ABAIXO do código procurado, cole o código da sua tabela (de <table> até </table);
- Agora, aperte Ctrl F novamente e digite <header> na barra de pesquisas. Em seguida, dê ENTER.
- Quando encontrar, selecione o código procurado e o que tiver abaixo até a tag </header>. Preste atenção: </header> é o fechamento de <header>, existe um / depois do < e antes de header>;
- Pronto? Recorte (aperte Ctrl X) e cole na tabela, mais precisamente na célula onde você deseja que o cabeçalho fique, entre o <td> e </td> de sua preferência.
- Salve.
2.1º - Colocando um menu, banner, etc:
- Clique dentro da área dos códigos, aperte Ctrl F e digite o código abaixo na barra de pesquisas que vai aparecer. Em seguida, dê ENTER;
<div class='content-inner'>
- ABAIXO do código procurado, cole o código da sua tabela (de <table> até </table);
- Agora, aperte Ctrl F novamente e digite <header> na barra de pesquisas. Em seguida, dê ENTER.
- Quando encontrar, selecione o código procurado e o que tiver abaixo até a tag </header>. Preste atenção: </header> é o fechamento de <header>, existe um / depois do < e antes de header>;
- Pronto? Recorte (aperte Ctrl X) e cole na tabela, mais precisamente na célula onde você deseja que o cabeçalho fique, entre o <td> e </td> de sua preferência.
- Salve.
2º - Colocando gadgets e tudo mais.
2.1º - Colocando um menu, banner, etc:
Agora, a parte mais fácil:
- Cole o código do menu, da imagem, etc, dentro da célula de sua preferência. Ou seja, entre o <td> e </td> que você escolheu.
:b
2.1º - Colocando um Gadget:
- Dentro de uma célula, cole o seguinte código:
- Altere o que está em maiúsculo pelas palavras que quiser. Assim, você poderá usá-los para aplicar estilos no CSS do Blogger.
- Salve e saia do Editor de HTML. Vá em Layout. Abrirá um espaço novo para você adicionar o gadget que quiser.
- Pronto!
- Cole o código do menu, da imagem, etc, dentro da célula de sua preferência. Ou seja, entre o <td> e </td> que você escolheu.
:b
2.1º - Colocando um Gadget:
- Dentro de uma célula, cole o seguinte código:
<div class='NOME_QUE_QUISER'> <b:section class='NOME_QUE_QUISER' id='NOME_QUE_QUISER' maxwidgets='1' showaddelement='yes'> </b:section> </div>
- Altere o que está em maiúsculo pelas palavras que quiser. Assim, você poderá usá-los para aplicar estilos no CSS do Blogger.
- Salve e saia do Editor de HTML. Vá em Layout. Abrirá um espaço novo para você adicionar o gadget que quiser.
- Pronto!
ATENÇÃO: Não coloque muitos gadgets no cabeçalho, principalmente se possuir muitas imagens. Isso pode deixar o carregamento do blog lento. E para que a tabela não fique visível, não coloque borda.
Espero que tenham gostado. Abraços.
.png)
Nenhum comentário
Postar um comentário
Deixe seu comentário! Sua palavra é muito importante.
(Comentários moderados)