Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1512971086
Vida do cache: 1513014286
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

Blogger Criando um template layouts

10 Códigos específicos para criação de um template para Blogger

 Para desenvolver um template para Blogger não precisa mais do que criatividade, vontade e o básico de conhecimento em HTML.
Quando digo criar, é apenas modificar! Pois não há necessidade alguma em decorar e reescrever todos os códigos específicos do Blogger, basta criar seu próprio layout com um esqueleto básico pronto.
Ninguém precisa memorizar tantos códigos. Por isso quando descubro algo novo do Blogger (codificação), anoto no bloco de notas e salvo para quando eu precisar de novo, não ficar perdido que nem louco atrás de algo que já usei.

Então hoje, vou mostrar algumas funções bem básicas para usar em seu template dentro da parte das postagens.
1) 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) Dia da postagem

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

3) 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) 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) 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) 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) Icone editar postagem

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

8) Texto explicativo antes do fomulário de comentários

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

9) 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) 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, entre em “Design” -> “Editar HTML”. 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



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

11 Comentários

  1. JCMais disse:

    Parabéns, mal voltou e já nos deixa com um post de qualidade.

  2. OacAdm disse:

    Otima postagem. Creio que muitos como eu estavam procurando… =D

    Parabéns!!

  3. Vládia Queiroz disse:

    olá, eu preciso fazer uma modificação no meu blog e não sei como. quero tirar aquela barra final que fica com palavra: início. sabe como faço isso? se souber escreve pra mim: vladiaqueiroz@gmail.com
    obrigada

  4. Yaplo_Rock disse:

    E o código para o Titulo?

  5. Márlon Silva disse:

    Paulo, aproveitando a dicas, vc poderia explicar onde fica o código que define a cor padrão para todos os links do blog e tb a cor que fica quando se passa o mouse sobre os links. Não estou conseguindo encontrar o código em que posso mudar a cor dos links Sair e Inscrever-se por email.

  6. XAXÁ DAS ROCAS disse:

    ESTAVA COM PROBLEMA COM O Nº DE COMENTÁRIOS E O AMIGO EM MUITO ME AJUDOU.
    MUITO OBRIGADO.

    JOÃO XAVIER

  7. mayla cristine disse:

    Muito bom o post,me ajudou bastante^^

  8. Paulo Estevão disse:

    Para a cor do link:
    a#subscribeButton {

    }

    Para mudar ao passar o mouse no link:
    a:hover#subscribeButton {

    }

  9. Download de Filmes Grátis disse:

    Ótimo post, me foi muito útil. Obrigado.
    O site é muito bom.
    Meus parabéns!!!
    Estou começando com um site, se precisar de parceria conte comigo, se der acesse meu site: http://downloaddecursosgratis.blogspot.com.

    Grande abraço a toda equipe.

  10. XAXÁ DAS ROCAS disse:

    Amigo Paulo Estevão.

    Peço sua ajuda para o que explico a seguir:

    Troquei o modelo do Blog e acontece que alguns textos descritivos nas minhas postagens, assumiram uma cor igual ao fundo e não aparecem (são muitas postagens). Gostaria que o amigo me ensina-se a deixar todos os meus textos de postagens na cor Preta (inclusive os que hoje não aparecem que devem estar Brancos)
    Muito Obrigado.

    João Xavier

  11. Tauã Soares disse:

    tem como mudar só os comentarios ?
    tipo eu quero botar uma imagem no lugar onde diz comentarios.
    se poder me ajudar manda e-mail para taualobao@gmail.com
    valeu.Belo Post

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.