Condicionais para Criar Páginas Estáticas no Blogger

Existem diversos tutoriais publicados sobre Como Criar Páginas Estáticas no Blogger. Quem desenha templates por encomenda ou para distribuição, porém, esbarra sempre no mesmo problema: customização fácil para usuários iniciantes. Neste tutorial compartilho o jeitinho que encontrei para solucionar isso.

Sem dúvida, são as maravilhosas condicionais que irão nos ajudar nessa tarefa. Porém, as condicionais precisam das tags do Blogger e é aí que a coisa enrosca.

Como já vimos anteriormente, as tags para páginas no Blogger são:

data:blog.url - onde você pode definir em que URl você quer ou não determinados estilos

• data:blog.homepageUrl - para página inicial;
• "http://endereço-da-pagina" - colocando o endereço da página.

Exemplo:

<b:if cond='data:blog.url == &quot;http://www.bloggersphera.com/search/label/Condicionais&quot;'>
<!--- CÓDIGO --->
</b:if>

data:blog.pageType - define em que tipo de página

• "item" - página individual dos posts;
• "index" - páginas "index": home, marcadores, busca, etc;
• "archive" - páginas dos arquivos por mês.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!--- CÓDIGO --->
</b:if>

data:blog.pageName - define em que nome de página

"NOME DA PÁGINA" - colocando o título da página.

<b:if cond='data:blog.pageName == &quot;Condicionais&quot;'>
<!--- CÓDIGO --->
</b:if>

Lembrando sempre que a grafia neste último caso deve ser idêntica à usada no blog.

É relativamente tranquilo usar essas tags (blog.pageName ou blog.url) para as páginas estáticas, quando você está alterando seu próprio template. Complica em templates para distribuição, pois você não sabe que título ou endereço a página do usuário terá.

Uma alternativa é usar condicionais com as tags allowComments ou showBacklinks, mas essas tags só funcionam dentro do widget Blog1.

Eu prefiro usar showBacklinks, pois existem usuários que desabilitam comentários em posts antigos. Só é necessário avisar o usuário que fará o download do template para desabilitar comentários e backlinks nessas páginas.

No último artigo sobre Condicionais na área de posts, montamos um código para 3 tipos de páginas: Home (com 2 códigos/estilos de posts), demais páginas index e páginas individuais dos posts.

Agora, vamos dividir o single-posts em dois, acrescentando uma classe para os posts das páginas individuais estáticas. Chamaremos a classe de wide-posts. Nos posts de páginas estáticas geralmente usamos apenas título e corpo do post, então serão esses os códígos que colocaremos para a classe wide-posts.

Não irei repetir todo o código, vamos partir de onde fecha a condicional para as páginas index e começa a single-posts:

</b:if> <!-- fecha o código condicional para as "todas as páginas, exceto as individuais dos posts"  -->

<b:else/> <!-- condicional: se não for a "todas as páginas, exceto as individuais dos posts" ou seja, se for a página individual de posts -->

    <div class='single-posts'>
<!-- AQUI FICAM OS CÓDIGOS PARA OS POSTS DAS PÁGINAS INTERNAS -->

<!-- Condicional: SE for "mostrar backlinks" diferente de "verdadeiro"  -->
<b:if cond='data:post.showBacklinks != &quot;true&quot;'>
<!-- AQUI FICAM OS CÓDIGOS PARA OS POSTS DAS PÁGINAS ESTÁTICAS -->
<div class='wide-posts'>
<style type='text/css'>
/* LOCAL PARA COLOCAR ESTILOS PARA OS CONTAINERS QUE ESTÃO FORA DA ÁREA DE POSTS, EXEMPLO: CONTENT-WRAPPER, MAIN-WRAPPER, SIDEBAR, ETC */
</style>

<a expr:name='data:post.id'/>

<!-- início do título do post -->
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
    </b:if>
<!-- fim do título do post -->

<!-- linha abaixo do título do post -->
    <div class='post-header-line-1'>
<!-- códigos para alinha abaixo do título do post -->
    </div> <!-- fecha a div class post-header-line-1 -->

<!-- início do corpo do post -->
    <div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/>
    </div> <!-- fecha a div class post-body entry-content -->

  <!-- fim do corpo do post -->

</div> <!-- fecha a  div class wide-posts -->

<b:else/> <!-- condicional: se não for "mostrar backlinks"  diferente de "verdadeiro", o código será o seguinte -->
<!-- AQUI FICAM OS CÓDIGOS PARA OS OUTROS POSTS DAS PÁGINAS INDIVIDUAIS -->

<!--- CÓDIGOS -->

</div> <!-- fecha a div class post-footer -->

</b:if> <!-- ATENÇÃO: feche a condicional para os single-posts -->

 </div> <!-- fecha a div class single-posts -->

</b:if> <!-- fecha os códigos condicionais -->

  </div> <!-- fecha a div class post hentry -->

<!-- fim do includable do post -->
</b:includable>

Tendo escrito o HTML, podemos então usar a classe para colocar estilos:

.wide-posts{
/* estilos para o post */
}

.wide-posts h3{
/* estilos para o título do post */
}

.wide-posts .post-body{
/* estilos para o corpo do post */
}

/* etc... */

Apesar de estarmos esperando para breve uma tag static para páginas estáticas no Blogger, tenho minhas dúvidas se essa tag nos oferecerá toda a liberdade que gostamos para personalizar nossos templates. Tomara que essa tag nos permita realmente criar páginas, e não seja apenas uma tag estática (desculpem o trocadilho) para 2 ou 3 páginas definidas pelo próprio Blogger.

Bem, com este artigo encerro a série sobre os códigos condicionais na área de postagens. Espero que vocês tenham entendido o conceito:




Depois de montado o código HTML, basta conhecer um pouco de CSS para criar templates com muitos, muitos estilos diferentes.

Quem quiser brincar, fazendo seus testes e experiências, segue o link para download de um arquivo em Bloco de Notas, com todo o código HTML do includable do post, descrito nesta série de tutoriais. Deixe depois nos comentários, o link de seu blog ou blog de testes para que todos possamos apreciar sua criatividade!

condicionais-post.txt

Leitura Recomendada - outras maneiras de criar páginas estáticas no Blogger:

• Blogger Sentral
• Blogging Tips
• Technically Easy

Imagem: Screenshot da página About de Jared Digital