Blogger: Postagens relacionadas (Leia também) | Follow your dreams
Blogosfera

Blogger: Postagens relacionadas (Leia também)

Oi pessoal, como estão?

Após um tempinho sumida, voltei trazendo pra vocês um dos tutoriais mais pedidos de todos os tempos: as postagens relacionadas. Fica mais ou menos assim (lembrando que fontes personalizadas é outro tutorial, pesquisem na lupa que já postei alguns):

BloggerPostsRelacionados1

  • 1 – Pesquise por <head> e na linha ABAIXO cole o seguinte código:

<script type=’text/javascript’>
$(document).ready(function() {$(&#39;.resizethumbnail&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s500-c&#39; );});});
</script>
<script src=’http://yourjavascript.com/52931313061/postsrelacionados.js’ type=’text/javascript’/>

 

  • 2 – Pesquise por ]]></b:skin> e na linha ACIMA cole o seguinte código:

/* Posts Relacionados
———————————————–*/
#related-posts {
float: center;
text-transform: none;
height: 100%;
min-height: 100%;
padding-left: 15px;
margin-top: -10px;
}
#related-posts h2 {
font-size: 20px;
font-weight: bold;
color: #000;
font-family: Georgia, serif;
margin-bottom: -10px;
padding-left: 245px;
}
#related-posts a {
color: #000;
}
#related-posts a:hover {
color: #000;
background: #dfdfdf;
}
#related-posts img{
margin: auto;
}
#imagem {
width: 125px;
height: 125px;
border-radius: 1000px; /*Retire essa linha se quiser as imagens quadradas*/
}
#texto {
width: 125px;
text-align: center;
padding-left: 3px;
height: 65px;
margin: 3px 0px 0px;
padding: 0px;
font-size: 14px;
line-height: normal;
}

 

  • 3 – Agora você precisa localizar no seu template o espaço em que as postagens relacionadas serão inseridas, pois cada template tem sua nomenclatura. O mais comum é o <div class=’post-footer’> e dentro dele podem existir as linhas 1, 2, 3 etc., que seriam:

Linha 1: <div class=’post-footer-line post-footer-line-1′>
Linha 2: <div class=’post-footer-line post-footer-line-2′>
Linha 3: <div class=’post-footer-line post-footer-line-3′>

Você é quem vai decidir onde deseja colocar. Se for em cima, coloque o código a seguir como primeiro elemento da linha 1, se for embaixo, coloque-o como último elemento da linha 3. Entendeu?

O código é:

<!– Posts Relacionados –>
<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>
<script type=’text/javascript’>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Leia também:&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style=’clear:both’/>
<!– Posts Relacionados –>

Observação: Se existirem duas linhas iguais no template, cole esse código abaixo das duas.

EXEMPLO: Eu coloquei como primeiro elemento da linha 2, olha só como ficou:

BloggerPostsRelacionados2

 

  • 4 – Agora é só salvar e conferir se deu certo. Lembrando que as postagens relacionadas só aparecem na página do post, não aparecem na página inicial e nem nos marcadores.

 

Não deu certo?

Só apareceu 1 postagem relacionada? Significa que não há outras postagens com o mesmo marcador. O “postagens relacionadas” busca pelas postagens que tem o mesmo marcador que a postagem em questão.
Não apareceu nada? As postagens relacionadas só aparecem em blogs públicos.

 

Qualquer dúvida, comentem! Emoji5

 

Esse tutorial foi alterado por mim, o original pode ser encontrado no blog BloggerPlugins.org.

Tags : Blogger

