Tags reservadas

A primeira coisa que o blogueiro deve fazer para melhorar o seu layout é conhecer muito bem o funcionamento das tags reservadas. Cada blog tem as suas.

Quando comecei a fazer este curso adaptei minhas aulas de html para o formato "virtual" e testava tudo o que estava escrevendo nos meus blogs para ver como funcionava... Muita coisa deu certo, outras nem tanto. Mas a grande dificuldade realmente foi na hora do template. Fiz uma porção de testes até chegar ao ponto em que já não endendia mais nada... A única solução foi jogar tudo fora e começar do zero. Reparei então que teria evitado inúmeras confusões se tivesse feito isso antes de tudo. Portanto, por experiência própria, é fundamental conhecer o funcionamento das tags reservadas do seu blog para poder criar layouts interessantes, criativos e que funcionem de fato.

Outro fator complicador é a variedade de templates prontos que estão à disposição do blogueiro. São lindos, mas muito pouco funcionais. Qualquer alteração que você deseja fazer provoca uma verdadeira catástrofe. Tem muita tabela dentro de tabela, estilo em linha com estilo incorporado, tag div, span e font tudo misturado... Uma Babel! Portanto não tenha dúvidas: conheça o funcionamento básico do seu blog antes de se atrever a usar estes templates prontos. Isso e mais uma boa dose de conhecimento de HTML para poder fazer suas alterações com segurança.

Para isso a melhor forma é abrir o bom e velho bloco de notas e criar uma página básica de html utilizando as tags reservadas do seu blog. Salve seu trabalho na nossa pasta de exercícios "html4blog" com um nome bem fácil: "tags_reservadas.htm". Visualize esta página no navegador, depois selecione todo o código, copie-o e cole-o na área do template. Veja o resultado no ar e compare com o que você tem sem estar no ar. Uma parte é fixa a outra é um looping, exatamente a área das mensagens. Se você quiser demarcar melhor esta área acrescente tags de régua no seu código e vá verificando na publicação a posição destas réguas. Até que você tenha controle do que está acontecento e não seja simplesmente o acaso.

Primeiro usando o Weblogger:

