Tutorial: Footer do post personalizado

Vários leitores do blog já tinham me pedido este tutorial, então finalmente consegui fazer um tutorial de um jeito “fácil” de entender. Bom, hoje eu vou ensinar a fazer o antigo footer do blog (exemplo abaixo). Esse tutorial é simples, mas tem que entender um pouquinho sobre HTML.


Para fazer o tutorial eu usei como modelo o Template Simples do Blogger (esse daqui). O código também é aplicável para aqueles que possuem mais de um autor.

Marque a opção Expandir modelos de widgets, e procure por:

<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'><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> <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' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <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> 

Apague até o < /span> e depois cole o seguinte código:

<div class='post-footer'>
<div class='fotoautor'> </div>
    <div class='post-footer-line post-footer-line-1'><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><br/> <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' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <br/>
<div style='float: left; margin: 1px;display: inline;'><a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a><script src='https://platform.twitter.com/widgets.js' type='text/javascript'/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px'/></div>

<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> 
<div id='clear'> </div>

Procure por .post-footer no CSS apague-o e cole o código seguinte:

.post-footer {
border-top: 1px solid #ccc;
padding-top:10px;
margin: 2px 10px 2px 10px;
font: normal 10px "arial";
text-transform: uppercase;
line-height: 20px;
}
.fotoautor {
background:url('URL DA FOTO'); 
width:65px;
height:65px;
float:left;
margin: 2px 5px 2px 2px;
}
.comment-link {
float: right;
font: italic 15px 'georgia';
margin- top: -15px;
text-transform:none;
}
.post-labels {
display:block;
 border-top: 1px dotted #ccc;
 padding:2px;
margin-top: -10px;font-size: 10px;
}
.post-timestamp {
margin-left:1px;
}
#clear {clear:both;}

A foto precisa ter 65×65 de tamanho! Vá ajustando conforme as suas necessidades.

Repita o primeiro passo, o de procurar e apagar o código. Mas ao em vez de colar o código acima cole o código seguinte:

  <div class='post-footer'>
<b:if cond='data:post.author == &quot;NOME DO AUTOR 1&quot;'>
<div class='fotoautor'> </div>
</b:if>
<b:if cond='data:post.author == &quot;NOME DO AUTOR 2&quot;'>
<div class='fotoautor2'> </div>
</b:if>
    <div class='post-footer-line post-footer-line-1'><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><br/> <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' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <br/>
<div style='float: left; margin: 1px;display: inline;'><a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a><script src='https://platform.twitter.com/widgets.js' type='text/javascript'/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px'/></div>

<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> 
<div id='clear'> </div>

Você deve ir aumentando de acordo com a quantidade de autores que o seu blog possui, tanto no código como no CSS (repetindo o código em negrito).

No css, procure por .post-footer apague e cole o código:

.post-footer {
border-top: 1px solid #ccc;
padding-top:10px;
margin: 2px 10px 2px 10px;
font: normal 10px "arial";
text-transform: uppercase;
line-height: 20px;
}
.fotoautor {
background:url('URL DA FOTO'); 
width:65px;
height:65px;
float:left;
margin: 2px 5px 2px 2px;
}
.fotoautor2 {
background:url('URL DA FOTO'); 
width:65px;
height:65px;
float:left;
margin: 2px 5px 2px 2px;
}
.comment-link {
float: right;
font: italic 15px 'georgia';
margin- top: -15px;
text-transform:none;
}
.post-labels {
display:block;
 border-top: 1px dotted #ccc;
 padding:2px;
margin-top: -10px;font-size: 10px;
}
.post-timestamp {
margin-left:1px;
}
#clear {clear:both;} 

A foto deve ter o tamanho de 65×65!

Esse passo não é obrigatório! Ele serve para deixar a data com o dia da semana, mês, dia e horário – como o da foto. Se não quiser alterá-lo ele ficara apenas com a hora da postagem.

Vá em Layout > Postagens do blog > Editar

Irá abrir uma nova janela. Você irá no 3º item de ‘Opções da página de postagem’ como na foto abaixo e marcar a opção que contém o dia da semana, mês, dia e hora. Depois altere a palavra ‘às’ que fica em frente para ’em’.

Altere o código do jeito que preferir.Em caso de dúvidas ou erros é só deixar no comentário!