Tutorial: Footer do post personalizado

segunda-feira, janeiro 21, 2013

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='http://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 65x65 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='http://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 65x65!


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'.

Clique para visualizar melhor

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

Leia Também

0 comentários

Os comentários desse blog são moderados, portanto só serão publicados após aprovação. Comentários com propagandas, divulgações e comentários pedindo para seguir não serão aprovados. Deixe o link do seu blog caso queira que eu retribua algo. Obrigada.

Instagram

Subscribe