Códigos e Scripts Vanessa S.
Artigos Relacionados com Imagem no final dos posts
Relacionar os artigos postados pode ser uma boa opção de mostrar ao leitor quais os outros conteúdos que existem no seu blog que se relacionam com o assunto que ele está lendo no momento.
Encontrei uma dica no Blogger Widget.
Lá eles ensinam como aplicar uma lista de artigos relacionados adicionado ao final de cada postagem e que usa imagens e textos aos assuntos contidos nos mesmos marcadores.
O código foi criado por eles, portanto os créditos são todos de lá.
O texto original é em inglês, traduzi a partir do publicado para facilitar o entendimento.
Importante lembrar que para o funcionamento correto deste código, suas postagens precisam conter Marcadores, e seu blog deve ter um Feed configurado, caso contrário, o código não funcionará.
[becape]Antes de tudo faça um backup do seu Template para evitar transtornos, se algo sair errado.[/becape]
1. Incluir o script e o CSS do código de Artigos Relacionados:
No painel do Blogger, acesse o menu “modelo” >> “Editar HTML” , marque “Expandir modelos de widgets” e localize a tag </head>
E cole ACIMA dela:
<!--Artigos Relacionados com Imagens Estilo e Script Inicio -->
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Artigos Relacionados com Imagens Estilo e Script Final-->
Salve!
2. Incluindo o segundo script e código HTML
Acesse novamente o menu “modelo” e clique em “editar html”, marque a opção “expandir modelos de widgets” e procure pela seguinte linha:
<div class='post-footer-line post-footer-line-2
Se não conseguir encontrá-la, procure por:
<p class='post-footer-line post-footer-line-2
Cole APÓS a linha encontrada, o código a seguir:
<!--Inicio do Codigo Artigos Relacionados-->
<b:if cond='data:blog.pageType == "item"'>
<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="Artigos Relacionados";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!--Fim do Código Artigos Relacionados-->
Salve as alterações!
[dica]Os códigos acima estão projetados para que os artigos relacionados apareçam apenas nas páginas internas. Caso queira que apareça também na página inicial, basta apagar a 1º e a última linha dos 2 códigos(destacado em vermelho).[/dica]
Se você preferir, você pode escolher outra opção de local mais adequado para instalar o código, mas instale sempre na linha do rodapé do post.
Sugiro que você dê uma lida no artigo:
Escolhendo o local para instalar elementos na área dos artigos
Você pode ajustar o número máximo de artigos relacionados que deverão aparecer ao final de cada post, basta alterar o número em negrito contido na parte destacada em azul.
Você também pode editar o titulo , alterando o texto destacado na cor verde.
Personalizando – Editar estilos
Você pode editar os estilos aplicados no código ,e para isso você precisará alterar alguns elementos no primeiro código que você colou logo acima da tag </head>
Se não se lembra qual é, procure pela linha:
<!–Artigos Relacionados com Imagens Estilo e Script Inicio –>
#related-posts -> se refere ao título.
font-size: 1.6em; -> tamanho da fonte
color: black; -> cor da fonte
Se quiser acrescentar um fundo (background) no titulo, acrescente a linha:
background: #fff; –> (Edite a cor conforme seu gosto)
Se quiser acrescentar uma imagem como background ao Titulo, acrescente:
background: #fff url(‘endereço da sua imagem’) repeat;
#related-posts a{
color:black; -> se refere a cor do texto.
#related-posts a:hover{
color:black; -> se refere a cor do texto quando passa o mouse em cima.
#related-posts a:hover {
background-color:#d4eaf2; -> cor do plano de fundo quando passa o mouse em cima.
Lembrando que não é possível a visualização das alterações nos estilos , elas só ficam visíveis apos serem salvas.
Este código foi traduzido a partir do publicado no Blogger Widget em inglês.
Oi, Eu estou tentando editar o HTML do meu blog, mas agora as coisas mudaram bastante no Blogger. Não consigo achar nenhum dos códigos:
nem nada! Não tem mais isso! O que eu faço? Onde coloco os códigos agora?
Beijos!
No novo modelo do blogger nao funciona?
Não testei. É questão de vc testar.
Por favor responda esta pergunta Clau, como eu quero que apareça também na página inicial, apaguei a 1º e a última linha do código() e
(), mas não deu certo, continua aparecendo somente nas páginas internas.
Silas, vc tem que apagar os trechos que estão destacados em vermelho..mas tem que apagar nos 2 códigos.
Clau, como eu quero que apareça também na página inicial, apaguei a 1º e a última linha do código() e
(), mas não deu certo, continua aparecendo somente nas páginas internas.
Não conhecia esse hack, sempre usai o Linkin. Mas esse hack é melhor que o Linkin, muito bom mesmo, recomendo!
O hack Linkin continua mostrando os artigos mesmo que já tenham sido eliminados do blog
João V.
Fico feliz que tenha gostado e mais feliz ainda pelo comentário e pelo retorno. Obrigada!
Muito bom, deu certinho aqui!
Natália
Não sei. Vc terá que testar.
Clau… Eu diminui a quantidade para aumentar o tamanho das imagens e ocupar todo o espaço da postagens. Tem como fazer isso?
omelete100ovos
Então dá uma lida no artigo "Twitter trackbacks" que lá tem o código para um elemento ficar abaixo da área de comentários. Pode ser que te ajude.
Olá.
Lamento incomodar mais uma vez. Já tinha lido esse artigo mas ele não menciona o local onde gostaria de colocar este código (depois dos comentários). Se puder indicar como fazê-lo, agradeço.
Bom fim de semana.
Natália
Não tenho como saber o que ocorreu no seu template, a única coisa que posso sugerir é que vc tente instalar o código em outra linha. Dá uma relida no artigo.
omelete100ovos
Sugiro que você dê uma lida no artigo:
"Escolhendo o local para instalar elementos na área dos artigos". O link está no post acima.
Boa tarde Clau.
Gostaria de colocar os "artigos relacionados" no fim do post (entre os comentários e os links de navegação). Não estou a conseguir encontrar o local correcto para colocar o código de modo que os artigos relacionados apareçam no local certo. Como posso fazê-lo?
Obrigado.
Clau… Socorro!
Depois de aplicados os artigos se misturaram ao autor do blog, ou seja, postado por: (autor).
Preciso dar uma linha de espaço.
Como faço isso?
Não consegui mudar o cabeçalho, ou seja, de artigos relacionados para Veja Também.
Me ajuda?
Grata.
Cláudia Charão
Pode ser que o local que vc esteja tentando instalar ele já esteja estipulado no seu template para aparecer apenas nas páginas internas.
Oi Clau!
Desculpe incomodar, eu exclui as linhas vermelhas e ainda assim só aparece na página interna, é por que uso os novos templates do blogger?
🙂
Clau, obrigado!
Era isso mesmo, o blog de teste estava aberto somente para leitores convidados…
Vlww!
@carlostomaz
Next Level Games Brasil
No tutorial eu inclui os trechos que podem ser personalizados. Eu procuro sempre publicar o que eu tenho conhecimento..se eu não informei algo no post é pq eu não sei.
Neste caso, se eu não informei onde alterar isso q vc pediu, é pq eu não faço ideia de como alterar, mas acredito eu que deva ser no script sim. Agora descobrir onde altera isso, já é com vc.
Dá uma fuçada no js e boa sorte.
Carlos Tomaz
Vc por acaso está usando um blog de testes pra instalar este recurso? Se estiver, verifique se o blog está fechado para visualizações por qualquer pessoa, se estiver, esta é a razão que os artigos relacionados não aparecem, pois este recurso só fica visivel em blogs "públicos" (abertos) e que contenham um feed.
Código muito bom, só gostaria de saber se tem como aumentar a quantidade de texto que aparecem abaixo das figuras? Se for no código java me diz onde mudo isso!
Obrigado!!!
Também gostava de saber….
Clau, me ajuda?
Tentei instalar esse hack em um novo template que estou personalizando pro blog mas não aparece nada,
fiz tudo certo e também testei outros hacks de postagens relacionadas sem imagem e também não aparece, até o LinkWithin não deu certo,
Será que há no template algum outro script que pode não deixar esse funcionar? Foi a única coisa que pensei…
oie, como vai?
Olha eu enchendo o saco de novo, hehehehe
Clau, tem como instalar esse Widget junto com o "Leia Mais", mas de fomra que só apareça nos artigos extendidos e economize espaço na pagina inicial?
Bjoookkkksssss!!!
@Dani:
Eu vi, vc usa o gadget do Linkin, ele realmente nunca faz a contagem correta mesmo..eu não gosto dele, mas muita gente usa.
Tenta sim, e espero q dê certo!
Beijos pra vc tb amiga.
.::Clau::.
Clau, coloquei um – já deve ter visto, creio -, mas foi adicionando um gadget e às vezes nem aparece o número de artigos que deveria…
Eu não gosto muito disso, sabe? Quando começa a dar erro, mesmo os pequenos, e piora tudo quando não consigo arrumar! rsrs
acho que vou aderir a este, parece bem legal!
Te digo o resultado, claro!
Beijo! o/