44 Comentários

      1. “Se for em cima, coloque o código a seguir como primeiro elemento da linha 1, se for embaixo, coloque-o como último elemento da linha 3″ essa parte em particular da postagem que eu nao entendi bem. beijo

  1. Oiiiii, adorei esse tutorial,havia tempos que tava procurando. Mas eu estou com uma dúvida. Como faço para colocar imagem de “Leia mais”, se você puder me ajudar, ficaria muito feliz. Amo suas postagens.

    Tem uma outra sugestão, acho super legal aquelas caixas de texto que colocam nas postagens, vc tem algum tutorial desse?

    Beijinhos

  2. Oiiii, eu amo seu blog e adorei esse tutorial, mas tenho duas dúvidas, uma sobre esse tutorial e outro uma perguntinha

    1 – tem como colocar uma imagem igual a sua em “Veja mais”, gostaria de mudar mas nao sei onde coloco.
    2 – você tem tutorial para colocar caixa de texto nas postagens? Nunca achei um blog desse, e acho super legal quem coloca aquelas caixas para dar enfase em algo..

    Obrigada e amoooooo muitooo suas postagens

  3. Ola Karoline, primeiro queria dizer que amo seu blog, ele é um amorzinho!
    A minha duvida é, eu vi em um blog que acompanho, em que as postagens relacionadas apareciam na pagina inicial, e eu queria saber se é possivel fazer o mesmo com o tutorial que você ensinou :)

  4. Olá, querida. Amei o tutorial, principalmente porque, depois que alterei o template, o seu foi o primeiro que deu certo e ficou alinhadinho. Porém, quando vou personalizar o CSS, salvo tudo direitinho, mas as alterações não aparecem, fica sempre da mesma forma. Sabe o que pode estar acontecendo? Muito obrigada.

  5. Karol, eu tentei fazer este tutorial no meu blog e não deu certo, já tentei inclusive mais de uma vez, você sabe oque pode estar acontecendo?

  6. Karol, o css não está funcionando, as postagens estão ali mas o css não está duncionando mesmo, você sabe oque pode estar acontecendo e como resolver este problema

  7. Karol, queria a mesma fonte que está na foto de exemplo, já tentei trocar a Georgia, serif; pela Amaranth, mas não muda, tem alguma dica?

    Beijos e obrigada pelos seus posts, são de muita ajuda.

    1. MUITO obrigada, Wendy! Comentários carinhosos como o seu me abastecem pra continuar postando mais e mais tutoriais!
      Um beijo <3

  8. Karol, parabéns pelo Blog!
    Sou designer, mas tenho dito contato mais profundo com XML faz pouco tempo… Você tem me ajudado bastante a eu voltar com meu blog.

    Então, consegui deixar o widget perfeito, exceto pelo fato de não conseguir tirar um borde azul que fica entre as miniaturas, e ela parece não estar no código, a cor dela é #d4eaf2… Vc pode me ajudar nisso?

  9. Oi Karol, muito bom o tutorial obrigada! Mas me diz uma coisa, porque as imagens ficam sem qualidade, como se tivessem esticadas além do tamanho que foi configurado?
    Não alterei nada o código, mas esta meio feia com perda de resolução!

  10. Oii, tenho uma dúvida, eu fiz tudo e deu certo, só que não aparece quando você abre a página e tem o “https://” na url, só aparece quando ta o endereço do blog sem o https, aconteceu a mesma coisa quando coloquei o SCM Player, mas não faço a mínima ideia como corrigir isso…

  11. Oie,
    Segui o tutorial certinho e não apareceu. Usava o linkwhithin e quero mudar.
    Inclusive estou usando um tema seu. Não sei oq pode ter dado errado.
    Obrigada.

  12. Oie,
    Segui o tutorial certinho e não apareceu. Usava o linkwhithin e quero mudar.
    Inclusive estou usando um tema seu. Não sei oq pode ter dado errado.
    Obrigada.

  13. Bom Dia Karol ! Parabenizo o seu blog, no meu caso, especialmente por dois motivos !
    Precisei de numeração de páginas, assisti um trilhão de videos explicativos por ai e nenhum deu certo no meu blog ou ao menos da forma como eu queria. Ai eu segui o passo a passo de uma explicação de uma postagem sua e ficou perfeito. Agora recentemente eu vinha sofrendo com postagens relacionadas pois as do meu blog estava de forma bagunçada. Novamente fiz buscas por mil lugares, mil tentativas e nada, e quando dava certo também não era da forma como eu queria. Ai encontrei novamente no seu blog e segui o passo a passo e ficou perfeito. Resolveu dois assuntos complicados do meu blog. Agora o próximo passo é ajustar os comentários de postagens pois está de forma feia e bagunçada no meu blog kk Abraços e boa sorte no seu blog :)

  14. Oi Bruna, tudo bom? Segue uma listinha de tutoriais parecidos com o meu (existem mais, mas acho que não é necessário):
    http://thegreatowl.blogspot.com.br/2014/10/how-to-add-simple-random-posts-widget.html
    http://www.tudor-anghelina.com/2013/10/how-to-easily-resize-blogger-popular.html
    http://www.enjoythings.com.br/2013/03/1-tutorial-artigos-relacionados-para.html
    http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html
    http://reinokawaii.blogspot.com.br/2013/01/posts-relacionados-com-html-e-css.html
    http://www.bloggerwidgetgenerators.com/2014/02/related-posts-widget-for-blogger-blogspot.html

    Só pra deixar claro, entendo sua indignação e não te culpo por comentar isso, pelo contrário, eu também faço quando me irrito com esse tipo de coisa. Mas precisamos ter muito cuidado, eu mesmo já acusei alguém injustamente.
    Fiz meu primeiro curso referente à web design há 12 anos atrás, e trabalho com Blogger há aproximadamente 4 anos, realmente não preciso copiar uma frase como essa de alguém. O primeiro post-footer costuma ser o referente ao template para mobile que raramente é personalizado, e o segundo referente ao template “comum” (para pcs). Nos templates que faço para os meus clientes é assim, por isso tenho esse conhecimento. Imagina fazer mais de 200 templates com a mesma base, já a conheço quase que de olhos fechados, rs. E para ser sincera faz muito tempo que usei as bases oferecidas pelo Blogger, então não sei se em todas elas é assim também.
    Por fim, retirei o link do autor porque notei que ele não aparece nas postagens relacionadas (ao contrário do Linkwithin que aparece), então trata-se de um código morto, inútil. Retirei para diminuir a possibilidade de confusão de algum leitor(a), visto que a maioria dos meus leitores são iniciantes, por isso não retirei no meu blog de teste. O crédito à ele foi dado no post, assim como faço em todos os tutoriais que conheço o autor.
    Enfim, bjs e tudo de bom.

  15. Oi Karol, estou muto bem e você? Eu sei que existem milhões de tutoriais parecidos com o seu, o seu é apenas idêntico ao o meu :)
    Não estou acusando injustamente, eu conheço quando uma coisa é minha e sei que o código js, que segundo o seu post você mesma modificou, tem a imagem indisponível que eu criei e alterei somente para o meu tutorial.
    Caso tenha interesse em saber, eu também trabalho com web e com o blogger a anos, não preciso de aula sobre o que é cada post-footer.
    Enfim, tanto faz. Sei o que eu fiz, sei que quebrei a cabeça e fiz algo de verdade. Tenho a consciência limpa e isso é o que importa.

Deixe uma resposta