Dicas, truques, tutoriais, reviews, promoções e informação

sexta-feira, 1 de abril de 2011

Como adicionar o recurso Artigos Relacionados no Blogger

A pedido de Luciano, este artigo mostrará como instalar um sistema de artigos relacionados nos posts do Blogger.

Existem alguns serviços que oferecem este widget, o mais conhecido é o LinkWithin. Porém, estes serviços limitam qualquer personalização em seus widgets, ou seja, não há como customizar o widget e deixá-lo do seu jeito.

Com o widget presente neste tutorial você poderá realizar qualquer modificação que desejar. Para quem tiver a mesma dúvida do Luciano, é só seguir o tutorial.

O código abaixo foi desenvolvido pelo site: www.bloggerplugins.org

Adicionando Artigos Relacionados no Blogger

1. Faça login em seu blog e vá em DesignEditar HTML. Primeiramente, clique em Baixar modelo completo para fazer um backup do seu template caso algo saia errado.  

2. Marque a opção "Expandir modelos de widget" e tecle Ctrl + F. Encontre esta linha abaixo:

<div class='post-footer'>

3. Logo acima desta linha adicione o código a seguir.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>

See the Pen DAeqz by Seu Tutorial (@marcelost) on CodePen



4. Agora encontre a tag </head> e acrescente acima dela o seguinte código.

<script type='text/javascript'>
var defaultnoimage="http://i56.tinypic.com/1zwotms.png";
<b style="color: red;">var maxresults=5</b>;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artigos Relacionados: ";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>

See the Pen jCdwz by Seu Tutorial (@marcelost) on CodePen



Altere os textos de acordo.

var maxresults=5 -> define o número de artigos relacionados que aparecerão. Neste caso, 5 posts irão aparecer. Para alterar a quantidade basta trocar o número 5 pelo número de artigos que você quer que apareça. Por exemplo: var maxresults=4

Artigos Relacionados -> é o título do widget. Mas pode modificá-lo com o nome que preferir.

5. Agora procure pela tag ]]></b:skin> e adicione este código acima dela.

#related-posts {
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
width:  /* largura do widget */
}
#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;
background-color:#FFF; /* cor de fundo do widget */
border:solid 1px #333; /* dimensão e cor da borda do widget */
padding:0 8px;
width:100px;
}
#related-posts a:hover{
color:#fff;
}
#related-posts a:hover {
background-color:#333;  /* cor de fundo do widget ao passar o mouse*/
border:solid 1px #FFF; /* dimensão e cor da borda do widget com mouse*/
}

See the Pen akHzG by Seu Tutorial (@marcelost) on CodePen



Altere as cores e as bordas do widget.

Background-color:#FFF -> define a cor de fundo do widget. Troque o #FFF pelo código da cor desejada.

Border:solid 1px #333 -> define a cor e a dimensão da borda. Troque o #333 pelo código da cor desejada. E troque o 1px pela dimensão que se encaixe melhor com seus posts.

Confira uma tabela de cores com seus respectivos códigos HTML nesta página.

6. Salve o modelo clicando em Salvar Modelo e veja o resultado. O widget não aparece na homepage, apenas dentro dos posts.

Conclusão

O recurso aparecerá sempre no final de cada post.

Claro que tudo isso depende do tipo do seu template. O widget não ficará adequado para qualquer template.

Por isso, você deve ir modificando as cores e as bordas (conforme mencionado acima) para deixar o widget adaptado ao estilo do seu blog. É bem fácil e rápido!

3 comentários:

  1. Não pega no IE porque? (eu sei que o IE é um lixo) mais tem mts pessoas que usam ele... gostaria de saber se tem como vc corrigir esse erro para tal .JS pega no IE tb. Estarei aguardando a resposta via EMAIL: rfcj@live.fr

    ResponderExcluir
  2. O código funciona em todos os browsers, incluindo o IE.

    ResponderExcluir
  3. Muito legal teu post, Marcelo.
    Cara, tou com um problema em relação a isso. Fiz tudo que você recomendou, mas não funcionou. Não aparece nada. Eu testei o linkwithin, só que ele não mostrava as imagens em miniatura e os posts recomendados eram sempre os mesmos. Será que tem haver com o layout da página?
    Agradecido se puder me ajudar.

    ResponderExcluir