Como colocar artigos relacionados com imagens no Blogger?
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 == "item"'> <script type='text/javascript'> var defaultnoimage=""; var maxresults=3; var splittercolor="#555"; var relatedpoststitle="Artigos Relacionados:"; </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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLepGZIOFalnSTjilItsmftjQQCTo6XTRg9wqXMEErEuOwPE5TKUF3lWgEbe0KoqPRzcSmhSBx2jW-nPXPHwOUV9E1fpUiD5HUbI43dI7lBZ2UkI0BQs_w-TJYm8BtBaDqVAGHq4vZfNw/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="Artigos Relacionados:";".
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 != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=999"' type='text/javascript'/> </b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </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!