Dentro da aba "Template" você encontra, logo após a área onde você coloca o seu template, as instruções sobre "tags reservadas". Lá você encontra as genéricas e as de informações do Post. As tags genéricas você pode usar de qualquer jeito, mas as referentes ao post você deve ficar atento: esta área deve ficar cercada pelas tags <weblogger> e </weblogger> e a área de cabeçalho (<#weblogDataCabecalho#>) deve ficar encerrada entre as tags <weblogCabecalhodata> e </weblogCabecalhodata>.

Outra coisa boa de se observar é que as tags que possuem o sinal "#" representam um determinado conteúdo a ser exibido no local onde aparecem. Exemplo: <#TituloWebLog#> na verdade vai exibir o título do seu blog conforme o que você preencheu na aba "Configurações".

Há alguns detalhes que também não são mencionados. Por exemplo, há uma tag reservada que não está nesta lista que é a tag <#DescricaoWebLog#>. Se você quiser que o a seção comentários funcione você não pode apagar a linha de código abaixo que deve ficar entre as tags <head> e </head>.
<script language="JavaScript" src="http://www.weblogger.com.br/js/weblogger.js"></script>

Então, uma página básica para você aprender a usar as tags reservadas do weblogger ficaria assim:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title> <#TituloWebLog#> </title>
<script language="JavaScript" src="http://www.weblogger.com.br/js/weblogger.js"></script>
</head>
<body>

 <#TituloWebLog#> 
 <#DescricaoWebLog#> 

<weblogger>
<weblogcabecalhodata>
 <#weblogDataCabecalho#> 
</weblogcabecalhodata>
 <#weblogMensagem#> 
 <#weblogAutor#> 
 <a href="mailto:<#weblogEmail#>"> <#weblogApelido#> </a> 
 <#weblogHora#> 
 <a href="javascript:wb_comentario(<#weblogcodigo#>)"> comentários [<#weblogTotalComentarios#>] </a>
 <#weblogEnviarTexto#> 
<hr>
</weblogger>

 <#weblogContador#> 
 <#weblogArquivo#> 
 <a href=<#weblogLivrodevisita#>> <img src=http://www.weblogger.com.br/img/wb_lvisitas.jpg border=0> </a> 

 <a href=http://www.weblogger.com.br target="_blank"> <img src=http://www.weblogger.com.br/img/wb_selo.gif
border=0> </a> 
 <a href="http://www.terra.com.br" target="_blank"> <img src="http://www.weblogger.com.br/img/template/terra.gif" border=0> </a> 
</body>
</html>

Agora que você já sabe o que é o quê pode começar a criar tabelas ou "divs" ou "blockquotes" a vontade e ir incrementando o seu blog. O procedimento é esse, você cria no seu computador e salva. Depois copia e cola para a área do template. Brinque bastante com os estilos CSS para deixar o visual mais atrativo sem carregar muito na página.

Agora é a vez do Blogger.

Aqui a coisa é mais explicadinha, mas não tem nem livro de visita, nem contador, nem envie para um amigo e nem cometários. Tudo isso é extra. Portanto vamos ao básico. As instruções de tags reservadas são bem mais claras. Mas ainda sim tem coisa escondida. Vamos dar uma geral e ver como fica uma página só com as tags reservadas para poder entendê-las.

O que aparece de coisa que não está explicado não é brincadeira. A tag reservada <$BlogArchiveFileName$> não aparece nas explicações. E é o acesso aos arquivos do seu blog, portanto não pode faltar.

<html>
<head>
<title> <$BlogTitle$> </title>
</head>
<body>

 <$BlogTitle$> 

 <$BlogDescription$> 

<Blogger>
<BlogDateHeader>
 <$BlogDateHeaderDate$> 
</BlogDateHeader>
 <$BlogItemBody$> 
 <$BlogItemAuthor$> 
 <$BlogItemAuthorNickname$> 
 <$BlogItemAuthorEmail$> 
 <$BlogItemAuthorURL$> 
 <$BlogItemDateTime$> 
<hr>
<BlogDateFooter>
<hr>
</BlogDateFooter>
</Blogger>

 <a href="<$BlogArchiveFileName$>"> arquivos </a> 
</body>
</html>

Para você inserir um comentário, você deve ir até a página comentário, entrar com sua senha e login do blogger e cadastrar seu bloguer para receber as linhas de código para inserir na sua página. Uma parte vai entre as tags <head> e </head> e a outra fica perto do post. Veja agora como ficou o meu "html4blog" - repare que para cada blog a linha de código será diferente.

<html>
<head>
<title> <$BlogTitle$> </title>
<script src="http://www.comm.blogger.com.br/3/9/4/394121/comment.js">
</script> </head>
<body>

 <$BlogTitle$> 

 <$BlogDescription$> 

<Blogger>
<BlogDateHeader>
 <$BlogDateHeaderDate$> 
</BlogDateHeader>
 <$BlogItemBody$> 
 <$BlogItemAuthor$> 
 <$BlogItemAuthorNickname$> 
 <$BlogItemAuthorEmail$> 
 <$BlogItemAuthorURL$> 
 <$BlogItemDateTime$> 
<a href="javascript:goToComments('<$BlogItemNumber$>')"> Comentários: <script>getComments('<$BlogItemNumber$>');</script></a>
<hr>
<BlogDateFooter>
<hr>
</BlogDateFooter>
</Blogger>

 <a href="<$BlogArchiveFileName$>"> arquivos </a> 
 <a href="http://www.blogger.com.br"><img src="/Blogger.Resources/templates/80/bt_blogger.gif" border="0"></a> 
</body>
</html>

Agora é ficar brincando com o código e descobrindo como deixar a cara do seu blog a melhor de todas!

fim