Personalizar e Organizar Rodapé do Post

back, young, beautiful, hair, clothes

E aí galera tudo bem? A pedido via ASK.FM, vou ensinar como personalizar o rodapé da postagem do Blogger, por isso, clique em Leia Mais e descubra como!


1ºPasso: Estilo ao Rodapé (Post-footer)


Vá em Modelo > Editar HTML e procure por .post-footer {. Apague este código e no lugar dele cole:

.post-footer {  /* GERAL */
color: #1c1c1c; /* COR DA FONTE */
font:Arial, sans-serif !important; /* FONTE */
font-size: 13px; /* TAMANHO DA FONTE */
letter-spacing:1px;  /* NÃO ALTERE */
margin: 6px;  /* MARGEM EXTERNA */
padding:2px; 4px 2px 4px;  /* MARGEM INTERNA (ACIMA, DIREITA, ABAIXO, ESQUERDA) */
text-transform:none;  /* EFEITO DA FONTE */
font-weight:bold;  /* EFEITO NEGRITO NA FONTE */
background-color: #000;  /* COR DE FUNDO DO POST FOOTER */
}
.post-labels a {  /* LINKS DOS MARCADORES (NORMAL) */
color:#fff;  /* COR DA FONTE */
background-color:#000;  /* COR DE FUNDO (APAGUE SE NÃO QUISER)  */
text-decoration:none;  /* SEM EFEITO UNDERLINE (SUBLINHADO DO LINK) */
padding:2px; 4px 2px 4px;  /* MARGEM INTERNA (A MESMA DO POST FOOTER) */
font-weight:bold;  /* EFEITO NEGRITO NA FONTE */
}
.post-labels a:hover {  /* LINK DOS MARCADORES (HOVER) */
color:#8B0000;  /* COR DA FONTE */
padding:2px; 4px 2px 4px;  /* MARGEM INTERNA (A MESMA DO POST FOOTER) */
text-decoration:underline;  /* EFEITO SULINHADO (UNDERLINE) */
background-color:#000;  /* COR DE FUNDO DO LINK */
}
.post-comment-link .post-author a { /* LINKS DOS COMENTÁRIOS E AUTOR (NORMAL) */
background-color:#000; /* COR DE FUNDO (APAGUE SE NÃO QUISER)  */
padding:2px; 4px 2px 4px;  /* MARGEM INTERNA (A MESMA DO POST FOOTER) */
display:inline; /* NÃO ALTERE */
}
.post-comment-link .post-author a:hover {  /* LINK DOS COMENTÁRIOS E AUTOR (HOVER) */
color:#8B0000;  /* COR DA FONTE */
padding:2px; 4px 2px 4px;  /* MARGEM INTERNA (A MESMA DO POST FOOTER) */
text-decoration:underline;  /* EFEITO SULINHADO (UNDERLINE) */
background-color:#000;  /* COR DE FUNDO DO LINK */
}

Clique em  SALVAR  e veja se está tudo ok.

EXTRA

Você pode personalizar os links ou o começo do post footer com um mini-gif! Basta trocar o background-color do código e no lugar dele colar:

background: url(URL_DA_IMAGEM) no-repeat left center; /* IMAGEM A SER USADA */
padding-left:15px; /* COLOQUE UM VALOR UM POUCO MAIOR DO QUE A LARGURA DA IMAGEM USADA */

O estilo acima pode ser aplicado tanto nos links do post-footer quanto no próprio post-footer.

Se quiser que seja uma imagem, você substitui o background-color por:

background: url(URL_DA_IMAGEM) repeat; /* IMAGEM A SER USADA */


2ºPasso: Organizando o Post-footer manualmente


Tudo feito? Mas e se tudo estiver desorganizado o que fazer? O Blogger não dá muitas opções de organização das opções do Post-footer, então é melhor fazer isso manualmente. Mas cuidado, isso requer bastante atenção!

Procure no seu HTML por: <div class='post-footer-line post-footer-line-1'>.

Abaixo desta tag, você irá encontrar os elementos que procuramos, que são:

Obs.: Se você não achar os elementos abaixo, depois desta tag, você pode encontrá-los separados ou juntos nas tags: <div class='post-footer'><div class='post-footer-line post-footer-line-2'/>,  <div class='post-footer-line post-footer-line-3'/>, <div class='post-header'> e <div class='post-header-line-1'/>. O importante é que todos fiquem na mesma "div" para que eles fiquem na mesma linha. Estando na linha de class='post-footer...' eles estarão no rodapé, estando na "div" de class='post-header... ' estes estarão logo abaixo do título da postagem (clique aqui e veja o tutorial mover e personalizar os links do post-footer para o post-header). 

O Link do Autor:

<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span>

O Link dos 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:loop>
        </b:if>
      </span>

E o Link dos Comentários:

<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>:
              </a>
            </b:if>
          </b:if>
        </b:if>
      </span>

Obs.: Em <data:post.commentLabelFull/>, apague os dois pontos que vem em seguida caso não deseja que eles apareçam no link do post-footer.

Você pode mover as posições dos links, por exemplo: "Desejo que o link de comentários seja o primeiro da linha": Então mova o código do link dos comentários para primeiro, ou seja, depois da tag <div class='post-footer-line post-footer-line-1'> (ou outra se desejar).

Clique em  SALVAR  e veja se está tudo ok.




3º Passo: Editar Visualização do Post-footer


Como vocês já devem ter notado, o meu post-footer só aparece quando se abre a página da postagem. Mas como fazer isso? É simples. É o que veremos agora.

Volte aos códigos do Passo 2. Veja como eu fiz:

Exibir Somente na Página de Postagens

Antes da linha  <div class='post-footer'>, eu colei este código:

<b:if cond='data:blog.pageType == "item"'>

Este código tem a função de exibir qualquer coisa, mas somente na página de postagens, por isso ele é nosso aliado nesta luta para organização u_u'

Ao fim da "div" do post-footer cole isto: </b:if>. Preste atenção nesta parte para ver se colou no lugar certo, para evitar um erro no XML do seu blog!

Clique em  SALVAR  e veja se está tudo ok.


Não Exibir nas Páginas Estáticas


Um grande problema que as vezes ocorre, é quando colocamos um fundo, ou um mini-gif e acessamos nossas páginas estáticas e eles aparecem, para esconder o post-footer nessas páginas é bem simples, sabia?

Procure por </head> e ACIMA desta tag cole:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
.post-footer {
display:none;
visibility:hidden;
}
</style>
</b:if>

Clique em  SALVAR  e pronto!

Bem, é este big tutorial que estou ensinando, espero que esteja tudo ok, que vocês possam ter compreendido bem e claro, conseguido personalizar! Até o próximo tuto ;D