Arquivos do Website:

Como colocar artigos relacionados com imagens no Blogger?


Os artigos relacionados são indispensáveis na maioria dos blogs ou websites, pois ajudam a aumentar as visualizações de páginas, oferecendo na maioria das vezes alguns artigos relevantes e úteis aos visitantes. Esse modelo de artigos relacionados é parecido com o random posts para blogger, ele irá mostrar artigos aleatórios, que estão na mesma seção do post que o usuário está visualizando naquele momento.



Este código é bem fácil de adicionar no template do seu blog! Mas, antes de começarmos, eu recomendo que você faça backup do template do seu blog ( Painel de controle do Blogger ==> Modelo ==> Fazer backup/Restaurar ==> Fazer download do modelo completo ==> Fechar).

Ok, depois de salvar o template atual do seu blog, clique em "HTML". Adicione no código fonte do seu blog, logo acima de "]]></b:skin>", este CSS:

.related-posts {background: #fff;list-style: none;overflow: hidden;margin: 5px 0 5px 5px;margin-bottom:50px !important;margin-top:30px;}

.related-posts h2 {background:#ddd;color: #555;font-family: 'Open Sans',arial,sans-serif;font-size: 18px; font-weight: 300;margin: 0 0 10px;padding: 5px 10px 10px;}

.related-posts .relatedTitles {color: $(black.link.color); display: block;font-family: 'Open Sans',arial,sans-serif;font-size: 12px;font-weight: 600;line-height: 24px;}

.related-posts .relatedTitles:hover {text-decoration: underline;}

.related-posts img {border: none;display: block;height: 235px;margin: 0 0 5px;width: 183px;}

.related-posts img:hover {-webkit-opacity: 0.80;-moz-opacity: 0.80;opacity: 0.80;}

.related-posts h3 {color: $(black.link.color);font-size: 18px;line-height: 24px;}

.related-posts a {border-left: 0.5px solid transparent;color: $(black.link.color);float: left;margin: 0 0 4px 5px;padding: 0;position: relative;text-decoration: none !important;width: 183px;}


Para controlar a largura e altura das imagens que aparecem no gadget, personalize isto:  height: 235px (altura) - width: 183px (largura).

Agora, adicione este código javascript logo acima de "</head>". Salve o template.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>

        var defaultnoimage=&quot;&quot;;

        var maxresults=3;

        var splittercolor=&quot;#555&quot;;

        var relatedpoststitle=&quot;Artigos Relacionados:&quot;;

      </script><script type='text/javascript'>

      //<![CDATA[

var relatedTitles=[],relatedTitlesNum=0,relatedUrls=[],thumburl=[]; function related_results_labels_thumbs(f){for(var e=0;e<f.feed.entry.length;e++){var g=f.feed.entry[e];relatedTitles[relatedTitlesNum]=g.title.$t;try{thumburl[relatedTitlesNum]=g.media$thumbnail.url}catch(h){s=g.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),thumburl[relatedTitlesNum]=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"undefined"!==typeof defaultnoimage?defaultnoimage:"http://2.bp.blogspot.com/-XLW6n9opqm0/UwOKYLe80pI/AAAAAAAAMl0/9Wkso_zoC4o/s1600/no+image.gif"}100<relatedTitles[relatedTitlesNum].length&& (relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,100)+"...");for(var k=0;k<g.link.length;k++)"alternate"==g.link[k].rel&&(relatedUrls[relatedTitlesNum]=g.link[k].href,relatedTitlesNum++)}} function removeRelatedDuplicates_thumbs(){for(var f=[],e=[],g=[],h=0;h<relatedUrls.length;h++)contains_thumbs(f,relatedUrls[h])||(f.length+=1,f[f.length-1]=relatedUrls[h],e.length+=1,g.length+=1,e[e.length-1]=relatedTitles[h],g[g.length-1]=thumburl[h]);relatedTitles=e;relatedUrls=f;thumburl=g}function contains_thumbs(f,e){for(var g=0;g<f.length;g++)if(f[g]==e)return!0;return!1} function printRelatedLabels_thumbs(f){for(var e=0;e<relatedUrls.length;e++)relatedUrls[e]!=f&&relatedTitles[e]||(relatedUrls.splice(e,1),relatedTitles.splice(e,1),thumburl.splice(e,1),e--);f=Math.floor((relatedTitles.length-1)*Math.random());e=0;0<relatedTitles.length&&document.write("<h2>"+relatedpoststitle+"</h2>");for(document.write('<div style="clear: both;"/>');e<relatedTitles.length&&20>e&&e<maxresults;)document.write('<a style="text-decoration:none;'),document.write('"'),document.write(' href="'+ relatedUrls[f]+'"><img src="'+thumburl[f].replace("/s72-c/","/w183-h235-c/")+'"/><div class="relatedTitles">'+relatedTitles[f]+"</div></a>"),e++,f<relatedTitles.length-1?f++:f=0;document.write("</div>");relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)};

//]]>

    </script></b:if>


Estes valores aqui no código javascript "w183-h235", devem ser os mesmos no código CSS. Para exibir mais do que 3 artigos relacionados, apenas altere o valor em "var maxresults=3". Para alterar o título do gadget "Artigos Relacionados:", personalize isto: "var relatedpoststitle=&quot;Artigos Relacionados:&quot;;".

Para finalizarmos, procure por "<div class='post-footer'>" e, adicione este código abaixo, logo acima dessa linha. Salve o template.

<div class='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=999&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'/>


Atenção! Alguns templates do Blogger têm duas linhas do código "<div class='post-footer'>". Caso você fizer tudo certinho e, mesmo assim, não conseguir visualizar os artigos relacionados no template do seu blog, apague o código dos artigos relacionados que você adicionou logo acima da primeira linha "<div class='post-footer'>". Agora, procure pela segunda linha "<div class='post-footer'>" e, adicione logo acima dela o código dos artigos relacionados. Salve o template. Os artigos relacionados deverão aparecer, caso o seu blog não esteja no modo privado!