Pesquisa personalizada

19 de julho de 2011

Como colocar “Posts Relacionados” no seu blog

Estava com essa duvida hoje e resolvi aproveitar minha pesquisa e fazer esse post, eu estava querendo colocar aqueles links em baixo de casa matéria do blog com algumas outras matérias ”relacionadas”, se resume a dois códigos que você deve colocar no seu HTML, por isso não farei o vídeo, apenas escrito mesmo.
1° Vá em “Design” no seu blog e clique em “Editar HTML”, aperte “CTRL+F” e procure por: </head>

2° Cole este código antes da linha </head>

<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: 15px;font-weight: bold;color: #000;font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{height: 150px;color: #000;border: 1px solid #ccc;background: #efefef;}#related-posts a:hover {background-color:#d4eaf2;} </style><script type='text/javascript'>//<![CDATA[//Script by Aneesh of www.bloggerplugins.org//Released on August 19th August 2009var 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('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while (i < relatedTitles.length && i < 20 && i<maxresults) { document.write('<a style="width: 114px;text-decoration:none;padding:5px;float:left;text-align: left;margin: 0px;');if(i!=0) document.write('"');else document.write('"');document.write(' href="' + relatedUrls[r] + '"><img style="width:92px;height:92px;border: 0px;margin: 3px auto 0px;padding: 1px;" src="'+thumburl[r]+'"/><br/><div style="width:100px;padding-left:4px;text-align:center;height:auto;border: 0pt none ; margin: 3px 0pt 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 11px; line-height: 1.1em; 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>

3° Clique em “SALVAR MODELO” depois selecione “Expandir modelos widgets”

4° “CTRL + F” e procure por: <div class='post-footer-line post-footer-line-1'

5° Cole o seguinte código depois desta linha:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a><script type='text/javascript'>var currentposturl=&quot;<data:post.url/>&quot;;var maxresults=5;var relatedpoststitle=&quot;Artigos relacionados&quot;;removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script></div><div style='clear:both'/></b:if>

6° Você pode alterar a quantidade de matérias que irão aparecer mudando o valor em: var maxresults=5;

7° Basta clicar em “SALVAR MODELO” e está pronto.

É isso, espero que tenham gostado, qualquer duvida deixe seu comentário, até a próxima.

5 comentários:

cauerock disse...

bom! continue assim, seu blog é muito bom, parabéns eu sempre quiz ter turoriais assim.
ah e quando vc tiver tempo dá uma passadinho lá no meu e deixe um comentário sobre o que vc achou.

E! Online disse...

Não funcionou no meu blog cara.. pode dar um help ae?

Na Net disse...

Você utiliza o blogger?
Colocou os códigos nos lugares indicados?
Lembrando que para aparecer matérias "relacionadas" ali, tem que ter pelo menos mais de um post com uma mesma tag, ou seja, os posts relacionados que aparecem ali vão ser aqueles que possuem a mesma tag.

Nina disse...

Ainda não deu certo no meu também, tentarei fazer de novo.

amigaohinos.com disse...

Valeu salvei tal tutorial, como ver funcionalidade?

Há tamanha para post, ah sim salvar com imagens é fácil?

Aguardando mais dicas, mui grato.

Deus abençoe Gê e Tê

Postar um comentário

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger