Widget Artigos Relacionados com imagem e efeito hover

Share on facebook
Share on google
Share on twitter
Share on linkedin

Olá Pessoal, hoje vou ensinar a vocês como colocar um widget bastante útil para seu blog, trata-se do widget artigos relacionados. Esse widget é essencial para qualquer blog, pois ele mostra as postagens relacionadas e a quantidade de comentários recebidos ao fim de cada uma delas com um lindo efeito hover.Ele puxa as informações diretamente da tag de marcadores do seu blog, ou seja, se você escrever um artigo com o marcador blogger, os artigos relacionados mostrados serão outros artigos do seu blog com o mesmo marcador, o código é de fácil instalação, basta apenas seguir o tutorial abaixo, vamos lá. 

Para adicionar esse código você deve acessar o Painel do Blogger, clicar na guia Modelo, clicar em Editar Html e marcar Expandir Modelos de widgets e procure pela tag ]]></b:skin> e logo acima dela cole o código a seguir. 
Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo. 
Vá em modelo ► Fazer backup/Restaurar ► Fazer download do modelo completo.
/*-----------Inicio Artigos Relacionados http://personalizaroblogger.com.br -----------------*/ 
#related-posts{float:left;height:160px;margin-bottom:10px; outline: 1px solid #fff;border: 1px solid #ddd;background: #f9fafb;} 
#related-posts h3{font-family: Francois One;font-size:20px;font-weight:400;color: #222222;margin-bottom: 0.5em;margin-top: 0.5em;margin-left: 0.5em;padding-top: 0em;} 
#related-posts ul{margin:5px;width:613px;padding-left:17px;list-style:none;display:block;}
#related-posts ul li{list-style:none;position:relative;float:left;border:0 none;margin-right:11px;padding:2px;width:86px;} 
#related-posts ul li:hover{z-index:100} 
#related-posts ul li:hover img{border:3px solid #BBB} 
#related-posts ul li:hover div{font-size:7px;text-transform:capitalize;position:absolute;top:20px;left:-15px;margin-left:0;width:130px} 
#related-posts ul li img{border:3px solid #DDD;width:80px;height:80px;background:#FFF;display:block;} 
#related-posts ul li div{position:absolute;z-index:99;margin-left:-999em} 
#related-posts ul li .title{text-align:center;border:1px dotted #CCC;background:#fff;padding:5px 10px} 
/*-----------Fim Artigos Relacionados http://personalizaroblogger.com.br

Ainda dentro do Html do seu blog, procure por <div class=’post-footer’> ou <div class=’post-footer-line post-footer-line-1′> ou <div class=’post-footer-line post-footer-line-2′> e logo depois de uma das tags adicione o código a seguir. 
OBS: Lembrando que você só deve adicionar o código a seguir abaixo apenas de uma tag descrita acima. 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div id='related-posts'> 
<script type='text/javascript'>var ry=&#39;<h3>Artigos Relacionados:</h3>&#39;;rn=&#39;<h3>Sem Artigos Relacionados </h3>&#39;;rcomment=&#39;Comment&#39;;rdisable=&#39;Comments off&#39;;commentYN=&#39;yes&#39;;</script> 
<script type='text/javascript'> 
//<![CDATA[ 
var nothumb='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png';dw='';titles=new Array();titlesNum=0;urls=new Array();time=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><a href="'+urls[c]+'" rel="nofollow"><h2>'+titles[c]+'</h2></a><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw}; 
//]]> 
</script> 
<b:loop values='data:post.labels' var='label'> 
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/> 
</b:loop> 
<script type='text/javascript'>varmaxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script> 
</div> 
<div style='clear both'/> 
</b:if>
OBS: Na parte do código que esta destacada em vermelho troque o numero 6 pela quantidade de postagens relacionadas que aparecerá no seu widget, depois disso visualize para confirmar se esta tudo ok e salve. 

Deixe seu comentário

Quem somos

A Entendedor Digital é uma empresa de marketing digital que tem como objetivo ajudar pequenas, médias e grandes empresas a venderem mais pela internet. 

Posts recentes

Acompanhe-nos

Receba novidades por e-mail

Garantimos a segurança e privacidade dos seus dados. Não enviaremos SPAM.