O Header do Blogger é um dos widgets que tem código mais extenso. Entretanto, boa parte desse monte de caracteres trata-se de comentários e condicionais. Veremos pedaço por pedaço dos códigos do Header e você perceberá que não é nenhum bicho-de-sete-cabeças.
O Header do Blogger é um dos widgets que tem código mais extenso. Entretanto, boa parte desse monte de caracteres trata-se de comentários e condicionais. Veremos pedaço por pedaço dos códigos do Header e você perceberá que não é nenhum bicho-de-sete-cabeças.
Neste segundo artigo sobre as tags do Blogger, vamos aproveitar o código do Header para aprender um pouco sobre as tags de dados e as expressões. Também temos as tags codicionais no código do Header, mas essas já foram bastante detalhadas em vários artigos do BloggerSPhera, e você pode consultar a categoria Condicionais. Também começaremos a aprender sobre os includes e includables.
O início do widget do Header é semelhante aos outros widgets. Se você leu a primeira parte da série Tags do Blogger, vai encontrar as tags que mencionamos:
1 | <div id='header-wrapper'> |
2 | <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> |
3 | <b:widget id='Header1' locked='true' title='Nome do Blog (Cabeçalho)' type='Header'> |
Includes
Os includes do Blogger, suas tags e atributos estão explicados em uma das páginas de Ajuda do Blogger. Para não repetir informação, vou apenas acrescentar o que não está explicado lá.
Todo o conteúdo dos widgets do Blogger fica dentro da tag
b:includable. Essa tag deve ser aberta como no exemplo:1 | <b:includable id='main'> |
e depois de colocado todo o conteúdo deve ser fechada com:
1 | |
Agora a coisa fica um pouquinho mais complicada - os includables servem para separar os trechos de código dentro do widget. Sempre deve haver um includable com uma
id='main'. Em alguns widgets temos mais de um includable e include, que explicam ao browser o que e como determinado HTML deve ser interpretado. Os includables não aparecem no código fonte da maneira como estão escritos no HTML do template. Vamos ver no exemplo do Header, para que você entenda melhor.No Header temos 3 includables. O primeiro tem a
id='main' e explica ao browser o que fazer quando há imagem de fundo ou não; se o título fica sobre a imagem, ou se a imagem substitui o texto do título, etc. Vejamos linha a linha esse trecho do código:
Uma condicional: "se for usada uma imagem" (Atenção para a tag data conforme descrito na página de Ajuda do Blogger.)
Outra condicional: "Se a condição 'substituir imagem' for igual a 'SUBSTITUA'"
Comentário: Mostre apenas a imagem, sem o texto.
Um pouco de HTML: Os comentários em HTML devem ser sempre escritos entre os sinais, conforme acima: - Eles servem para o desenvolvedor colocar frases (para si ou para o usuário) que explicam o que o código está fazendo.
Abrimos uma div "header-inner"
Um link para a home-page do blog através de uma expressão.
Vamos dar uma paradinha agora para explicar esses links com expressões.
Primeiro, releia com atenção a explicação sobre a tag
data: na página de Ajuda do Blogger, pois ela é muito importante. Em outra página da Ajuda do Blogger, você encontra a lista de todas as tags de dados (data tags) que podem ser usadas com a tag data:.Quando você precisa construir um link para uma página que você não conhece o endereço, mas existe uma tag de dados, você usa
a expr:href='.Um exemplo:
a expr:href='data:label.url' faz um link para uma página de marcadores. É importante você ficar atento que algumas tags de dados funcionam apenas dentro dos widgets para as quais elas trabalham. A tag
data:description, por exemplo, só pode ser usada dentro do widget do Header. Já a tag data:blog.homepageUrl pode ser usada em vários locais do código inteiro do template.Se vocês acharem que está complicado, me avisem, que assim faço um capítulo especial para as tags de dados.
Continuemos, então com o código de nosso Header:
1 | <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> |
Esse é o código da imagem que é carregada e que ficará no background do Header. É a continuação daquele link que vimos acima e ao clicar na imagem, o leitor é direcionado para a home page do blog. Apesar de ser um código longo, não tem mistérios:
- os atributos (alt, height, width, src) usam expressões e tags de dados;
Mais uma paradinha aqui para complementar a explicação sobre expressões. Algumas expressões precisam de tags de dados MAIS algum outro valor. Neste exemplo é o caso da id da imagem:
expr:id='data:widget.instanceId + "_headerimg"'Tag de dados de id de widget (data:widget.instanceId) MAIS o nome da id (_headerimg).
As expressões que usam esse MAIS devem ser sempre escritas dessa forma:
expr (dois pontos) atributo (aspas simples) (sinal de igual) tag de dado e seu valor (sinal de mais) (aspas duplas) valor (aspas duplas) (aspas simples)
Outro exemplo para você entender melhor: um link que leva à página de feed de um blog, construído com uma expressão.
Se for para o feed do BloggerSPhera, o link normal seria assim:
Se não sabemos o nome do blog, usamos a expressão e a tag de dados e construímos o código assim:
Continuando:
01 | |
02 | |
03 | <b:else/> |
04 | |
Fechamos o link, fechamos a div header inner e temos um SENÃO para aquela condicional "Se a condição 'substituir imagem' for igual a 'SUBSTITUA'".
Depois temos um comentário longo que em resumo significa que a imagem será mostrada como background ao texto (título do blog) e que a largura da imagem poderá ser modificada (reduzida) caso você faça essa opção ao fazer o upload da imagem.
O código que vem em seguida fornece instruções sobre como mostrar a imagem como background do título do blog (obedecendo a condicional), e veremos em nosso próximo post.
Postado por Paulo Cesar |
Marcadores: Assuntos Relevantes, Dicas para Blog, Tutorial
|
Adicione aos Favoritos!
|
|
Assinar:
Postar comentários (Atom)
Nenhum Comentário
Postar um comentário