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 Design ► Editar 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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</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!
Artigo escrito por Marcelo
Sou formado em Sistemas de Informação pela UFMG e pós-graduado em Segurança da Informação. Trabalho com TI há mais de 5 anos e sou professor particular de inglês. Nas horas bem vagas costumo arranhar uma guitarra e sou fã do bom e eterno rock'n'roll.
Receba as atualizações automaticamente
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
ResponderExcluirO código funciona em todos os browsers, incluindo o IE.
ResponderExcluirMuito legal teu post, Marcelo.
ResponderExcluirCara, 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.