Script Postagens Relacionadas Para Blogger

Até recentemente o blog não tinha postagens relacionadas no final da publicação, e eis que fui procurar algo que me ajudar. A maioria indica usar o LinkWithin, porém ele é feinho e eu queria algo que desse para personalizar mais.

Encontrei o Tutorial da Bruna, do Doce Timidez, e gostei bastante. Mas, impliquei com o tamanho e forma das imagens, tentei de toda forma aumentar e não consegui , o motivo é que a personalização das imagens e textos eram pelo javascript.

Ficará exatamente assim as postagens relacionadas, se você for ao final do post, verá que o meu está pouca coisa diferente, apenas a cor e fonte do título, que são as mesmas do título dos posts.

Chega de enrolação e vamos ao que interessa:

Não esqueça de fazer backup (salvar uma cópia) do seu tema antes para o caso de algo der errado!

1. Vá ao Modelo do seu template, logo em seguida em Editar HTML.

2. Procure por </head>. Ao encontrar cole o código abaixo em cima dessa linha (o comando CTRL + F auxilia a fazer buscas na páginas, mas você precisa clicar dentro da caixa de texto com o código HTML).

<!-- Script Postagens Relacionadas Inicio--> 
<script type='text/javascript'>
$(document).ready(function() {$('.resizethumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's500-c' );});});
</script>
<script src='http://static.tumblr.com/r0zjsuz/LGRnkytsj/post-relacionado-blogger.js' type='text/javascript'/>
<!-- Script Postagens Relacionadas Final -->

Esse codigo é o script para funcionar as postagens relacionadas, mais um script para aumentar o tamanho das thumbs do blogger, pois elas são por padrão 72px por 72px, quando eu aumentei o tamanho, as imagens bugaram, por isso precisa desse script também.

3. Agora procure por ]]></b:skin> e cole o código abaixo em cima dele.

/*CSS Postagens Relacionadas Inicio*/
#estiloimg{
  width:120px; /*Largura da imagem*/
  height:120px; /*Altura da imagem*/
  border-radius:50%; /*Imagem redonda - Altere de 50 a 100*/
}
.estilotexto{
  width:120px; /*Define a largura máxima da caixa do texto*/
  text-align:center; /*Alinha o texto ao centro*/
  padding-left:3px; /*Define a distancia a esquerda*/
  height:65px; /*Define a altura do texto*/
  margin: 3px 0pt 0pt; /*Margens*/
  padding: 0pt; /*Distancia em textos*/
  font-size: 12px; /*tamanho da fonte*/
  line-height: normal; /*Altura da linha*/
}
#related-posts {
float:center; /*Alinhado ao centro*/
text-transform:none; /*Texto sem nenhuma transformação*/
height:100%; /*Altura total dos posts relacionados*/
min-height:100%; /*Altura mínima*/
padding-top:5px; /*Distancia do topo*/
padding-left:5px; /*Distancia da esquerda*/
}
#related-posts h2{
font-size: 1.6em; /*Tamanho da fonte do titulo*/
font-weight: bold; /*Estilo em negrito*/
color: black; /*Cor do titulo*/
font-family: Georgia, “Times New Roman”, Times, serif; /*Fonte*/
margin-bottom: 0.75em; /*Margem de baixo*/
margin-top: 0em; /*Margem do topo*/
padding-top: 0em; /*Distancia do topo*/
}
#related-posts a{
color:black; /*Cor dos links*/
}
#related-posts a:hover{
color:black; /*Cor do link quando passa o mouse em cima*/
}
#related-posts img{
margin: auto; /*Margem*/
}
#related-posts img:hover{
opacity:0.7; /*Opacidade na imagem quando passa o mouse*/
-webkit-transition: background-color 2s linear; /*Efeito de transição na opacidade*/
-moz-transition: background-color 2s linear; /*Efeito de transição na opacidade*/
-o-transition: background-color 2s linear; /*Efeito de transição na opacidade*/
transition: background-color 2s linear; /*Efeito de transição na opacidade*/
}
/*CSS Postagens Relacionadas Final*/

OBS:  Modifique a linha "border-radius:50%; /*Imagem redonda*/" até 100% se quiser uma imagem quadrada.

O código está todo comentado, explicando o que cada coisa faz. Sei que tem pessoas que já sabem e vão pensar que isso é um saco, eu sei porque já pensei isso, porém quando eu estava aprendendo a anos atrás esses códigos todos explicadinhos me facilitavam muito a vida.

4. Agora a ultima parte, procure por 'post-footer-line post-footer-line-1'. Normalmente tem dois códigos iguais a esse, no meu tema é o segundo, já no seu não sei. Na dúvida coloca em um se não for, desfaz e coloca no outro.

<!-- Postagens Relacionadas Inicio -->
<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=6&quot;' type='text/javascript'/>
</b:if>
</b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Você também pode gostar&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
<!-- Postagens Relacionadas Final -->

Para as postagens relacionadas aparecer na pagina inicial retire a parte do código que está em rosa

Bom, é isso pessoal! Espero que o tutorial tenha ficado fácil de entender, tentei explicar da melhor forma possível. Qualquer duvida deixe nos comentários.

Gostou? Então se inscreva no canal do YouTube e receba mais novidades.

Fonte: Site Doce Timidez, Blogger Plugins (Postagem Original do Código)
Tags: Blogger, Postagens relacionadas no blogger, Script postagens relacionadas no blogger