Não sabe o que é?
São as recomendações de outros posts que a gente coloca ao final das postagens e que ajudam a manter o leitor mais tempo no blog. Acho indispensável!
Olhe o final desse post, sob o título de FIQUE MAIS UM POUCO COMIGO! VEJA TAMBÉM:
Então, é esse recurso que estamos falando...
Relembre aqui tudo que já foi postado no Blog Elaine Gaspareto sobre Postagens relacionadas.
Hoje quero compartilhar contigo mais uma forma de fazer isso.
Quando terminarmos ficará assim:
Fica legal, né? Você pode modificar a frase do título, pode mudar a fonte e a cor, pode arredondar as miniaturas...
Vamos trabalhar?
Antes, 2 conselhos:
- Sempre faça essas modificações mais avançadas em um blog de testes antes de partir para o seu blog real. Coloque nesse blog de testes uns 5 ou mais posts com imagem, marcadores e use o mesmo template de seu blog real. Deixe o blog em modo público, feed completo e aí sim faça nele o tutorial. Depois de praticar refaça em seu blog real. Vai por mim, evita dor de cabeça.
- Antes de começar qualquer tutorial Blogger leia e releia as explicações até se certificar de haver entendido.A imensa maioria das perguntas que recebo referentes aos tutoriais do blog são perguntas cujas respostas já estão no post. Então, leia, releia e só comece após haver entendido.
Precauções tomadas, vamos ao tutorial?
Para começarmos abra a página com os códigos necessários à realização do tutorial e a mantenha aberta:
Como colocar as postagens relacionadas no blog?
Para começar acesse a aba Modelo de seu blog, onde vai instalar as postagens relacionadas para blog.
Clique na aba Editar HTML e dentro da caixa do código fonte tecle Ctrl+F.
Vai expandir uma barra de pesquisa.
Nessa barra de busca digite </head> e tecle Enter para localizar.
ACIMA dessa tag de fechamento cole o CÓDIGO DAS POSTAGENS RELACIONADAS PARA BLOG
Salve.
Este código é inovador em relação aos que ensinei antes pois ele não requer que o script seja hospedado externamente para funcionar. Alojamos o script direto no código-fonte do blog e isso impede que um dia saia do ar por excesso de tráfego no servidor ou se o site de hospedagem cair, por exemplo.
Caso queira modificar cores, tamanho das miniaturas ou fontes é tudo nesse código.
Precisa, claro, ter um conhecimento básico em edição de CSS.
Caso não altere nada o resultado será exatamente como na minha imagem demonstrativa.
Feita essa parte vamos ao passo final!
Localize, usando a barra de pesquisa do código-fonte, este trecho:
Provavelmente seu blog apresentará 2 ocorrências dessa tag, estamos em busca da segunda ocorrência, ok?
Também pode ser que seu template não tenha post-footer-line-3. Nesse caso localize <div class='post-footer-line post-footer-line-2'>, ambos servem.
Achou a linha que queremos? Segunda ocorrência, não esqueça!
Abaixo dela cole o CÓDIGO HTML e salve.
À esta altura seus posts relacionados já devem aparecer no blog.
Caso não apareça releia o tutorial e confira os passos.
Para facilitar a sua vida gravei a execução do tutorial em vídeo.
No vídeo eu explico um pouco sobre como mudar cores, fontes, quantidade de posts mostrados, etc...
Aperta o play e tire as dúvidas que possa ter:
Gostou do post?
Ajude o blog com o método Cococu!
Não sabe o que é cococu?
*Método cococu:
co= compartilhar
co= comentar
cu= curtir
Método cococu de ajudar essa blogueira que vos fala! 😄
Ajudaê, mig@s!!!
Dias online
Postagens
comentários
Adorei! Primeira a comentar
ResponderExcluirQue interessante! Vou tentar fazer no meu blog. Quero aproveitar e te fazer uma sugestão para postagem. Como começar a usar o instagran de forma simples? Postar, abrir e fechar a página, fazer comentários... Estou apanhando aqui e as informações que tive acesso não me ajudaram muito. Obrigada.
ResponderExcluirAnabela, tem 2 posts recentes aqui no blog sobre Instagram, talvez o primeiro deles te ajude.
ExcluirMas vou anotar a dica, quero mesmo falar mais de Instagram em breve.
bjssss
kkkkkkk adorei o método cococu!!!
ResponderExcluirEstou amando o novo layout do meu blog!!! Adivinha quem personalizou??? Ficou bem mais leve!!! Tudo abre rapidinho!!!! :) ;)
Muito bom o tutoria, Elaine. Já tentei tantas vezes mas tive medo, com a ajuda do vídeo penso que vai facilitar muito. Obrigada, já compartilhei...rs rs!
ResponderExcluirÓtimo o tutorial, foi de grande ajuda! Mais uma vez o meu muito obrigado! Deus te abençoe!!!
ResponderExcluirAhaha adorei o método cococu! Pode deixar que aqui sempre compartilho! São sempre posts ótimos, sejam eles de dicas de receitas, tutoriais e reflexões.
ResponderExcluirMuito obrigada por esse post. Deu muito certo! Ainda vou treinar mais o CSS pra conseguir mudar as coisas, ainda não estou segura pra fazer as modificações.
Beijos.
Blog Jovens Mães
Minina, que ideia demais essa de ter um blog teste... Já fiz alterações no templante do meu blog e graças a Deus deu certo mas nunca imaginei em fazer isso de testar antes! Amei!
ResponderExcluirBeijos
www.acasadaritablog.blogspot.com.br
Oi, Elaine, Passei a tarde fazendo um blog para testes :)
ResponderExcluirFicou lindinho! Dá dó de ser só teste... Estou fazendo tudo certinho como seu tutorial mais não está dando certo... Já li novamente, já vi o vídeo... Vou esfriar a cabeça e tentar de novo mais tarde....
Um Beijinho!
Voltei, Elaine! Fiz o blog teste e não deu certo... Arrisquei no blog real e tcharam: Deu certo!!!!! Muito obrigada!!!!
ResponderExcluirrsrsr talvez seja porque o blog de testes esteja fechado ao público. Tem que ser blog público pra dar certo.
ExcluirMas que bom que no blog real deu, isso que importa, né?
Corajosa rsrsrs
bjsssss
Querida Elaine
ResponderExcluirO que acontece quando não tem? O meu nao localiza o div class='post-footer-line post-footer-line-3'
. O máximo que aparece é o div class
Não consegui achar nem no de teste nem no real
Adoro suas dicas.
Bjs
www.maeliteratura.com
Claudia, todo template do Blogger tem essa tag. Se não tivesse não apareceria, por exemplo, o link do marcadores e os botões de compartilhar que aparecem em seu blog.
ExcluirTente de novo, localize qualquer div class post-footer e você verá que as líneas estão lá, nem que seja 1.
Olhei seu código fonte e tem todos lá rsrsrsr
bjsss
Olá Elaine, Visito sempre seu blog, seus tutorias são muito bons e me ajudam muito, você presta serviços como designer para terceiros? Pois eu gostaria de solicitar um orçamento com você só para fazer umas modificações que eu não sei. Meu Blog é o www.logatoloko.com.br Um blog de humor pequeno mas que eu pretendo tornar bem legal. Parabéns pelo seu trabalho um abraço.
ExcluirO meu também não localiza.
ExcluirDEU CERTO! To à horas tentando sem sucesso, mas agora consegui graças a você, muito obrigada querida!
ResponderExcluirElaine, muito obrigada! Deu certinho. Só não consegui centralizar. O Título centraliza mas as miniaturas, não. Tem alguma forma de centralizar as miniaturas?
ResponderExcluirBjs!!!
Oi Eleine gosto muito de suas dicas, mensagens relacionadas super adore!! Obrigada!
ResponderExcluirElaine, eu queria coloca isso no meu blogger; mas sem as imagens tem como ?!
ResponderExcluirMateus, até onde testei, não...
ExcluirOlá pode me ajudar? No meu só aparece isso body.item-view .post-footer-line {
ResponderExcluirline-height: 2.3;, não aparecei como no tutorial, já li diversos tutorais todos pedem esse código mas só encontro desta forma que citei e quando colo e salvo não acontece nada.
Luana, se seu template é modificado e baixado da internet pode mesmo não dar certo. Minha sugestão é que vá colando em ocorrencias de post-footer que achar, até localizar a ocorrencia certa...
ExcluirNão achei duas ocorrencias para o código dentro do HTML. Só uma. Posso mexer mesmo assim?
ResponderExcluirPode tentar, Daniela, mas em geral tem sim as duas ocorrencias...
ExcluirOi Elaine, adorei seu tutorial (alias, meu blog está quase todo feito com seus tutoriais rsrs). Você pode me ajudar com das coisinhas por favor? O seu está com 4 postagens, eu gostaria de aumentar esse numero, como faz?
ResponderExcluirBites!
Tary Belmont
Tary, procure no CÓDIGO HTML a linha var maxresults=4; e altere o valor expresso pelo número 4 :)
ExcluirEste comentário foi removido pelo autor.
ResponderExcluirOi Elaine, tudo bom? Antes de mais nada, muito obrigada pela sua ajuda, esse site tem sido uma mão na roda! Já instalei o código aqui, está tudo certinho! A única coisa é que ele corta o título (coloca reticências) , procurei no código e não achei, existe alguma maneira do título aparecer completo?
ResponderExcluirLuisa, completo eu não sei, mas se quiser aumentar a quantidade de caracteres encontre no primeiro código esse trecho: length>35
ExcluirE altere o valor 35 pelo valor que desejar.
Também altere substring(0,35
pelo mesmo valor. Ambas as ocorrências estão próximas uma da outra.
Esse número define a quantidade de caracteres mostrada no widget.
Nunca testei em blogs reais porque nunca senti necessidade, mas é isso aí.
Está a funcionar!
ResponderExcluirGrato pela partilha. Bem-haja.
Tudo de bom.
:)
;)
Maravilhoso! Obrigada Elaine! Beijo
ResponderExcluirOLá Elaine. Obrigado por compartilhar um pouco do teu conhecimento! Eu instalei os códigos e tudo funcionou perfeitamente exceto o numero de postagens relacionas, que alterei para 6 , mas mesmo assim continua aparecendo 8 posts. Se puder me ajudar serei eternamente grato.
ResponderExcluirOi!
ExcluirVocê precisa localizar esse trecho em seu código html: var maxresults=8; e trocar aí a quantidade de posts exibidos.
Elaine! Adorei! Aliás, sempre que preciso fazer algum melhoramento em meu blog venho aqui e sempre encontro o que preciso. Obrigada por compartilhar seus conhecimentos.
ResponderExcluirEu colei os códigos, conforme sua orientação. Deu tudo certo, mas, nas postagens relacionadas, abaixo da postagem principal é repetida essa postagem principal. Eu gostaria que aparecesse somente outras postagens relacionadas e não ela própria, é possível? Obrigada!
Rosangela, não é possível porque o script se baseia nos marcadores e a postagem "principal" possui marcadores, portanto ela aparecerá. Mas conforme o seu blog for tendo mais e mais posts isso não acontecerá com frequência.
ExcluirUma dica: exclua o Linkwithin, é redundante :)
beijossss
Este comentário foi removido pelo autor.
ExcluirEste comentário foi removido pelo autor.
ExcluirObrigada Elaine. Está ótimo assim. Quanto ao Linkwithin já consegui excluir. Obrigada!
ExcluirOlá Elaine, seu blog já me ajudou muito em seus tutoriais.
ResponderExcluirEstou com problemas no meu blog, ao editar HTML eu não consigo encontrar esse código div class='post-footer de jeito nenhum! no máximo que aparece é um monte de div class=.
Será que pode ser o template tema espetacular Ltda personlizado? tenho os marcadores, compartilhar, tudo certinho, mas não consigo achar esse código.
O que será? meu blog é http://campingnatural.blogspot.com.br
Um abraço,
Valter, vá testando. Em geral todos os templates possuem essa linha, mas o jeito é testar até achar onde dá certo. Em geral, também, começa mesmo com div class...
ExcluirOi Elaine,
ExcluirEu copiei um um link que você distribui, só que não me lembro onde e quando foi! Mas ficou bem legal. Ele foi sobre as postagens importantes do blog irem mudando.. lembra?
Só que estou com um pequeno problema, uma pequena tarja branca fica ao lado esquerdo de todas as imagens e eu não consigo tirar de jeito nenhum! coloquei fundo transparent que funcionou no blog de teste mas no original não!
Queria, se possível dê uma olhadinha no meu blog campingnatural.blogspot.com.br, e veja se pode me ajudar. Há, e tem também os textos que ficaram pouco estranhos, mas vou deixar assim mesmo.
Obrigado, um abraço Elaine,
Valter Luna
Valter, o erro acontece por causa do lugar onde está o gadget.
ExcluirPara que essa área possa ser usada para acomodar um gadget é preciso excluir a personalização dela pois esse espaço se destina originalmente ao menu de páginas nativo do Blogger.
Para fazer isso encontre no código fonte de seu template o trecho que começa com /* Tabs e exclua tudo o que achar até chegar em /* Headings
A seguir pesquise Cabeçalho em seu código e configure assim:
Onde está escrito maxwidgets='1' altere para maxwidgets='4' e salve.
Onde aparece showaddelement='no' altere para showaddelement='yes' e salve.
Onde está locked='true' substitua por locked='false' e salve.
Aí será possível inserir até 4 gadgets nessa área abaixo do cabeçalho, sem erro.
Tudo certo! mas de tanto mexer, descobri muitos erros! Isto é, não precisei em quase nada alterar códigos importantes de HTML. Com calma e paciência "muita", é possível chegar a uma conclusão boa e óbvia. Obrigado!!
Excluircomigo não funcionou, ficaram enormes as imagens das miniaturas e nem o hover funcionou. Ficaram enormes e uma embaixo da outra. Removi o linwithin mas pelo visto tem mais coisa atrapalhando
ResponderExcluirSusana, publiquei outra opção agora, talvez ajude :)
ExcluirQual seu blog?
Não deu certo em nosso tema. ;(
ResponderExcluirEm templates responsivos nativos tipo Soho, Contempo e Notável não funciona, infelizmente.
Excluirbem depois de tentar varios widgets tentei experimentar esta forma e correu bem obrigado. se quiserem ver como ficou vejam ai : https://meuslb1904.blogspot.pt/
ResponderExcluirOi, eu gostaria de saber se dá pras postagens relacionadas ser apenas relacionada com marcador? Por exemplo, tem uma postagem 'A' que tem o marcador '1' e as 4 postagens relacionadas que aparece logo abaixo fossem apenas com o marcador '1', ou seja, que aparecesse postagens relacionadas mais precisas.
ResponderExcluirAlexandre, até onde testei, não dá.
ExcluirMas vc pode tentar editar o script que está após o final da folha de estilos, caso tenha conhecimento em html.
Eu editei até onde consegui, eliminei alguns erros e juntei tudo num código mais limpo,mas não pude ir adiante...
Outra dúvida, tive o mesmo problema da pessoa aí de cima, as miniaturas ficaram enormes e uma embaixo da outra. Como resolver?
ExcluirAlexandre, não sei dizer, nunca aconteceu comigo mas pode ser que haja algum script causando conflito.
ExcluirExperimente fazer o processo em um blog que seja nativo do Blogger, sem nenhum outro script externo, sem nada que não sejam posts de teste, talvez descubra aí o que houve...
Eu fiz um teste com o linkwithin e as miniaturas ficaram normais. Já com o teu código e o código de outros sites, as miniaturas ficaram enormes. Eu acho que se eu instalar teu código no mesmo lugar onde o linkwithin instala o dele, as miniaturas vão ficar normais. Em quais outros locais eu posso instalar lá no código HTML?
ExcluirHum, não acho que a posição do widget vá alterar e corrigir o erro de exibição, certamente é outra coisa, mas pode tentar inserir em qualquer linha de post-footer.
ExcluirTem que ir testando pois cada modelo tem suas especificidades...
Eu testei mas as postagens relacionadas só ficam naquele quadradinho padrão do Blogger, aquele quadrado onde ficam os marcadores. Tem outro lugar que eu possa testar sem ser esses post-footer?
ExcluirAlexandre, tem que testar mas o local costumeiro desse widget sempre é no rodapé.
ExcluirPode testar post-footer 1, 2 ou 3 mas em geral é sempre aí...
Eu testei em vários lugares mas as miniaturas ficaram enormes. Obrigado pela atenção.
ExcluirFunciona, porém causa um problema no certificado de segurança, deixando a página como não segura em HTTPS.
ResponderExcluirOi Elaine, como faz pras postagens relacionadas aparecerem apenas dentro do post e não na página principal?
ResponderExcluirLee, para fazer isso use as condicionais do Blogger.
ExcluirAqui no blog tem tutorial, pesquise por Condicionais do Blogger e o post aparecerá.
Aí é só colar o código que exibe só nas páginas internas do post no começo do código HTML das postagens relacionadas e fechar a condicional ao final do código das postagens relacionadas.
Experimenta, é bem simples e é o jeito que eu uso.
Elaine como que eu faço para aparecer 9 posts relacionados ?
ResponderExcluir3 posts
3 posts
3 posts
Como que eu faço para esse tutorial funcionar em template responsivo ?
Camilo, basta trocar o número 4 do CÓDIGO HTML por 9 (nessa parte:var maxresults=4;)
ExcluirPra funcionar em template responsivo precisará construir isso usando media queries.
Tem série aqui no blog que fala sobre isso, olha ali no menu, tem alguns posts que talvez ajudem.
Oi, é o seguinte, as miniaturas ficaram na esquerda, aí eu mudei o margin-left de 24 pra 73, e as miniaturas ficaram no centro, só que o título que estava no centro acabou sendo empurrado pra direita. Então como eu faço pra trazer de volta o título pro centro sem precisar mexer nas miniaturas?
ResponderExcluirNão funcionou no meu. Tentei com todas as opções que deu. :/
ResponderExcluirhttps://mulheresqueusam.blogspot.com/
boa tarde !! onde posso aumentar de 3 para 4 ou 5 post relacionados , só tem 3 !
ResponderExcluirNo código está definido 4, mas ele pode exibir menos se não tiver posts suficientes dentro da categoria.
ExcluirA quantidade é alterada no Código HTML.
Elaine ,levei e já curti sua página.
ResponderExcluirComo eu queria um blog estilo revista consegui fazer seguindo um tutorial aqui outro ali,enfim consegui e coloquei as postagens relacionadas só nas páginas internas.
Meu blog não ficou lindo, maravilhoso mas eu gostei do resultado.
Parabéns sucesso para você,beijos
Esqueci vim te seguir de novo,exclui uma conta do pai Google.....rsrs...
ResponderExcluirMuito obrigada, você me ajudou muito!
ResponderExcluirhttps://blogleiaasinopse.blogspot.com/
Oi! tem como modificar o que aparece na versão mobile? eu deixo 4 aparecendo na versão desktop, mas no celular eles aparecem um por cima do outro. Tem algum jeito de deixar 2 no celular e 4 no desktop, por exemplo? Obrigado!
ResponderExcluirInfelizmente não. A quantidade de posts definida é aplicada em todas as versões, desktop e mobile.
ExcluirA solução é ter um template responsivo e nas media queries ajustar o tamanho das miniaturas para caberem nas várias resoluções de tela, que é o que fiz aqui no blog.
Dá trabalho mas funciona.
Veja ali no menu a série Como tornar responsivo um template nativo do Blogger; numa das postagens eu falo sobre média queries.
Boa noite Elaine!
ResponderExcluirSeguí o passo a passo mostrado pelo seu vídeo mas o resultado final è que spo aparecem imagens abaixo de poucas postagens e uma, apenas uma imagem. Existe algum tempo de espera para ficar normal?
João, para que apareçam mais imagens precisa ter ao menos 5 posts com o marcador correspondente.
ExcluirSe tiver menos posts ou eles forem muito antigos pode aparecer menos relacionados.
Não, não tem tempo de espera, é na hora.
Até que enfim encontrei um código de posts relacionados que funcionou! Devo ter tentado uns 30 antes de encontrar o seu, Elaine. Muito obrigada pelo tutorial ♥
ResponderExcluir