Como colocar recursos nos posts via HTML

Como colocar recursos nos posts via HTML

6 10 99
Como colocar recursos nos posts via HTML 10 6 99
filetype_htmlAntes de mais nada, quero adiantar que este post é mais voltado a usuários que já possuem alguma noção sobre HTML e CSS. A idéia é auxiliá-los a colocar novos recursos em seus templates, mostrando onde ficam alguns códigos essenciais e exclusivos do Blogger.
Abordaremos os códigos que são responsáveis pela área de postagem, através das “divs”, que são tags HTML que delimitam espaços dentro de um layout.

Saiba tudo sobre o novo editor HTML do Blogger

Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id. Fonte: HTML.net
Para incluir anúncios, mensagens, botões do Twitter  ou quaisquer outros códigos/recursos nas áreas que englobam os posts, deve-se seguir estes critérios:
NA PRIMEIRA LINHA DO RODAPÉ DOS POSTS
<div class='post-footer-line post-footer-line-1'>
Código
</div>
NA SEGUNDA LINHA DO RODAPÉ DOS POSTS
<div class='post-footer-line post-footer-line-2'>
Código
</div>
ABAIXO DO TÍTULO
Código
<div class='post-header-line-1'>
ENTRE O TÍTULO E OS POST
<div class='post-header-line-1'>
Código
NO FINAL DO POST
Código
<div class='post-footer'>
Isso significa que, por exemplo, se eu quiser colocar um anúncio entre o título do post e o texto, eu devo procurar dentro do HTML do template por:
<div class='post-header-line-1'>
E colocar o código do anúncio logo embaixo dessa linha. Vejam estas imagens:
código-anuncios
anuncios
Percebam que o código do anúncios foi inserido entre o título e o post, ou seja, logo embaixo de <div class='post-header-line-1'>
Para encontrar as divs dentro do HTML, é preciso marcar a caixa “expandir modelos de widgets” e usar o Ctrl+F do teclado.
procurando-as-divs
Passemos agora para uma outra imagem, também aqui do Dicas Blogger:
classes
A área onde aparecem o meu nome, data e marcadores corresponde a <div class='post-header-line-1'> e fica logo embaixo do título da postagem. Nesse caso, ao contrário do anterior, o código foi inserido ANTES da linha 'post-header-line-1'.
Já a área onde aparecem os ícones de compartilhamento e os comentários, correpondem a <div class='post-footer-line post-footer-line-1'>, que é a primeira linha do rodapé dos posts, também chamado de post-footer.
Para modificar a disposição do nome do autor, marcadores, data e link para os comentários, basta ir movendo os códigos correspondentes, dentro das divs.
AUTOR DOS POSTS
<span class='post-author'>
          <b:if cond='data:top.showAuthor'>
            <data:top.authorLabel/> <data:post.author/>
          </b:if>
        </span>   
MARCADORES
<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:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name +  &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if></b:loop>
          </b:if>
        </span>
A DATA
<b:if cond='data:post.dateHeader'>
<span class='date-header'>em <data:post.dateHeader/></span>
</b:if>
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 Comentário
    <b:else/> <data:post.numComments/> <data:top.commentLabelPlural/> </b:if> </a>
    </b:if>
    </b:if>
    </span>
Vamos para um exemplo prático. Supondo que eu queira colocar os marcadores logo abaixo do título das postagens. Nesse caso, eu irei deslocar o código dos marcadores, para cima da div <div class='post-header-line-1'>
exemplo
Para aplicar estilos em CSS, é só encontrar o seletor de cada um deles. Exemplo:
<span class='post-comment-link'>
correspondente:
.comment-link
Claro que tudo isso irá variar de template para template. O segredo é, usando o Crtl+F, procurar a linha de códigos que mais se aproxima das que postei aqui e testar SEMPRE em um blog de testes, para evitar de fazer bobagem no blog principal.
Acessem os artigos abaixo, que mostrarm ótimos recursos que podem ser empregados, usando o tutorial de hoje:
7 Comments
Comments
  1. Essa postagem era exatamente tudo o que eu sempre quis... Sensacional!!!
    Inenarravelmente: ABRIGADUUUÚ!!!

    ResponderExcluir
  2. Digo o mesmo que a vitalves acima!

    Nossa, faz meses que estou tentando mexer nessas coisas e não conseguia, agora tudo se resolveu em alguns minutos, impressionante!

    Muito obrigado!

    ResponderExcluir
  3. Excelente artigo, este vai solucionar a vida de muito blogueiro que curte editar seu template, parabéns!

    ResponderExcluir
  4. Nossa Ju!

    Que posta pra lá de bacana!!! :D

    Era tudo o que eu queria tb.

    E já tenho 'brincado' muito com html, e com o tanto que aprendo por aqui. Não sou profissional em nada disso, aliás, meu blog nada tem a ver com isso, mas é uma delícia conseguir compreender e 'dominar' essa linguagem que parece 'grego' ;)
    Baixei mais um template seu (Template Cinema), e estou personalizando, tá ficando lindooooo!
    Assim que ficar pronto te mostro. E tudo ali, a maior parte eu aprendi aqui.

    ps: quanto ao FB, já está no forno tá rsrs

    Beijos Ju, este tb já vai para a minha pastinha com todos os teus links que eu mais uso.

    ResponderExcluir
  5. clap clap clap clap
    Parabéns pelo post! Como sempre, direto ao ponto.

    ResponderExcluir
  6. É velho, HTML e CSS é suave, o foda mesmo é que o blogger não documenta muito bem seus comandos internos.

    A tag isFirsPost por exemplo não se acha nada sobre ela la.

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top