Postagens relacionadas com imagens para Blogger
Manter os visitantes mais tempo em seu blog é uma arte. Não é simples, mas faz muita diferença! Abaixar a Taxa de Rejeição e aumentar o tempo médio dos visitantes no blog é fundamental no processo de crescimento.
Com esse gadget instalado no fim de todas as postagens você pode conseguir mais tempo dos seus leitores, pois você divulga um conteúdo relacionado ao post que ele (leitor) está lendo. Aquilo chama atenção e por consequência, outra página sua é visitada pela mesma pessoa. Se a ligação entre as postagens for muito boa e suas postagens principalmente, aquele leitor pode se tornar um usuário fiel, visitando constantemente seu blog, assinando o feed e fazendo comentários.
Leia também: Posts Relacionados no blog (versão em forma de texto)
O gadget foi criado pelo blog Blogger Plugins, fiz algumas modificações visando melhor visibilidade e agora ensino como inserir o tal gadget em seu Blogger:
1° – Faça login, entre em “Design” -> “Editar HTML” e marque a caixa “Expandir modelos de widgets”;
2° – Procure (Ctrl + f) por :
</head>
3° - Cole o seguinte código ANTES do código encontrado:
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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 type='text/javascript'>
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png';
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i])))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
i--;
}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write();
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:88px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:90px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}
</script>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="";
</script>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
4° - Faça as configurações:
- defaultnoimage: Imagem padrão para os posts que não apresentam nenhuma imagem. Substitua o link existente pela imagem que você quiser. Padrão: http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png;
- maxresults: Quantidade de postagens relacionadas a ser apresentada. Padrão: 5;
- splittercolor: A cor (em código) da linha divisória. Padrão: #d4eaf2.
5° - Procure por:
<div class='post-footer-line post-footer-line-1'>
ou<div class='post-footer-line post-footer-line-1'/>
ou outro lugar onde você deseja inserir o gadget
6° - Insira logo abaixo o seguinte código:
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0;display:none;" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
7° - Caso você queira que o gadget seja visível nas páginas internas (postagens abertas) e na página inicial (em todas as postagens), apague as linhas:
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
e<!-- remove --></b:if>
As postagens são relacionadas através das categorias usadas em cada post. Se você não usa categorias ou não organiza bem a escolha das categorias, o gadget não vai fazer o seu melhor papel.
Caso você tenha algum problema com as imagens das postagens que não aparecem no gadget, como na imagem abaixo:
Leia o post: Erro de carregamento das postagens relacionadas com imagens
Eu uso o LinkWithin http://widget.linkwithin.com
É fácil de configurar e instalar e o efeito é o mesmo.
http://alinetux.blogspot.com
Muito útil esse post, tenho isso no meu blog tbm e é muito bom para q atraia mais o leitor, pois se ele se interessar pelo assunto acaba clicando na imagem e lê mais posts do seu blog, mesmo q sejam antigos..
Mudando um pouco de assunto, eu recebi um e-mail da equipe do Windows live dizendo q meu blog e outros blogs seriam deletado até março, nao sei se é vdd, pois meu blog é do Blogspot da minha conta no google, oq isso tem a ver??? Só uso um programa do windows live (o Windows live writer). Nao entendi esse email, será virus?
bjs
@Daya,
O Windows não tem ligação alguma com o Google, então não tem porque se preocupar. Deve ser vírus.
Saudações! Adorei o artigo. Usei está funcionando perfeitamente. | Mas gostaria de saber como posso editar o código para que este widget se centralize no rodapé do post. Pois ao usar seus códigos, o widget permaneceu à esquerda. =/ Inscrevi este post, estarei aguardando resposta. muito obrigado!
@Aldéryck,
coloca < div align = "center" > antes e < / div > depois.
Obs.: Sem espaços.
Aldéryck Riptor:
@Paulo Estevão
Sem sucesso, Paulo. Apenas o título "Artigos Relacionados" se posicionou no centro. =/
sem sucessooo nao dei certo aqui nao
O linkwithin tem um resultado bem melhor. O problema é que eu não tô conseguindo fazer com que os posts relacionados sejam mostrados apenas nas páginas internas.
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The content of elements must consist of well-formed character data or markup.
Eu usava o linkwithin e agora coloquei o 2leep.com no meu blog, está funcionando bem.
A minha dúvida é como posso colocar o título "Leia também:" tipo esse seu aqui?
Desde já agradeço.
Giovani,
é só escrever antes do código do 2leep.
abraços
Já achei, Paulo.
Veja como ficou:
http://pescanalagoa.blogspot.com
Consegui até mudar as letras.
Um abraço.
Quando tento procurar um dos textos
div class='post-footer-line post-footer-line-1'
ou div class='post-footer-line post-footer-line-1'/
aparece a mensagem: texto não encontrado.
Você poderia me ajudar? Obrigada
@Ines,
procure algo relacionado.
abraços
nao consegui…nao aparece nd ;/
Olá !
Tenho uma dúvida.
Sobre esse código não aparece no meu site,já tentei colocar o do linkwithin más não atualiza , já tinha colocado antes ,exclui umas postagens faz meses; mesmo assim elas ainda aparecem como postagens relacionadas ,já coloquei o códigos várias vezes e nada elas ainda aparecem
Tem como 3 postagens relacionadas eu quero colocar 5 postagens
O que tem de errado ?
http://www.fazercosmeticos.com
Você usa marcaodres nas postagens? Tem que usar…
Abraços
oLÁ, como eu aumento o tamanho das imagens? em que parte do código eu altero?
grato.
Procure por: img style=”width:88px;height:72px;border:0px;” src=”‘+thumburl[r]+'”/>
O meu não tem a quarta opção,onde coloco o codigo então?
oi paulo esta dando erro nesta linha aqui o que faço
for (var i = 0; i < json.feed.entry.length; i++) {
e o meu aparece duas linhas e outras com o final 2 e 3
oi paulo esta dando erro nesta linha aqui o que faço
for (var i = 0; i < json.feed.entry.length; i++) {
e o meu aparece duas linhas
div class='post-footer-line post-footer-line-1'/
e outras com o final 2 e 3