Conheça 10 códigos uteis para a criação de seu próprio template para Blogger

No universo de criação de sites, nem sempre temos organização para guardar os trechos de códigos que podemos reutilizar, mas quando se trata do Blogger, existem algumas tags especificas fornecidas pela Google que fazem funções especificas que podem ser muito uteis caso esteja pensando em criar ou modificar seu próprio tema. Basta usar da criatividade e usar as funcionalidades fornecidas, e mandar ver!

Ah, antes que eu esqueça, não e preciso decorar nada, basta salvar essa pagina nos favoritos para quando precisar usar de novo! As tags que vou deixar aqui abaixo são apenas algumas de todas que você pode usar para melhorar a parte de postagens de seu template.

1º dica - Hora da postagem

<span class='post-timestamp'>
<b:if  cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link'  expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr  class='published'  expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

2º dica - Dia da postagem

<b:if  cond='data:post.dateHeader'>
<h2  class='date-header'><data:post.dateHeader/></h2>
</b:if>

3º dica - Número de comentários

<span class='post-comment-link'>
<b:if cond='data:blog.pageType !=  &quot;item&quot;'>
<b:if  cond='data:post.allowComments'>
<a class='comment-link'  expr:href='data:post.addCommentUrl'  expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments  == 1'>1  <data:top.commentLabel/><b:else/><data:post.numComments/>  <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

4º dica - Marcadores usados na postagem

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels'  var='label'>
<a expr:href='data:label.url'  rel='tag'><data:label.name/></a><b:if cond='data:label.isLast  != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

5º dica - Autor da postagem

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span  class='fn'><data:post.author/></span>
</b:if>
</span>

6º dica - Icone recomendar postagem para um amigo

<!--  email post links -->
<b:if  cond='data:post.emailPostUrl'>
<span class='item-action'>
<a  expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt=''  class='icon-action' height='13'  src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

7º dica - Icone editar postagem

<!-- quickedit pencil -->
<b:include data='post'  name='postQuickEdit'/>

8º dica - Texto explicativo antes do fomulário de comentários

<p  style='margin-left: 56px;'><data:blogCommentMessage/></p>

9º dica - Votos de qualificação da postagem

<span  class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0'  cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell'  nowrap='nowrap' valign='top' width='1%'>
<span  class='reactions-label'>
<data:top.reactionsLabel/></span>&#160;</td>
<td><iframe  allowtransparency='true' class='reactions-iframe'  expr:src='data:post.reactionsUrl' frameborder='0' name='reactions'  scrolling='no'/></td>
</tr></table>
</b:if>
</span>

10º dica - Backlinks

<!--  backlinks -->
<span class='post-backlinks  post-comment-link'>
<b:if cond='data:blog.pageType !=  &quot;item&quot;'>
<b:if  cond='data:post.showBacklinks'>
<a class='comment-link'  expr:href='data:post.url +  &quot;#links&quot;'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>

Para inserir algum código acima, faça login no Blogger, acesse “Tema” na barra lateral e apos isso clique em “Editar HTML”. Para melhor controle do que vai fazer, marque a caixa “Expandir modelos de widgets”.

Você deve usar qualquer código acima entre:

<b:includable id='post' var='post'>

e

</b:includable>

Dentro dessa limitação não existe lugar específico para inserir nada. Então para quem não conhece é comum colocar no lugar errado. Meu conselho é: Faça backup e teste! Testar é a palavra-chave que vai fazer você aprender a criar seu próprio template. Se você tem medo de testar, acredite... Não vale a pena nem começar a trabalhar com os códigos.

Abraços

Share This :