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.
<!-- Postagens Relacionadas Inicio -->
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' 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="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Você também pode gostar";
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
