Postagens Relacionadas para blog - Sem uso de serviços externos | Quero Dicas | Tutoriais para seu blogs


Postagens Relacionadas para blog - Sem uso de serviços externos


Colocar postagens relacionadas no blog é um dos recursos que mais gosto em um layout. Normalmente, ele é apresentado ao final das postagens, dando a oportunidade aos visitantes de acessarem outros posts relacionados aquele que estamos vendo.

Existem alguns sites que geram este tipo de script para nos poupar o trabalho de adicionarmos ao template. Um dos mais famosos é o LinkWithin, na frente do site nRelate. Veja:
LinkWithin: Como colocar postagens relacionada no seu blog
Como colocar postagem relacionadas no blog ou site - nRelate

Apesar desses sites serem bem conhecidos e muito utilizados, existem algumas falhas no script: As postagens não são carregadas (desaparecem) e/ou as miniaturas de imagens ficando em branco.
Outra falha muito comum que acontece no script é que ao mudar, deletar ou direcionar um link de um determinado post, este não é alterado pelo script. Em outras palavras, o link antigo continua aparecendo sem que ele exista. Sem contar que alguns templates não aceitam tal script e não podem ser customizados.

Pensando nisso, hoje eu trouxe um script que eu utilizo bastante na personalização de blogs. Ele é muito fácil de instalar, sem falar que é completamente personalizável.
Veja na imagem como ele irá ficar ao final deste tutorial.
Gostou? Então vamos aprender e entender.
Para instalar este script é fácil, MAIS, você de precisa prestar atenção. Qualquer código instalado no local errado, não funcionará ou não aparecerá. Por tanto, leia e tente entender o tutorial antes de começar a instalação, Dê preferencia a um blog de teste.

Caso siga meu conselho de instalar, primeiro, em um blog de teste, certifique que ele esteja publico, contenha postagens e marcadores instalados nas mesmas. Entenda: Esta postagem relacionada sem o uso de serviços externos só aparecerá em um blog publico e suas miniaturas são de acordo com seus marcadores. Exemplo: Se você tiver 5 postagens com somente 4 marcadores adicionados nas mesmas, em seu script de postagens relacionadas só apareceram 4 miniaturas e seus respectivos links.

Agora, vamos ao tutorial!
Recomendo que faça um backup do seu template, ao instalar, qualquer tipo, de implementação de códigos dentro do HTML do seu blog e claro, dê preferências a um blog de teste. Caso não saiba fazer Backup? Não tem problema, clique em: Como fazer um Backup ou restauração do seu blog.
  1º Código 


1. Acesse o painel do seu blog
2. Clique na aba "Modelo" e em "Editar HTML"
3. Tecle Ctrl +F para a caixa de busca abrir.
4. Dentro da caixa de busca, digite </HEAD> e tecle Enter
5. Ao localizar a tag, logo abaixo dela, cole este código:

 Acesse


  2º Código


Continue dentro do html do blog...

1. Dentro da caixa de busca procure por:
<DIV CLASS='POST-FOOTER'> . Tecle Enter para localizar.
 
<DIV CLASS='POST-FOOTER'>


2. Você localizará 2 iguais. Mais somente queremos a SEGUNDA, ok?
3. Abaixo do segundo trecho localizado, aplique este código:

Acesse

4. Altere o titulo e a quantidade de imagens que deseja que fiquem expostas.
Está marcado de vermelho, onde deve fazer as alterações

  3º Código


Continuando dentro do HTML...

1. Dentro da caixa de busca, digite e procure por: ]]></b:skin>
 
]]></b:skin>

2. Ao localizar, cole Acima, este outro código:

Acesse

3. Faça as alterações onde deixei destacado, em vermelho, ao lado de cada código .
Tabela de cores: AQUI

4. Visualize, e se estiver tudo certinho, salve e pronto!
Sua postagens Relacionadas já estão adicionadas em seu blog =D

Postagens Relacionadas em outras áreas do blog
Você pode determinar o melhor local em seu blog. Para visualizar e fazer testes em outras áreas do mesmo, basta colocar o 2º Código (citado acima) em um outro determinado local dentro do seu template, Faça testes.

F.A.Q
Instalei tudo corretamente, mais, minhas postagens relacionadas não aparece.
Certifique-se que seu blog esteja publico, com postagens e com marcadores adicionados nos mesmos e/ou certifique-se também que o Feed do blog em questão esteja ativado.

Vejo as imagens mais não consigo visualizar mais nada.
O 3º Código é para das formas ao seu Widgets. Troque cores, tamanhos e o estilo das fontes. Faça com calma. Paciência é fundamental.

Gostou? Então comente! Seu comentário é minha fonte de inspiração =D
Beijinhos

Me Contrate!



1 comentários:

Clique e deixe seu comentários
quinta-feira, 30 junho, 2016 ×

Ótimo tutorial. Já tinha visto vários mas apenas com o seu consegui. Obrigado

Gabriel Vale fez o primeiro comentário! Comente você também!
Resposta
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.