Postagens relacionadas no blogger

Olá, tudo bem?

O post hoje é um tutorial (passo-a-passo) e isso é algo meio louco, porque eu nunca pensei que faria um! Entendo do assunto, mas não era algo que eu tinha pensando em trazer para o blog.

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 Enjoy the Little Things, e gostei bastante. Mas, impliquei com o tamanho das imagens, tentei de toda forma aumentar e não consegui , o motivo é que a personalização das imagens e textos eram pelo javascript.

Então, com a toda a insistência do mundo, editei o javascript e ficou lindo, fiquei muito feliz com o resultado. E como encontrei alguns pequenos problemas nas postagens relacionadas, resolvi facilitar não só a minha vida, mas a sua também fazendo esse tutorial mostrando algumas alterações que fiz!

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 meus 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 tema, logo em seguida em editar HTML, e 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 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'/>

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.

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

/*Posts relacionados CSS*/
#estiloimg{
  width:120px; /*Largura da imagem*/
  height:120px; /*Altura da imagem*/
  border-radius:50%; /*Imagem redonda*/
}

.estilotexto{
  width:120px; /*Define a largura maxima da caixa do texto*/
  text-align:center; /*Alinha ao centro*/
  padding-left:3px; /*Define a distancia a esquerda*/
  height:65px; /*Define a altura*/
  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 minima*/
padding-top:5px; /*Distancia do topo*/
padding-left:5px; /*Distnacia 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; /*Margin 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; /*Margin*/
}

#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*/
}

/*Final posts relacionados CSS*/

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.

3º) 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.

<!--Codigo Artigos Relacionados 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'/>
<!--Codigo Artigos Relacionados Final-->

Para as postagens relacionadas aparecer na pagina inicial retire a parte do codigo que está em negrito.

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

Até a próxima!

Acompanhe o Doce timidez nas redes sociais!
Twitter | Facebook | Instagram | Bloglovin | Youtube | Snapchat {docetimidez}