Você está em:
// Acessorios para Blogs

Posts Relacionandos para Blog

Alguns desses benefícios são:

  1.  Permite ao leitor encontrar exatamente o que lhe interessa, sem ter que revirar todo o site;
  2. É uma excelente “isca” para que o visitante/paraquedista conheça mais o seu blog;
  3. Aumenta a probabilidade de que o usuário leia mais posts;
  4. Mantém posts mais antigos à vista;
  5. Melhora a navegabilidade do blog.

Para quem usa Wordpress ou outras plataformas, é muito fácil oferecer essa lista. Já o nosso querido Blogger não oferece essa opção. No entanto, já existe uma forma de implantar essa funcionalidade no novo Blogger, desenvolvida por um dos melhores hackers do Blogger – Blogspot. Antes que você pergunte, não, eu não conheço nenhuma forma de implantar “Posts Relacionados” no Blogger Clássico.

Como Exibir Uma Lista de Posts Relacionados no novo Blogger – Blogspot

Você vai ter que mexer um pouco com o código do blog. Este hack inclui a criação de um widget que vai exibir a lista. Essa não é uma opção muito prática, visto que não é possível inserir o widget no corpo dos posts. Mas não se preocupe; eu consegui melhorar o hack, para que a lista seja exibida no final do post, antes dos comentários como em qualquer outra plataforma de blog.

Primeiro, Vamos ao Hack

Siga cada passo cuidadosamente, prestando atenção para não inserir espaços ou caracteres desnecessários. Depois de cada passo, visualize o blog para certificar-se de que está tudo certinho, e salve antes de passar ao próximo passo. Assim, será mais fácil saber onde foi que você errou, e poderá voltar atrás sem ter que fazer tudo de novo.

1.  Entre na sua conta do Blogger. Como sempre, faça antes um backup do seu template! 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('</ul>');
}
//]]>
</script>

3. Salve o template. Clique na caixinha “Expandir modelos de widgets”.
4. Procure o seguinte trecho de código (certifique-se de que é esse trecho exato, existem outros parecidos):
<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><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 vermelha é o que você adicionou):O código deve ficar assim (a parte vermelha é o que você adicionou):
<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. Se você quer adicionar o widget de Posts Recentes no final da página de postagem, você precisa…

Permitir a Adição de Elementos às Postagens no Blog. ¬¬

•  Permaneça na tab “Editar HTML”:
•  NÃO clique em “Expandir modelos de widgets”. Se a caixinha estiver marcada, desmarque.
•  Procure pelo código dos Posts; ele deve estar logo após o Header-wrapper. O código é este (ou alguma coisa muito parecida):
<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>

Simplesmente substitua “no“ por “yes“. Salve as mudanças.

Fim da Adição de Elementos às Postagens no Blog

Agora podemos continuar com o hack de Posts Recentes.
Como Criar o Widget de Posts Recentes

1. Vá até a aba “Elementos da Página”.
2. Você verá que agora existe um link “Adicionar um elemento de página“, sobre o campo dos posts. Clique nesse link.
3.  Escolha “HTML/JavaScript”, clicando em “Adicionar Ao Blog”.
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>
5 - Salve as alterações. Volte para a tab “Editar HTML”. Clique na caixinha “Expandir modelos de widgets”.
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 vermelho, EXTAMENTE ONDE ESTÁ INDICADO.
<b:widget id='HTML13' locked='false' title='Posts

Relacionados' type='HTML'

 <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. Você já pode arrastar seu widget de Posts Recentes para onde queira; o lugar mais aconselhável é debaixo das “Postagens do Blog”. A lista só vai aparecer nas páginas de postagem – não na Home do blog.


O problema do widget é que ele fica depois dos comentários, lá embaixo, na página do post. Se você tiver muitos comentários, é provável que muitos leitores não vejam sua lista de posts relacionados. O melhor mesmo seria uma solução estândar, com a lista de posts relacionados logo abaixo do posts, não é?

Retirado de: Blosque 

Nauan

Sou um estudante de programação e amo designer gráfico, adoro mexer e personalizar conteúdos infográficos e tipográficos, adoro também passar qualquer conteúdo de informação para meus leitores e ajudar a processar qualquer tipo de ajuda ou material didático.

Nenhum comentário:

  • Postar um comentário

Por favor leia antes de Comentar