Widget de posts relacionados

IndisponivelVocê 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>
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):
<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. 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 tab “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: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. 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.


2 comentários:

1 Lênin 1 Blog! disse...

esse layout é uma viagem
kkkkkkkkkkkkk
mas a dica ta valendo
vo testar agora mesmo,
qualquer coisa do um toque ae ;PP

Jorge disse...

oo cara me ajuda ai eu n consegui
tentei mas n deu certo da erro na hora de add aquele javascript abaixo de bloop
me add no msn vth@viciados-toda-hora.com
valeu