Tecnologia: Posts Relacionados

Consegui colocar os posts relacionados aqui no blog, mas foi uma luta de dois dias hahaha. Resolvi trazer aqui para vocês, pois acho um recurso muito legal! Confira abaixo o passo-a-passo:

1. Vá em  Modelo  e clique em Editar HTML (você pode copiar o conteúdo e salvar, caso alguma coisa dê errado):

2. Aperte ctrl + f para abrir a busca no código e digite </head> e depois enter:

3. Copie e cole o código abaixo antes do código que você acabou de buscar:

  <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'/>

4. Agora na busca digite ]]></b:skin> :

5. Copie e cole o conteúdo abaixo antes desta tag que você encontrou:

/*Posts relacionados CSS*/ #estiloimg{ width:130px; height:130px; } .estilotexto{ width:130px; text-align:center; padding-left:3px; height:65px; margin: 3px 0pt 0pt; padding: 0pt; font-size: 14px; line-height: normal; } #related-posts { text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; color: black; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:#444; -webkit-transition: all 350ms ease-in-out; -moz-transition: all 350ms ease-in-out; -ms-transition: all 350ms ease-in-out; -o-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out; opacity:0.7; } #related-posts img{ margin: auto; border:1px solid black; } #related-posts a:hover{ opacity:1; } .post-footer-line-1{ border-top: 1px solid #fbd8e8; }

6. Encontre agora o seguinte <div class='post-footer-line post-footer-line-1'> (existem duas tags iguais, teste para saber qual é a certa, a minha foi a segunda):

7. Cole antes do código encontrado o conteúdo abaixo:

<!--Codigo Artigos Relacionados Inicio--> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <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: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=4; var relatedpoststitle="Confira também:"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div> <div style='clear:both'/> <!--Codigo Artigos Relacionados Final-->

Agora é só salvar o modelo e pronto! 

Gostaram? Beijos :*