Tutorial: Footer do post personalizado
segunda-feira, janeiro 21, 2013Vá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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=80&action=like&colorscheme=light"' 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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 == "NOME DO AUTOR 1"'>
<div class='fotoautor'> </div>
</b:if>
<b:if cond='data:post.author == "NOME DO AUTOR 2"'>
<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='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=80&action=like&colorscheme=light"' 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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 melhorAltere o código do jeito que preferir.Em caso de dúvidas ou erros é só deixar no comentário!
Uma garota se aventurando pela blogosfera.
Uma leonina romântica que sonha alto demais. Apaixonada por arte, séries, design, fotografia e que sonha em viajar pelo mundo. Blogueira nas horas vagas e futura arquiteta 
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.