Postagens relacionadas simples [004]

Hey! Hey! Prontos para mais um tutorial? Hoje venho trazer de uma categoria que raramente posto, adicionar um widget de postagens relacionadas, no rodapé do blog. O modelo é simples, ótimo para usar como base e personalizar. Seu código é pequeno e muito fácil de se entender e personalizar. Se ainda assim tiver alguma dificuldade, deixe um comentário para que eu possa auxilia-lo. Então sem mais demora, vamos ao tutorial!

1. Vá ao HTML do seu blog e procure pela linha </head>, e acima dele cole o código abaixo:

Códigos

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' />
<!-- remove --></b:if><!--Related Posts with thumbnails Scripts and Styles End-->

Verde: Caso queira que as postagens relacionadas também apareça no inicio, remova as partes marcadas em verde.
Vermelho: Essa parte é o que define a altura e largura do widget.
Azul: Essa parte altera a cor e os títulos do widget

2. Ainda dentro do HTML, procure pelo trecho abaixo. Você pode obter o resultado do mesmo código duas vezes, você para no segundo:

Códigos

<div class='post-footer'>

Agora acima do código encontrado cole:

Códigos

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerwidgetgenerators.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6CJyEI8SswpgCDi5M9-e9SZYe9Nkwm_W2DNJrQ1H_8VbQ4JiEGuLX41v_me6V-OlHq31XWNV3X5iaz9MPVKo_TfMMnTGeSOS8M7KbAj4UC75YwRg4JcjhryhxkFHbcHzthLQsX1sGT_-E/s1600/best+blogger+tips.png'/></a>
</b:if>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Vermelho: É o número de postagens a exibir.
Azul: Título do widget.
Verde: Remova essas linhas se desejar que o widget apareça na pagina inicial também.

Créditos: Widget Generators