Exibir Lista de Posts Relacionados no Blogger

Uma forma de fazer com que visitantes “percam mais tempo em sua página” e exibir uma lista de post relacionados em seu blog procurei muito um hack na internet para fazer isto até que encontrei um muito bom que não só permite que você crie um modelo de post relacionado, como ele se torne um widget e assim possa ser movida para qualquer parte de seu template =D

Não e incrível então mão a obra!

Siga os passos abaixo.

1 – Na tab “Editar HTML”, clique em “Baixar modelo completo”, e salve uma cópia do template no seu computador.

2 – Procure a tag </head>. Cole o seguinte código logo ANTES dela:

<script type=”text/javascript”>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length – 1) * Math.random());
var i = 0;
document.write(‘<ul>’);
while (i < relatedTitles.length && i < 20) {
document.write(‘<li><a href=”‘ + relatedUrls[r] + ‘”>’ + relatedTitles[r] + ‘</a></li>’);
if (r < relatedTitles.length – 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write(‘<li><a href=”http://renatotavares.com”> Posts relacionados no seu Blog </a></li>’);
document.write(‘</ul>’);
}
//]]>
</script>

3 – Salve o template. Selecione a opcao “Expandir modelos de widgets”.

4 – Procure o seguinte trecho de código:

<b:if cond=’data:post.labels’>
<data:postLabelsLabel/>
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a>
<b:if cond=’data:label.isLast != “true”‘>,</b:if>
</b:loop>
</b:if>

5 – Cole este código ANTES do </b:loop> :

<b:if cond=’data:blog.pageType == “item”‘>
<script expr:src=’”/feeds/posts/default/-/” + data:label.name + “?alt=json-in-script&callback=related_results_labels&max-results=10″‘ type=’text/javascript’/>
</b:if>

6 – O código deve ficar assim (a parte azul é o que você adicionou):

<b:if cond=’data:post.labels’>
<data:postLabelsLabel/>
<b:loop values=’data:post.labels’ var=’label’>
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != “true”‘>,</b:if>
<b:if cond=’data:blog.pageType == “item”‘>
<script expr:src=’”/feeds/posts/default/-/” + data:label.name + “?alt=json-in-script&callback=related_results_labels&max-results=10″‘ type=’text/javascript’/>
</b:if>
</b:loop>
</b:if>

7 – Salve o template.

Habilite a Adição de Elementos às Postagens no Blog, para fazer isso siga os passos abaixo

7.1 – Permaneça na tab “Editar HTML”:
7.2 – Deixe a caixa “Expandir modelos de widgets” desmarcada.
7.3 – Procure pelo código dos Posts. O código é este :

<div id=’main-wrapper’>
<b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’false’ title=’Postagens no blog’ type=’Blog’/>
</b:section>
</div>

7.4 – Simplesmente substitua “no” por “yes”. Salve as mudanças.

8 – Como Criar o Widget de Posts Recentes

8.1 – Vá até a tab “Elementos da Página”.

8.2 – Você verá que agora existe um link “Adicionar um elemento de página”, sobre o campo dos posts. Clique nesse link.

8.3 – Escolha “HTML/JavaScript”, clicando em “Adicionar Ao Blog”.

8.4 – Escolha um Título – “Posts Relacionados”, “Veja Também”, o que você quiser – e cole o seguinte código no campo do Conteúdo:

<script type=”text/javascript”>
removeRelatedDuplicates();
printRelatedLabels();
</script>

8.5 – Salve as alterações. Volte para a tab “Editar HTML”. Marque “Expandir modelos de widgets”.

8.6 – Procure o código do widget que você acaba de adicionar. Uma forma fácil de encontrá-lo e procurar o título que você deu ao widget, e certificar-se de que ele está dentro de uma tag <b:widget>. É algo assim:

<b:widget id=’HTML13′ locked=’false’ title=’Posts Relacionados’ type=’HTML’>
<b:includable id=’main’>
<!– only display title if it’s non-empty –>
<b:if cond=’data:title != “”‘>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<data:content/>
</div>
<b:include name=’quickedit’/>
</b:includable>
</b:widget>

7 – Inclua as linhas em azul, EXTAMENTE ONDE ESTÁ INDICADO.

<b:widget id=’HTML13′ locked=’false’ title=’Posts Relacionados’ type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:blog.pageType == “item”‘>
<!– only display title if it’s non-empty –>
<b:if cond=’data:title != “”‘>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<data:content/>
</div>
<b:include name=’quickedit’/>
</b:if>
</b:includable>
</b:widget>

8 – Salve o template. Atencao a lista só vai aparecer nas páginas de postagem – não na Home do blog.

Digite seu e-mail abaixo e receba as novidades nele. É Grátis

Já sã o mais de 50 mil assinantes!